bootstrap的常用组件和栅格式布局详解

下面是有关“bootstrap的常用组件和栅格式布局详解”的一份攻略。

Bootstrap常用组件和栅格式布局

什么是Bootstrap？

Bootstrap 是一个流行的前端框架，可用于快速制作响应式和移动优先的网站。Bootstrap 主要由 HTML、CSS 和 JavaScript 组成。通过使用 Bootstrap，我们可以很容易地使用已有的组件和样式来构建我们的网站。

Bootstrap 的优势有：

快速开发——使用 Bootstrap，可以快速构建出优美的前端页面。
敏捷开发——Bootstrap 的设计非常符合敏捷开发的思路。
简单易用——Bootstrap 的学习曲线非常平缓，且易于使用。

Bootstrap常用组件

下面列出了 Bootstrap 中的一些常用组件：

导航条（navbar）

导航条（navbar）是一个用于网站导航的重要组件。Bootstrap 提供了一个现成的可定制导航条组件，可用于快速制定导航条。

示例：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Example</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>

模态框（modal）

模态框（modal）是一个具有互动效果的弹窗组件。可以显示一些信息或者提供一些交互内容。

示例：

<!-- Button to Open Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Open modal
</button>

<!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body text goes here.
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>

    </div>
  </div>
</div>

Bootstrap栅格式布局

Bootstrap 提供了栅格式布局（grid system），用于快速、方便地布局内容。栅格式布局将页面宽度划分为 12 个列，每个列有相应的类名来表示其大小，并使用行（row）来组织这些列。

示例：下面的 HTML 代码定义了三行，每行包含三个列。为了便于阅读，我们使用缩进。

<div class="container">
  <div class="row">
    <div class="col-md-4">First column</div>
    <div class="col-md-4">Second column</div>
    <div class="col-md-4">Third column</div>
  </div>
  <div class="row">
    <div class="col-md-4">First column</div>
    <div class="col-md-4">Second column</div>
    <div class="col-md-4">Third column</div>
  </div>
  <div class="row">
    <div class="col-md-4">First column</div>
    <div class="col-md-4">Second column</div>
    <div class="col-md-4">Third column</div>
  </div>
</div>

在以上示例中，我们使用了三个类：.container、.row 和 .col-md-4。.container 类是必须的，表示这是一个包含栅格式布局的容器。.row 类被用于每一行，.col-md-4 类被用于定义每个列，其中 md 表示栅格的最小宽度（当宽度小于 md 时，该列将合并为一个）。