文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Bootstrap中如何使用表格

2024-04-02 19:55

关注

这篇文章主要介绍“Bootstrap中如何使用表格”,在日常操作中,相信很多人在Bootstrap中如何使用表格问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Bootstrap中如何使用表格”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

Bootstrap中如何使用表格

1 强大的Bootstrap的表格

在html标签<table>加上基本类别 .table就可以使用Bootstrap的表格可选修饰类别或是自定义样式进行扩展。

所有表格样式在Bootstrap中都不会继承,意味着嵌套表格的样式都是独立于父表格。

以下是使用最基本的表格排版在Bootstrap中的外观。

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>表格演示</title>
  </head>
  <body>
        <div class="container">
            <h2>表格演示</h2>
            <table class="table">
                <thead>
                <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>职业</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                <th>1</th>
                <td>张三</td>
                <td>男</td>
                <td>程序员</td>
                </tr>
                <tr>
                <th>2</th>
                <td>李四</td>
                <td>女</td>
                <td>美工</td>
                </tr>
                <tr>
                <th>3</th>
                <td>王五</td>
                <td colspan="2">我只会耍大刀</td>
                </tr>
                </tbody>
                </table>
        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Bootstrap中如何使用表格

可以看到,默认的简单表格只是在table标签加了个class="table",就和普通的html表格外观上有了很大改观。

2 表格的颜色

使用语意化class给表格列或单元格上色。表哥颜色可以分别设置在<table>、<tr>、<thead>、<th>、<td>等一切表格元素中。如果是加在表格中,则在整个表格中有效,加在行中对整行有效,加在单元格中对整个单元格有效。

到目前为止好像没法加在整列中,要对整列使用某个颜色,只能将其中的所有单元格设置颜色。

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>表格演示</title>
  </head>
  <body>
        <div class="container">
            <table class="table">
                <tr><td>Default</td></tr>
                <tr class="table-primary"><td>table-primary</td></tr>
                <tr class="table-secondary"><td>table-secondary</td></tr>
                <tr class="table-success"><td>table-success</td></tr>
                <tr class="table-danger"><td>table-danger</td></tr>
                <tr class="table-warning"><td>table-warning</td></tr>
                <tr class="table-info"><td>table-info</td></tr>
                <tr class="table-light"><td>table-light</td></tr>
                <tr class="table-dark"><td>table-dark</td></tr>
                <tr><td class="table-success">table-success</td></tr>
            </table>
        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Bootstrap中如何使用表格

通过这个例子大家可以基本明白表格颜色的用法,需要主要的是对整个表格运用颜色是用<table class="table table-secondary">,不要省略前面的table, 虽然例子中最后一行也是table-success,但是事实上,最后一行是设置在单元格上的。

3 表格的结构-表头、表尾、

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>表格演示</title>
  </head>
  <body>
        <div class="container">
            <table class="table caption-top">
                <caption class="text-center"><h4>人员登记表</h6></caption>
                <thead>
                <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>职业</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                <th>1</th>
                <td>张三</td>
                <td>男</td>
                <td>警察</td>
                </tr>
                <tr>
                <th>2</th>
                <td>李四</td>
                <td>女</td>
                <td>护士</td>
                </tr>
                <tr>
                <th>3</th>
                <td>王五</td>
                <td>男</td>
                <td>教师</td>
                </tr>
                </tbody>
                <tfoot>
                    <th>序号</th>
                    <td>姓名</td>
                    <td>性别</td>
                    <td>职业</td>
                </tfoot>
                </table>
        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

显示效果

Bootstrap中如何使用表格

从上面的例子可以看出表格由下面几部分组成:

通常为了美观,一般使用<thead  class="table-light"><thead  class="table-dark"> 使<thead>显示为浅灰色或深灰色,其用法与11.2.1中的行的颜色一样,另外一般情况下表尾很少使用。

4 响应式表格

当表格一行的内容超过浏览器宽度的时候,默认浏览器会出现滚动条,这样存在的一个问题就是会把页面无线拉伸,严重影响网页中其他页面元素的显示效果。

而响应式表格是指把表格放在一个<div class="table-responsive"> </div>标签中,而该div标签是响应的,与容器同宽度,当表格宽度大于该div标签的时候,该div容器就会出现滚动条,而不是在浏览器上,这样就保证了表格不会超出页面宽度。

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>表格演示</title>
    <style>
        td{white-space:nowrap;}
    </style>
  </head>
  <body>
        <div class="container">
            <div class="table-responsive">
            <table class="table caption-top">
                <thead>
                <tr>
                <th>表头1</th>
                <th>表头2</th>
                <th>表头3</th>
                <th>表头4</th>
                <th>表头5</th>
                <th>表头6</th>
                <th>表头7</th>
                <th>表头8</th>
                <th>表头9</th>
                <th>表头10</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                <td>我是第1个单元格</td>
                <td>我是第2个单元格</td>
                <td>我是第3个单元格</td>
                <td>我是第4个单元格</td>
                <td>我是第5个单元格</td>
                <td>我是第6个单元格</td>
                <td>我是第7个单元格</td>
                <td>我是第8个单元格</td>
                <td>我是第9个单元格</td>
                <td>我是第10个单元格</td>
                </tr>
            </table>
            </div>
   </div>
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

