Bootstrap（第 3 部分）|按钮、字形、表格

Bootstrap是一套用于web开发的前端组件库，主要用于构建响应式和移动设备优先的网站和应用程序。这里介绍Bootstrap中的按钮、字形和表格。

按钮

Bootstrap中提供了一系列的按钮样式，可以通过简单地添加class来使用不同的样式。以下是一些常用的按钮样式：

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

还可以通过添加其他class来改变按钮的大小和样式：

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-success btn-sm">Small button</button>
<button type="button" class="btn btn-danger btn-block">Block level button</button>

字形

Bootstrap中提供了一些矢量图标，可以通过添加class来使用相应的图标：

<i class="fas fa-heart"></i>
<i class="fas fa-star"></i>
<i class="fas fa-envelope"></i>
<i class="fas fa-search"></i>
<i class="fas fa-bars"></i>

需要注意的是，使用字形需要先引入字形库的CSS文件：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-Qz5ksVg5axeVRv/8LsoIxpnd6VeMo1mAWskAeLU5muKE/Z5TwgMGVp5gEj0axXsg" crossorigin="anonymous">

表格

Bootstrap中的表格样式非常灵活，可以根据自己的需要自由地定制样式。以下是一个简单的表格例子：

<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>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

需要注意的是，使用表格需要先引入Bootstrap的CSS文件：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">