Bootstrap 4中的表格

Bootstrap是目前最流行的响应式网页开发框架之一，其中包含了丰富的UI组件，可以方便开发者快速搭建漂亮的界面。表格是网页中最常见的数据展示方式，Bootstrap中对于表格的样式和功能都做了很好的封装。

基本表格

Bootstrap中基本表格样式很简单，只需要在table标签上加上class为table即可。

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>名称</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>商品1</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>2</td>
      <td>商品2</td>
      <td>$200</td>
    </tr>
    <tr>
      <td>3</td>
      <td>商品3</td>
      <td>$300</td>
    </tr>
  </tbody>
</table>

以上代码会得到一个基本表格，如下图所示：

带颜色的表格

Bootstrap中还提供了多种颜色样式的表格，方便开发者根据实际需求选择不同的样式。常用的颜色有success、info、warning、danger等。

<table class="table table-success">
  <thead>
    <tr>
      <th>#</th>
      <th>名称</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>商品1</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>2</td>
      <td>商品2</td>
      <td>$200</td>
    </tr>
    <tr>
      <td>3</td>
      <td>商品3</td>
      <td>$300</td>
    </tr>
  </tbody>
</table>

以上代码会得到一个绿色的表格，如下图所示：

斑马纹表格

在一些需要长时间查看的表格中，带有斑马纹的表格可以让用户更加方便地区分每一行数据。

<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>名称</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>商品1</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>2</td>
      <td>商品2</td>
      <td>$200</td>
    </tr>
    <tr>
      <td>3</td>
      <td>商品3</td>
      <td>$300</td>
    </tr>
  </tbody>
</table>

以上代码会得到一个有斑马纹的表格，如下图所示：

带边框的表格

有时候需要给表格添加边框，以便更加醒目地展示数据。

<table class="table table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>名称</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>商品1</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>2</td>
      <td>商品2</td>
      <td>$200</td>
    </tr>
    <tr>
      <td>3</td>
      <td>商品3</td>
      <td>$300</td>
    </tr>
  </tbody>
</table>

以上代码会得到一个带边框的表格，如下图所示：

响应式表格

在移动设备上展示大尺寸的表格时，会导致页面出现滚动条和不必要的空白区域，影响用户体验。Bootstrap提供了响应式表格，可以根据屏幕尺寸自动缩放表格。

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>名称</th>
        <th>价格</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>商品1</td>
        <td>$100</td>
      </tr>
      <tr>
        <td>2</td>
        <td>商品2</td>
        <td>$200</td>
      </tr>
      <tr>
        <td>3</td>
        <td>商品3</td>
        <td>$300</td>
      </tr>
    </tbody>
  </table>
</div>

以上代码会得到一个响应式表格，如下图所示：

小结

Bootstrap中的表格样式简单易用，提供了多种颜色、斑马纹和带边框等方便开发者选择。同时，响应式表格也是Bootstrap的一大亮点，可以在不同屏幕尺寸下自动调整表格大小，提高用户体验。开发者可以根据实际需求选择不同的表格样式，展示数据更加美观和直观。