目录 

        表格

        表格类 

        滚动条设置

        表格颜色类

        网格系统

        网格类

        基本结构

        偏移列

表格

        bootstrap中与html5中的表格创建方式相同，但是对于有些标签效果有所不同，我们可以看看下面这段代码，分别在html5和bootstrap4中运作，看看区别：

        <table>
            <caption>表格</caption>
            <thead>
                <tr>
                    <th>表头1</th>
                    <th>表头1</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>表格单元1</td>
                    <td>表格单元1</td>
                </tr>
                <tr>
                    <td>表格单元3</td>
                    <td>表格单元4</td>
                </tr>
            </tbody>
        </table>

        bootstrap4和html5渲染效果：

         我们可以发现，在bootstrap中表头<th>内的元素内容不具有自动居中效果，并且html5中用与定义表格标题的<captain>标签在bootstrap中效果也不同。在bootstrap中，<captain>标签作用是描述或者总结表格存储内容，而并非定义表格标题，因此在使用过程中我们一定要严格区分该标签的作用。

        在bootstrap中，定义了设置表格的一些类，.table使表格的一个基类，如果要添加其他的样式，需要在.table基础上添加，表内的样式也可以组合使用，注意需要使用空格进行间隔：

表格类 

● .table：为table添加基本样式(仅有横向分割线)

● .table-striped：在<tbody>内添加斑马线形式条纹，实现隔行换色

● .table-bordered：为表格单元格添加边框

● .table-borderless：设置表格无边框

● .table-hover：为表格每一行添加鼠标悬停效果(灰色背景)

● .table-sm：紧凑型表格(通过减少内边距设置较小表格)

● .table-responsive：响应式表格(屏幕宽度小于992px时创建水平滚动条)

● .table-dark：为表格添加黑色背景

        除了添加黑色背景，还可以添加更多颜色类

        测试基础代码： 

    <div class="container">
        <table class="col-md-3">
            <thead>
                <tr>
                    <th>标题</th>
                    <th>标题</th>
                    <th>标题</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>内容</td>
                    <td>内容</td>
                    <td>内容</td>
                </tr>
                <tr>
                    <td>内容</td>
                    <td>内容</td>
                    <td>内容</td>
                </tr>
                <tr>
                    <td>内容</td>
                    <td>内容</td>
                    <td>内容</td>
                </tr>
                <tr>
                    <td>内容</td>
                    <td>内容</td>
                    <td>内容</td>
                </tr>
            </tbody>
        </table>
    </div>

        分别添加不同表格类效果：

滚动条设置

        在上面的设置相应式表格时，其特点之一是屏幕宽度小于992px时创建水平滚动条。在bootstrap中，我们还有更多方法对于不同屏幕设置滚动条：

● .table-responsive-sm：指定屏幕宽度<576px

● .table-responsive-md：指定屏幕宽度<768px

● .table-responsive-lg：指定屏幕宽度<992px

● .table-responsive-xl：指定屏幕宽度<1200px

        下面的类除了可以对整个table进行设置，还可以单独设置到表格的行或者单元格(<tr><th><td>)

表格颜色类

● .table-primary：蓝色--指定是一个重要操作

● .table-success：绿色--指定是一个允许执行的操作

● .table-danger：红色--指定是可以危险的操作

● .table-info：浅蓝色--表示内容已变更

● .table-warning：橘黄色--表示需要注意的操作

● .table-active：灰色--将悬停的颜色应用在行或者单元格上

● .table-secondary：灰色--表示内容不怎么重要

● .table-light：浅灰色

● .table-dark：深灰色

        按照上述顺序设置单元格颜色效果：

网格系统

        bootstrap提供一套响应式、移动设备优先的流式网格系统，随着屏幕或者视口尺寸的增加，系统自动分为最多12列，我们也可以自定义列数。bootstrap4网格系统是响应式的，列会根据屏幕大小自动重新排列。

网格类

        bootstrap4对于网格系统有5个类：

● .col-：针对所有设备(也称超小设备)

● .col-sm-：平板(屏幕宽度≥576px)

● .col-md-：桌面显示器(屏幕宽度≥768px)

● .col-lg-：大桌面显示器(屏幕宽度≥992px)

● .col-xl-：超大桌面显示器(屏幕宽度≥1200px)

基本结构

        网格系统创建使用行创建水平列组，内容需要放置在列中，且只有列可以是行的直接子节点。行的预定义类为.row，列的预定义类为.col或者.col-*-*，需要注意的是，网格列是通过跨越指定的12个列来创建。

        网格系统的基本结构可以有以下两种方式：

    <!-- 控制不同设备显示和列宽设置 -->
    <div class="container">
        <div class="row">
            <div class="col-*-*"></div>
            <div class="col-*-*"></div>
            <div class="col-*-*"></div>
        </div>
    </div>
    <!-- bootstrap自动处理布局 -->
    <div class="container">
        <div class="row">
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
        </div>
    </div>

        第一种方式用于自主设置响应设备和列宽，如果我们自主设置了屏幕宽度，当页面小于指定屏幕宽度时，原本设置的横向布局可能会变成上下堆叠排版；第二种方式是bootstrap自动处理布局，同一行每个列宽度相等。我们可以看看下面例子：

    <!-- 设置响应设备为桌面显示器 -->
    <div class="container">
        <div class="row">
            <div class="col-md-12 bg-primary">1</div>
            <div class="col-md-6 bg-info">2</div>
            <div class="col-md-4 bg-success">3</div>
            <div class="col-md-3 bg-dark">4</div>
            <div class="col-md-2 bg-warning">5</div>
            <div class="col-md-1 bg-danger">6</div>
        </div>
    </div>
    <br>
    <!-- 设置响应设备针对所有设备 -->
    <div class="container">
        <div class="row">
            <div class="col-12 bg-primary">1</div>
            <div class="col-6 bg-info">2</div>
            <div class="col-4 bg-success">3</div>
            <div class="col-3 bg-dark">4</div>
            <div class="col-2 bg-warning">5</div>
            <div class="col-1 bg-danger">6</div>
        </div>
    </div>
    <br>
    <!-- 设置bootstrap自动处理布局 -->
    <div class="container">
        <div class="row">
            <div class="col bg-primary">1</div>
            <div class="col bg-info">2</div>
            <div class="col bg-success">3</div>
            <div class="col bg-dark">4</div>
            <div class="col bg-warning">5</div>
            <div class="col bg-danger">6</div>
        </div>
    </div>

        网页显示：

偏移列

        列的偏移设置格式如下：

格式：offset-*-*

        第一个*设置屏幕设备类型，可以是sm/md/lg/xl

        第二个*设置偏移量(范围为1-11)

        列偏移实质上是增加列的左外边距，所以视觉效果是向右移。

        测试代码：

    <div class="container">
        <div class="row">
            <div class="col-md-3 bg-primary">1</div>
            <!-- 向右偏移一格 -->
            <div class="col-md-2 bg-info offset-md-1">2</div>
            <!-- 向右偏移三格 -->
            <div class="col-md-3 bg-success offset-md-3">3</div>
        </div>
    </div>

        网页显示：