该代码的css部分是为了禁止文字换行,否则单元格会挤压成很多行。

在特点断点处响应

table-responsive{-sm|-md|-lg|-xl|-xxl}表示在断点前会出现滚动条,从该断点开始,表格将正常运行并且不会水平滚动。你可以把上面的代码中table-responsive换为table-responsive-md 查看一下效果,在此我就不演示了。

5 表格边框

默认表格是只有行边框的,你可以用table-bordered 为表格和单元格的所有边添加边框,还可以用可以添加边框颜色实用类来更改边框颜色(边框颜色通表格颜色,只不过把前缀table换成border)。

<table class="table table-bordered border-primary">
...
</table>

你还可以table-borderless构造无框的表格。

<table class="table table-borderless">
...
</table>

现在给出一个综合实例。

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>表格演示</title>
  </head>
  <body>
        <div class="container">
            <table class="table caption-top table-bordered border-primary">
                <caption class="text-center"><h4>带颜色边框表格</h6></caption>
                <thead>
                <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>职业</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                <th>1</th>
                <td>张三</td>
                <td>男</td>
                <td>警察</td>
                </tr>
                <tr>
                <th>2</th>
                <td>李四</td>
                <td>女</td>
                <td>护士</td>
                </tr>
                <tr>
                <th>3</th>
                <td>王五</td>
                <td>男</td>
                <td>教师</td>
                </tr>
                </tbody>
            </table>
            
            <table class="table caption-top table-borderless">
                <caption class="text-center"><h4>无边框表格</h6></caption>
                <thead  class="table-light">
                <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>职业</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                <th>1</th>
                <td>张三</td>
                <td>男</td>
                <td>警察</td>
                </tr>
                <tr>
                <th>2</th>
                <td>李四</td>
                <td>女</td>
                <td>护士</td>
                </tr>
                <tr>
                <th>3</th>
                <td>王五</td>
                <td>男</td>
                <td>教师</td>
                </tr>
                </tbody>
            </table>
   </div>
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

6 紧凑表格(小表格)

添加table-sm将所有单元格填充减半,使任何table更加紧凑。

<table class="table table-sm">

下面第二个是紧凑表格,仔细看是不是比第一个没使用table-sm那个行高度要小。

Bootstrap中如何使用表格

7 垂直对齐

<thead> 的表格单元格始终垂直对齐到底部。<tbody>中的表单元格继承<table>对齐方式,默认情况下将其对齐到顶部。在需要时可以使用垂直对齐类重新对齐。

垂直对齐类有两种修饰符:

垂直对齐修饰符可以写到表格,可以写到行,也可以写到单元格,写到哪里就作用于哪里。还可以用到p、div等其它标签。

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>列的排序</title>
    <style>
        th{white-space:nowrap;}
    </style>
</head>
<body>
    <div class="container">
        <table class="table">
            <thead>
              <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>简介</th>
              </tr>
            </thead>
            <tbody>
              <tr>
               <td>1</td>
               <td>李白</td>
               <td>李白(701年-762年) ,字太白,号青莲居士,又号“谪仙人”,是唐代伟大的浪漫主义诗人,被后人誉为“诗仙”。代表作有《望庐山瀑布》《行路难》《蜀道难》《将进酒》《梁甫吟》《早发白帝城》等多首。</td>
               </tr>
            </tbody>
          </table>
            <table class="table align-middle">
              <thead>
                <tr>
                  <th>序号</th>
                  <th>姓名</th>
                  <th>简介</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                 <td>1</td>
                 <td>李白</td>
                 <td>李白(701年-762年) ,字太白,号青莲居士,又号“谪仙人”,是唐代伟大的浪漫主义诗人,被后人誉为“诗仙”。代表作有《望庐山瀑布》《行路难》《蜀道难》《将进酒》《梁甫吟》《早发白帝城》等多首。</td>
                 </tr>
                <tr class="align-bottom">
                    <td>2</td>
                    <td>杜甫</td>
                    <td>杜甫(712年—770年),字子美,原籍湖北襄阳,后徙河南巩县。唐代伟大的现实主义诗人,与李白合称“李杜”。杜甫在中国古典诗歌中的影响非常深远,被后人称为“诗圣”,他的诗被称为“诗史”。杜甫创作了《登高》《春望》《北征》《三吏》《三别》等名作。</td>
                    </tr>
                </tr>
                <tr>
                  <td>3</td>
                  <td class="align-top">白居易</td>
                  <td>白居易(772年-846年),字乐天,号香山居士,又号醉吟先生,祖籍山西太原。是唐代伟大的现实主义诗人,白居易的诗歌题材广泛,形式多样,语言平易通俗,有“诗魔”和“诗王”之称。有《白氏长庆集》传世,代表诗作有《长恨歌》、《卖炭翁》、《琵琶行》等。</td>
                </tr>
              </tbody>
            </table>
      </div>
     
    <script src="bootstrap5/bootstrap.bundle.min.js"></script>
