文档章节

3.4、Bootstrap V4自学之路------内容---表格

Asktao
 Asktao
发布于 2016/03/23 11:16
字数 1175
阅读 68
收藏 3

大锅烩~ 连起来比对效果,多少能看出一些差距。





<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <span><b>1、无效果的table</b></span>
            <table>
                <thead>
                  <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                  </tr>
                </tbody>
              </table>
        </div>

        <div class="col-sm-12">
            <span><b>2、BS提供的.table类 |class="table"</b></span>
            <table class="table">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                  </tr>
                </tbody>
              </table>
        </div>

        <div class="col-sm-12">
            <span><b>3、反相表格.table-inverse | class="table table-inverse"</b></span>
            <table class="table table-inverse">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                  </tr>
                </tbody>
              </table>
        </div>

        <div class="col-sm-12">
            <span><b>4、反相表格.table-inverse | class="table table-inverse"</b></span>
            <table class="table">
                <thead class="thead-default">
                  <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                  </tr>
                </thead>
                <thead class="thead-inverse">
                  <tr>
                    <th>1</th>
                    <th>Mark</th>
                    <th>Otto</th>
                    <th>@mdo</th>
                  </tr>
                </thead>
              </table>
        </div>

        <div class="col-sm-12">
            <span><b>5、隔行变色 .table-striped | class="table table-striped"</b></span>
            <table class="table table-striped">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th>1</th>
                    <th>Mark</th>
                    <th>Otto</th>
                    <th>@mdo</th>
                  </tr>
                  <tr>
                    <th>1</th>
                    <th>Mark</th>
                    <th>Otto</th>
                    <th>@mdo</th>
                  </tr>
                  <tr>
                    <th>1</th>
                    <th>Mark</th>
                    <th>Otto</th>
                    <th>@mdo</th>
                  </tr>
                </tbody>
              </table>
        </div>

        <div class="col-sm-12">
            <span><b>6、带边框的表格 .table-bordered | class="table table-bordered"</b></span>
            <table class="table table-bordered">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th>1</th>
                    <th>Mark</th>
                    <th>Otto</th>
                    <th>@mdo</th>
                  </tr>
                </tbody>
              </table>
        </div>

        <div class="col-sm-12">
            <span><b>7、可悬停的行 .table-hover | class="table table-hover"</b></span>
            <table class="table table-hover">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th>1</th>
                    <th>Mark</th>
                    <th>Otto</th>
                    <th>@mdo</th>
                  </tr>
                </tbody>
              </table>
        </div>

        <div class="col-sm-12">
            <span><b>8、紧凑型的表 .table-sm | class="table table-sm"</b></span>
            <table class="table table-sm">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th>1</th>
                    <th>Mark</th>
                    <th>Otto</th>
                    <th>@mdo</th>
                  </tr>
                  <tr>
                    <th>1</th>
                    <th>Mark</th>
                    <th>Otto</th>
                    <th>@mdo</th>
                  </tr>
                </tbody>
              </table>
        </div>

        <div class="col-sm-12">
            <span><b>9、上线文类 《tr class="table-active"》</b></span>
            <table class="table">
                <thead>
                  <tr>
                    <th>0</th>
                    <th>将条形码放置《tr》中 </th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="table-active">
                    <th>1</th>
                    <th>class="table-active"</th>
                  </tr>
                  <tr class="table-success">
                    <th>2</th>
                    <th>class="table-success"</th>
                  </tr>
                  <tr class="table-warning">
                    <th>3</th>
                    <th>class="table-warning"</th>
                  </tr>
                  <tr class="table-danger">
                    <th>4</th>
                    <th>class="table-danger"</th>
                  </tr>
                  <tr class="table-info">
                    <th>5</th>
                    <th>class="table-info"</th>
                  </tr>
                </tbody>
              </table>
        </div>

        <div class="col-sm-12">
            <span><b>10、上线文类 《td class="table-active"》</b></span>
            <table class="table">
                <thead>
                  <tr>
                    <th>0</th>
                    <th>将条形码放置《td》中 </th>
                    <th>0</th>
                    <th>0</th>
                    <th>0</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                      <td class="table-active">td class="table-active"</td>
                      <td class="table-success">td class="table-success"</td>
                      <td class="table-warning">td class="table-warning"</td>
                      <td class="table-danger">td class="table-danger"</td>
                      <td class="table-info">td class="table-info"</td>
                  </tr>
                </tbody>
              </table>
        </div>

        <div class="col-sm-12">
            <span><b>11、响应式表格 .table-responsive | 加在table外层div中</b></span>
            <div class="table-responsive">
                <table class="table">
                    <thead>
                      <tr>
                        <th scope="row">#</th>
                        <th>如果窗体宽度小于768PX,</th>
                        <th>则在table中加入横向滚动条</th>
                        <th>如果窗体宽度小于768PX,</th>
                        <th>则在table中加入横向滚动条</th>
                        <th>如果窗体宽度小于768PX,</th>
                        <th>则在table中加入横向滚动条</th>
                        <th>如果窗体宽度小于768PX,</th>
                        <th>则在table中加入横向滚动条</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <th scope="row">1</th>
                        <td>成功</td>
                        <td>则在table中加入横向滚动条</td>
                        <td>如果窗体宽度小于768PX,</td>
                        <td>则在table中加入横向滚动条</td>
                        <td>如果窗体宽度小于768PX,</td>
                        <td>则在table中加入横向滚动条</td>
                        <td>如果窗体宽度小于768PX,</td>
                        <td>则在table中加入横向滚动条</td>
                      </tr>
                    </tbody>
                  </table>
            </div>
        </div>



        <div class="col-sm-12">
            <span>12、表格转秩 .table-reflow | class="table table-reflow" </span>
            <table class="table table-reflow">
                <thead>
                  <tr>
                    <th>#.table-reflowa</th>
                    <th>我是第一个TR的第2个td</th>
                    <th>我是第一个TR的第3个td</th>
                    <th>我是第一个TR的第4个td</th>
                    <th>我是第一个TR的第5个td</th>
                    <th>我是第一个TR的第6个td</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th scope="row">1 竖向显示表格</th>
                    <td>我是第二个tr的第2个td</td>
                    <td>我是第二个tr的第3个td</td>
                    <td>我是第二个tr的第4个td</td>
                    <td>我是第二个tr的第5个td</td>
                    <td>我是第二个tr的第6个td</td>
                  </tr>
                </tbody>
              </table>
        </div>
        
    </div>
