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

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

<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>