bootstrap4--表格和网格系统

目录 

        表格

        表格类 

        滚动条设置

        表格颜色类

        网格系统

        网格类

        基本结构

        偏移列

---

表格

        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>