</div>


© 著作权归作者所有

Asktao
粉丝 27
博文 98
码字总数 114189
作品 0
丰台
程序员
私信 提问
Bootstrap V4 自学之路 文档目录

PS:将文档中的内容亲手梳理一遍,用自己的话重复一些遍。其中意义与COPY不同。是胜于蓝。 对自己的话! 课程目录 1、Bootstrap V4 自学之路------起步 1.1、Bootstrap V4自学之路------起步...

Asktao
2016/01/25
420
0
6.1、Bootstrap V4自学之路------迁移---升级到v4

升级到 v4 Bootstrap 4 几乎是对整个项目进行了重写。其中最显著的变化都概括到了下面的内容,与以前相比,拥有了更多的具体的类以及把一些有关的部分变成了相关的组件。 当心!它在 flux 中...

Asktao
2016/03/26
324
0
Bootstrap V4 自学开始!

记在前面!!! 记在前面!!! 记在前面!!! 目标:克服一切困难学习Bootstrap V4文档所有知识,并做出相应效果实例。 结束日期:2016年3月25日 学习地址:http://wiki.jikexueyuan.com/project/b...

Asktao
2016/01/25
155
1
1.1、Bootstrap V4自学之路------起步---介绍

如果快速建立bootstrap V4模板 DEMO敬上: <!DOCTYPE html><html lang="en"> <head> <!-- Required meta tags always come first --> <meta charset="utf-8"> <meta name="viewport" conten......

Asktao
2016/01/25
169
0
4.4、Bootstrap V4自学之路------组件---表单

表单控件 下面是一个Bootstrap支持的表控件以及自定义类的完整列表。额外的文档对每个组都是可用的。 类 作用 支持的变量 表单控件的任一组 用在任何块级元素上,比如说或 文本域控件 、 、、...

Asktao
2016/03/23
426
0

没有更多内容

加载失败,请刷新页面

加载更多

OpenStack 简介和几种安装方式总结

OpenStack :是一个由NASA和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目。项目目标是提供实施简单、可大规模扩展、丰富、标准统一的云计算管理平台。OpenSta...

小海bug
今天
5
0
DDD(五)

1、引言 之前学习了解了DDD中实体这一概念,那么接下来需要了解的就是值对象、唯一标识。值对象,值就是数字1、2、3,字符串“1”,“2”,“3”,值时对象的特征,对象是一个事物的具体描述...

MrYuZixian
今天
6
0
数据库中间件MyCat

什么是MyCat? 查看官网的介绍是这样说的 一个彻底开源的,面向企业应用开发的大数据库集群 支持事务、ACID、可以替代MySQL的加强版数据库 一个可以视为MySQL集群的企业级数据库,用来替代昂贵...

沉浮_
今天
4
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
今天
7
0
常用物流快递单号查询接口种类及对接方法

目前快递查询接口有两种方式可以对接,一是和顺丰、圆通、中通、天天、韵达、德邦这些快递公司一一对接接口,二是和快递鸟这样第三方集成接口一次性对接多家常用快递。第一种耗费时间长,但是...

程序的小猿
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部