2--bootstrap笔记--表格

最新推荐文章于 2022-04-22 12:01:05 发布

原创最新推荐文章于 2022-04-22 12:01:05 发布 · 198 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #表格

bootstrap 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用Bootstrap快速创建美观的表格。通过应用不同类名，可以轻松实现紧凑型表格、鼠标滑过效果、斑马线表格及带边框的表格等样式。同时，介绍了响应式表格的设置方法。

使用bootstrap创建一个表格也是很简单的，并且能个设计得足够漂亮

代码展示

    <div class="container">
    <div class="table-responsive">
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>电话</td>
                    <td>班级</td> 
                    <td>学号</td>                 
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>张三</td>
                    <td>13</td>
                    <td>1332213</td>
                    <td>13312</td>
                    <td>13312</td>                  
                </tr>
                <tr>
                    <td>张三</td>
                    <td>13</td>
                    <td>1332213</td>
                    <td>13312</td>
                    <td>13312</td>                  
                </tr>               
            </tbody>
        </table>
    </div>
    </div>

事实上，在table class=”table” 用class以改名字命名之后，bootstrap将会自动修饰生成的表格，其他地方还是跟以往一样的写

table标签中的几个参数

1.紧凑型表格 class=”table table-condensed”
2.鼠标滑过效果只需要在表格中加上 table-hover
3.斑马线表格 class=”table table-striped”
4.表格边框 table-bordered ——-以上所有不冲突的参数都可写到一个class中 tr标签上的几个参数，主要用来控制颜色和状态 class=”active”还有其他参数请参考runoob上面的具体教程
< div class=”table-responsive”>< /div>该标签主要是将表格设置成响应式

效果展示

这里写图片描述