Bootstrap 实现表格样式、表单布局的实例代码

下面是关于“Bootstrap 实现表格样式、表单布局的实例代码”的攻略：

Bootstrap 表格样式

Bootstrap 提供了多种表格样式，使用 table 类即可。如下是一个漂亮的、具有不同表格样式的 HTML 表格：

<table class="table table-bordered table-hover table-striped">
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>男</td>
      <td>21</td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>男</td>
      <td>22</td>
    </tr>
    <tr>
      <td>3</td>
      <td>王五</td>
      <td>女</td>
      <td>20</td>
    </tr>
  </tbody>
</table>

上述代码中，表格一共使用了四个类：table、table-bordered、table-hover、table-striped，分别代表基本表格样式、边框表格样式、悬停表格样式、斑马条纹表格样式。

Bootstrap 表单布局

Bootstrap 提供了多种表单布局方式，使用 form-control 类即可。如下是一个具有不同表单布局和验证样式的 HTML 表单：

<form>
  <div class="form-group">
    <label>姓名：</label>
    <input type="text" class="form-control" required>
  </div>
  <div class="form-group">
    <label>性别：</label>
    <div class="radio">
      <label>
        <input type="radio" name="sex" value="男">男
      </label>
      <label>
        <input type="radio" name="sex" value="女">女
      </label>
    </div>
  </div>
  <div class="form-group">
    <label>年龄：</label>
    <input type="number" class="form-control" required>
  </div>
  <div class="form-group">
    <label>爱好：</label>
    <div class="checkbox">
      <label>
        <input type="checkbox" name="hobby" value="篮球">篮球
      </label>
      <label>
        <input type="checkbox" name="hobby" value="足球">足球
      </label>
      <label>
        <input type="checkbox" name="hobby" value="乒乓球">乒乓球
      </label>
    </div>
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-primary">提交</button>
  </div>
</form>

上述代码中，表单一共使用了四个类：form-group、form-control、radio、checkbox，分别代表表单组、表单控件、单选框和多选框控件。

使用这些 Bootstrap 类和样式可以更加方便地实现表格和表单的布局，让用户的交互体验更加美观、友好。