组件

警报

<div class="alert alert-success" role="alert">
  A simple success alert with <a href="#" class="alert-link">an example link</a>
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert with <a href="#" class="alert-link">an example link</a>
</div>
<div class="alert alert-warning" role="alert">
  <h5 class="alert-heading mb-0">Alert Title</h5>
  A simple warning alert with <a href="#" class="alert-link">an example link</a>
</div>
<div class="alert alert-info alert-dismissible fade show" role="alert">
  A simple info alert with <a href="#" class="alert-link">an example link</a>
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

面包屑

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

按钮

Bootstrap提供了几种不同颜色的按钮。我们不建议您使用所有这些按钮。相反，您应该尽可能少地使用不同颜色的按钮。

仅推荐以下颜色变体

填充

边框

卡片

下拉菜单

<div class="dropdown">
  <button
    class="btn btn-secondary dropdown-toggle"
    type="button"
    id="dropdownMenuButton"
    data-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false"
  >
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item active" href="#">Another action</a>
    <a class="dropdown-item disabled" href="#">Something else here</a>
  </div>
</div>

页脚

仅包含版权信息

---

<footer class="footer">
  <div class="container">
    &copy; 2011&ndash;2020 openSUSE contributors
  </div>
</footer>

包含链接

---

<footer class="footer">
  <div class="container">
    <div class="row">
      <div class="col-sm-6">
        &copy; 2011&ndash;2020 openSUSE contributors
      </div>
      <div class="col-sm-6 text-sm-right">
        <ul class="list-inline mb-0">
          <li class="list-inline-item"><a href="#">Source code</a></li>
          <li class="list-inline-item"><a href="#">Privacy</a></li>
          <li class="list-inline-item"><a href="#">Support</a></li>
        </ul>
      </div>
    </div>
  </div>
</footer>

输入

文本、搜索、电子邮件、密码输入框具有相同的外观。它们只是单个元素组件。

选择框、复选框、单选按钮和文件输入框应使用自定义控件。

列表组

请勿使用情境类。

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus
• Porta ac consectetur ac
• Vestibulum at eros

模态框

表格

<div class="table-responsive">
  <table class="table">
    <caption>
      List of users
    </caption>
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</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>
</div>