</body>
</html>

第一个表格是不使用垂直对齐的效果。 第二个表格中第一行继承了表格的对齐效果,第二行使用了行的对齐效果,第三行第二单元格使用单元格对齐效果,其他两个单元格使用表格的对齐效果。

Bootstrap中如何使用表格

8 水平对齐

水平对齐其实就是文本对齐,使用的是文本通用类,在前面的表格结构中的部分已经用过了,有三个修饰符:

跟垂直对齐一样,垂直对齐修饰符可以写到表格,可以写到行,也可以写到单元格,写到哪里就作用于哪里。还可以用到p、div、h2-h7、span等其它标签,甚至只要有文本的容器都可以使用这个,应用比垂直对齐多得多。这个在前面的好多例子都用到了,就不举例了。

9 嵌套

表格的嵌套就是在表格中的一个单元格中再嵌入一个表格,嵌套表不会继承边框样式、活动样式和表变量。

需要注意的是表格必须嵌套在一个单元格内,而不能直接嵌套到一个行内,如果你想嵌套进一行中,请使用单元格合并功能,如下例子。

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>列的排序</title>
    <style>
        th{white-space:nowrap;}
    </style>
</head>
<body>
    <div class="container">
        <table class="table caption-top table-bordered border-primary">
            <caption class="text-center"><h4>人员名单</h6></caption>
            <thead>
            <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>职业</th>
            </tr>
            </thead>
            <tbody>
            <tr>
            <th>1</th>
            <td>张三</td>
            <td>男</td>
            <td>警察</td>
            </tr>
            <tr>
            <th>2</th>
            <td>李四</td>
            <td>女</td>
            <td>护士</td>
            </tr>
            <tr>
            <td colspan="4">
                <table class="table caption-top table-bordered border-primary">
                    <caption class="text-center"><h4>据说天使没有性别</h6></caption>
                    <thead>
                    <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>职业</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                    <th>1</th>
                    <td>加百列</td>
                    <td>天使长</td>
                    </tr>
                    <tr>
                    <th>2</th>
                    <td>沙利叶</td>
                    <td>月之天使</td>
                    </tr>
                    </tbody>
                </table>
            </td>
            </tr>
            </tbody>
        </table>
      </div>
  
    <script src="bootstrap5/bootstrap.bundle.min.js"></script>
</body>
</html>

Bootstrap中如何使用表格

10 强调表格

10.1 条纹行

使用.table-striped在<tbody>范围内任何表格行增加明暗条纹样式效果,还可以配合颜色做出更加美观的表格。

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>表格演示</title>
  </head>
  <body>
        <div class="container">
            <table class="table table-striped">
                <thead>
                <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>职业</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                <th>1</th>
                <td>张三</td>
                <td>男</td>
                <td>警察</td>
                </tr>
                <tr>
                <th>2</th>
                <td>李四</td>
                <td>女</td>
                <td>护士</td>
                </tr>
                <tr>
                <th>3</th>
                <td>王五</td>
                <td>男</td>
                <td>教师</td>
                </tr>
                </tbody>
                </table>
                <table class="table table-dark table-striped">
                    <thead>
                    <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>职业</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                    <th>1</th>
                    <td>张三</td>
                    <td>男</td>
                    <td>警察</td>
                    </tr>
                    <tr>
                    <th>2</th>
                    <td>李四</td>
                    <td>女</td>
                    <td>护士</td>
                    </tr>
                    <tr>
                    <th>3</th>
                    <td>王五</td>
                    <td>男</td>
                    <td>教师</td>
                    </tr>
                    </tbody>
                    </table>
                    <table class="table table-success table-striped">
                        <thead>
                        <tr>
                        <th>序号</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>职业</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                        <th>1</th>
                        <td>张三</td>
                        <td>男</td>
                        <td>警察</td>
                        </tr>
                        <tr>
                        <th>2</th>
                        <td>李四</td>
                        <td>女</td>
                        <td>护士</td>
                        </tr>
                        <tr>
                        <th>3</th>
                        <td>王五</td>
                        <td>男</td>
                        <td>教师</td>
                        </tr>
                        </tbody>
                        </table>       
        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Bootstrap中如何使用表格

10.2 可悬停行

在table标签类中添加table-hover可对<tbody>中的表行启用悬停效果,当鼠标放在某一行上面时,郑航会特殊显示,。 将上面11.9.1代码中table-striped换为table-hover可实现悬停效果,也可以和table-striped一起使用,用法很简单,在此就不在演示了。

10.3 激活表

通过添加table-active高亮显示表行或单元格。注意这个修饰符只能加在行或者单元格上,其用法和垂直对齐用法差不多。这里不再演示,只给出效果图。

Bootstrap中如何使用表格

Bootstrap中如何使用表格

到此,关于“Bootstrap中如何使用表格”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