Bootstrap基本样式学习笔记之表格(2)

下面是对“Bootstrap基本样式学习笔记之表格(2)”的详细讲解攻略：

1. Bootstrap表格的基本样式

在使用Bootstrap的表格样式时，我们可以使用一些类来修饰表格的样式，这些类可以用来调整表格的颜色、字体、边框等属性。

下面是一些常用的Bootstrap表格类：

基础样式

• table: 默认样式，带有一些基本的样式属性。

带有斑马线的样式

• table-striped: 表格的奇偶行的背景色分别为白色和浅灰色，可以区分出表格的行列，提高可读性。

鼠标悬停样式

• table-hover: 当鼠标悬停在行上方时，行背景色变为浅灰色。

带有边框的样式

• table-bordered: 表格的边框为实线。

紧凑样式

• table-condensed: 缩小表格的行高和单元格的边距，使表格更加紧凑。

响应式表格

• .table-responsive: 使用.table-responsive类包裹表格，可以让表格在小于屏幕宽度时自动滚动，从而保证表格可以完整的显示出来。

2. Bootstrap表格的示例说明

示例一：带有斑马线的表格

使用table-striped类可以给表格添加斑马线，这可以让表格的行列更加清晰，提高可读性。

<table class="table table-striped">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>住址</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>男</td>
      <td>北京市海淀区</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>22</td>
      <td>男</td>
      <td>北京市东城区</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>18</td>
      <td>女</td>
      <td>北京市朝阳区</td>
    </tr>
  </tbody>
</table>

示例二：使用响应式表格

当在移动设备上显示表格时，为了让表格可以完整的显示出来，我们可以使用table-responsive类来使表格自动滚动。

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>编号</th>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>商品数量</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>001</td>
        <td>苹果</td>
        <td>5元/个</td>
        <td>10个</td>
      </tr>
      <tr>
        <td>002</td>
        <td>橙子</td>
        <td>3元/个</td>
        <td>20个</td>
      </tr>
      <tr>
        <td>003</td>
        <td>香蕉</td>
        <td>2元/个</td>
        <td>30个</td>
      </tr>
    </tbody>
  </table>
</div>

以上就是对“Bootstrap基本样式学习笔记之表格(2)”的详细讲解攻略，希望能对你有所帮助。