Bootstrap 框架的基本使用

Bootstrap 是一个广泛使用的开源前端框架，由 Twitter 提供支持，旨在帮助开发者快速设计响应式、移动优先的网页。它包含了预定义的 CSS 样式、JavaScript 插件和布局工具，可以让你轻松地构建美观且具有良好兼容性的网页。

以下是对 Bootstrap 框架的基本使用介绍和实例。

1. 引入 Bootstrap 框架

有两种方式来引入 Bootstrap：

1.1 使用 CDN 引入

通过直接在 HTML 文件中引入 Bootstrap 的 CDN 链接，是最简单的方式。

引入 CSS 文件：

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

引入 JavaScript 文件：

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>

1.2 下载并本地引入

你可以下载 Bootstrap 的文件并将其本地化存放，在 HTML 文件中进行引用。

下载 Bootstrap：访问 Bootstrap 官网下载并解压。

引入本地文件：

<link href="path/to/bootstrap.min.css" rel="stylesheet">
<script src="path/to/bootstrap.bundle.min.js"></script>

2. 基本布局和栅格系统

Bootstrap 提供了一个灵活的栅格系统，允许你基于列和行来构建布局。其基本原理是通过容器 (container)，行 (row)，列 (col) 组合来创建响应式布局。

2.1 使用容器和栅格

容器：用来包裹整个网页内容，具有固定宽度或流式宽度。

<div class="container"> <!-- 固定宽度容器 -->
  <p>这是一个容器示例</p>
</div>

<div class="container-fluid"> <!-- 流式宽度容器，自动适应屏幕宽度 -->
  <p>这是一个流式容器示例</p>
</div>

栅格：基于 12 列的布局系统。每个栅格可以占据 12 等分的宽度。

<div class="container">
  <div class="row">
    <div class="col-4">内容 1</div> <!-- 占据 4/12 的宽度 -->
    <div class="col-4">内容 2</div> <!-- 占据 4/12 的宽度 -->
    <div class="col-4">内容 3</div> <!-- 占据 4/12 的宽度 -->
  </div>
</div>

2.2 响应式设计

Bootstrap 的栅格系统非常灵活，它支持响应式布局，可以根据不同设备的屏幕宽度自动调整列的排列方式。

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">内容 1</div> <!-- 在小屏幕上占满整行，在中等屏幕上占据一半宽度，在大屏幕上占据三分之一宽度 -->
    <div class="col-12 col-md-6 col-lg-4">内容 2</div>
    <div class="col-12 col-md-6 col-lg-4">内容 3</div>
  </div>
</div>

3. 常用组件

Bootstrap 提供了许多常用的 UI 组件，比如按钮、导航条、卡片、表单等，下面是几个常见组件的使用示例。

3.1 按钮

Bootstrap 提供了多种风格的按钮，可以使用 btn 类以及对应的按钮颜色类，如 btn-primary、btn-success 等。

<button class="btn btn-primary">主要按钮</button>
<button class="btn btn-success">成功按钮</button>
<button class="btn btn-danger">危险按钮</button>

3.2 导航条（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="切换导航">
    <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="#">首页 <span class="sr-only">(当前)</span></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>

3.3 卡片（Card）

卡片组件是 Bootstrap 中常见的布局容器，可以用于展示内容，如文本、图片等。

<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/150" class="card-img-top" alt="图片">
  <div class="card-body">
    <h5 class="card-title">卡片标题</h5>
    <p class="card-text">这是卡片的内容部分。</p>
    <a href="#" class="btn btn-primary">查看更多</a>
  </div>
</div>

3.4 表单

Bootstrap 的表单控件非常强大，支持多种输入类型、验证等。

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">邮箱地址</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="请输入邮箱">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">密码</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">记住我</label>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

4. JavaScript 插件

Bootstrap 还包含了很多 JavaScript 插件，提供了交互功能，如模态框（Modal）、轮播图（Carousel）、工具提示（Tooltip）等。

4.1 模态框（Modal）

模态框用于显示弹出窗口，通常用于提示或展示额外内容。

<!-- 按钮触发模态框 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  启动模态框
</button>

<!-- 模态框 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">模态框标题</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        这里是模态框的内容。
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存更改</button>
      </div>
    </div>
  </div>
</div>