Bootstrap 3 之 Bootstrap 标签

Bootstrap 提供了一系列的标签（tag）来帮助开发者快速构建网页的结构和布局。这些标签可以让开发者轻松地创建导航栏、按钮、表格等元素，而不用从头开始编写样式。

导航栏

Bootstrap 提供了一个<nav>标签来创建导航栏。通过添加一些类名，可以轻松地创建水平或垂直的导航栏，还可以添加下拉菜单等功能。

// www.javascriptcn.com code example
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>

按钮

Bootstrap 提供了多种样式的按钮，包括默认、主要、成功、警告、危险等。使用<button>标签或<a>标签并添加相应的类名即可创建不同样式的按钮。

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>

表格

Bootstrap 的表格样式可以让表格看起来更加美观和易读。通过添加类名，可以轻松地给表格添加斑马线效果、响应式布局等功能。

// www.javascriptcn.com code example
<table class="table table-striped">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>20</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>22</td>
    </tr>
  </tbody>
</table>

以上就是 Bootstrap 标签的简单介绍，通过使用这些标签，开发者可以快速构建出漂亮且功能丰富的网页。在接下来的章节中，我们将继续介绍 Bootstrap 的其他功能和组件。