2--bootstrap笔记--表格

本文介绍如何使用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>该标签主要是将表格设置成响应式

效果展示

这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值