Bootstrap 中的容器与示例

Bootstrap 是一个流行的前端框架，为快速开发 Web 应用程序提供了丰富的功能。在 Bootstrap 中，容器是一个重要的组件之一，可以帮助我们轻松地构建整洁的布局。

容器

容器 (container) 是一个用于包含网页内容的元素，用于限制内容的宽度并在两侧留出一定的空白。在 Bootstrap 中，容器由 .container 类定义，同时还有 .container-fluid 类可用于创建全宽容器。

基本容器

基本容器在页面中创建一个最大宽度小于等于 1140 像素的容器。创造一个基本容器只需简单地添加 .container 类。

<div class="container">
  <!-- 这里放置你的内容 -->
</div>

全宽容器

全宽容器会填满整个屏幕，没有任何左右边距。要创建一个全宽容器只需把 .container 改为 .container-fluid。

<div class="container-fluid">
  <!-- 这里放置你的内容 -->
</div>

示例

Bootstrap 提供了很多示例，可以帮助用户更好地理解如何使用其组件。

导航栏

Bootstrap 导航栏 (navbar) 是一个重要的组件，用于网站或应用的导航。下面是一个基本 Navbar 的例子。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">品牌</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">首页</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">关于我们</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">服务</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">联系我们</a>
      </li>
    </ul>
  </div>
</nav>

表格

Bootstrap 表格是一个灵活的组件，可以方便地展示数据。下面是一个基本的表格示例。

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">姓名</th>
      <th scope="col">年龄</th>
      <th scope="col">地址</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>John</td>
      <td>25</td>
      <td>北京市</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jane</td>
      <td>30</td>
      <td>广州市</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Bob</td>
      <td>20</td>
      <td>上海市</td>
    </tr>
  </tbody>
</table>

栅格系统

Bootstrap 栅格系统是一个可用于创建响应式网页布局的强大工具。下面是一个带有两列栅格的示例。

<div class="row">
  <div class="col-md-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">左侧内容</h5>
        <p class="card-text">这是一个左侧的栅格</p>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">右侧内容</h5>
        <p class="card-text">这是一个右侧的栅格</p>
      </div>
    </div>
  </div>
</div>

以上是 Bootstrap 中的容器与示例的介绍。通过以上内容，我们可以快速且有效地创建一个漂亮的网站布局并在其中添加 Bootstrap 的组件。