1.3 Bootstrap 基本用法

文档摘要

1.3 Bootstrap 基本用法 Bootstrap 基本用法详解：快速构建响应式网页的基石引言 Bootstrap，作为全球最流行的前端开发框架之一，以其强大的功能、简洁的设计和易用性，极大地简化了网页和Web应用程序的开发流程。它提供了一整套预定义的 CSS 样式、JavaScript 组件以及灵活的网格系统，帮助开发者快速构建美观、响应式的网站。本文将聚焦于 Bootstrap 的基础用法，深入探讨其核心概念和实践应用，助您掌握 Bootstrap 的精髓，从而高效地进行 Web 开发。 1.

1.3 Bootstrap 基本用法

Bootstrap 基本用法详解：快速构建响应式网页的基石

引言

Bootstrap，作为全球最流行的前端开发框架之一，以其强大的功能、简洁的设计和易用性，极大地简化了网页和Web应用程序的开发流程。它提供了一整套预定义的 CSS 样式、JavaScript 组件以及灵活的网格系统，帮助开发者快速构建美观、响应式的网站。本文将聚焦于 Bootstrap 的基础用法，深入探讨其核心概念和实践应用，助您掌握 Bootstrap 的精髓，从而高效地进行 Web 开发。

1. Bootstrap 基础领域概述

在深入 Bootstrap 的基本用法之前，我们先来简要了解一下 Bootstrap 的基础领域，这有助于我们从宏观层面把握 Bootstrap 的整体架构和设计理念。

Bootstrap 的基础领域主要可以概括为以下几个核心部分：

响应式网格系统 (Responsive Grid System): 这是 Bootstrap 的基石，也是其最核心的特性之一。网格系统允许开发者将页面划分为最多 12 列的网格，并通过预定义的类名，轻松实现页面在不同屏幕尺寸下的灵活布局，从而实现真正的响应式设计。
CSS 组件 (CSS Components): Bootstrap 提供了大量的预构建 CSS 组件，涵盖了按钮、导航栏、表单、排版、图片、表格、警报框、进度条、媒体对象等等常见的网页元素。这些组件经过精心设计，具有统一的风格和良好的用户体验，开发者可以直接使用这些组件，无需从零开始编写 CSS 样式。
JavaScript 插件 (JavaScript Plugins): 为了增强网页的交互性和动态效果，Bootstrap 还提供了一系列基于 jQuery 的 JavaScript 插件，例如模态框 (Modal)、轮播图 (Carousel)、下拉菜单 (Dropdown)、标签页 (Tab)、工具提示 (Tooltip)、弹出框 (Popover) 等。这些插件为网页添加了丰富的交互功能，提升了用户体验。
实用工具类 (Utility Classes): Bootstrap 提供了大量的实用工具类，用于快速设置元素的间距 (margin/padding)、排版 (typography)、颜色 (colors)、显示 (display)、浮动 (float)、定位 (position) 等样式。这些工具类可以帮助开发者快速调整页面元素的样式，提高开发效率。
主题定制 (Theming): Bootstrap 允许开发者通过修改 Sass 变量或 CSS 自定义属性 (CSS Variables) 来定制 Bootstrap 的主题风格，包括颜色、字体、间距等。这使得开发者可以根据项目需求，轻松创建具有独特风格的 Bootstrap 网站。

1.3 Bootstrap 基本用法详解

1.3.1 引入 Bootstrap

要使用 Bootstrap，首先需要将其引入到您的 HTML 项目中。Bootstrap 提供了两种引入方式：

CDN 引入 (Content Delivery Network): 这是最简单快捷的方式，直接在 HTML 文件中引入 Bootstrap 提供的 CDN 链接即可。CDN 链接指向托管在公共服务器上的 Bootstrap 文件，可以加速资源加载，提高网站性能。


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 基本用法示例</title>
    <!-- 引入 Bootstrap CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <!-- 您的页面内容将放在这里 -->
    <!-- 引入 jQuery (Bootstrap 的 JavaScript 插件依赖于 jQuery) -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <!-- 引入 Popper.js (用于弹窗、提示框等组件) -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <!-- 引入 Bootstrap JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

本地引入 (Download and Host Locally): 您可以从 Bootstrap 官网 (https://getbootstrap.com/) 下载 Bootstrap 的文件包，然后将其解压到您的项目目录中。之后，在 HTML 文件中通过相对路径或绝对路径引入本地的 Bootstrap 文件。

下载的文件包通常包含以下目录：


bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.min.css
│   ├── bootstrap-reboot.css
│   └── bootstrap-reboot.min.css
├── js/
│   ├── bootstrap.bundle.js
│   ├── bootstrap.bundle.min.js
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── scss/
    └── ... (Sass 源文件)

在 HTML 文件中引入本地 Bootstrap 文件：


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 本地引入示例</title>
    <!-- 引入本地 Bootstrap CSS 文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
    <!-- 您的页面内容将放在这里 -->
    <!-- 引入 jQuery (Bootstrap 的 JavaScript 插件依赖于 jQuery) -->
    <script src="bootstrap/js/jquery-3.5.1.slim.min.js"></script> <!-- 假设 jQuery 文件也在 bootstrap/js 目录下 -->
    <!-- 引入 Popper.js (用于弹窗、提示框等组件) -->
    <script src="bootstrap/js/popper.min.js"></script> <!-- 假设 Popper.js 文件也在 bootstrap/js 目录下 -->
    <!-- 引入本地 Bootstrap JavaScript 文件 -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

选择哪种引入方式？

CDN 引入: 优点是简单快捷，无需下载文件，利用 CDN 加速，通常性能更好。缺点是依赖网络连接，如果网络不稳定可能会影响加载。
本地引入: 优点是不依赖网络，即使离线也能正常使用。缺点是需要下载文件并管理文件路径，部署时需要将 Bootstrap 文件一同部署。

对于大多数项目，CDN 引入通常是更方便快捷的选择。如果您对网络依赖性有较高要求，或者需要进行更深度的定制，可以选择本地引入。

1.3.2 响应式网格系统 (Grid System)

Bootstrap 的网格系统是其核心和灵魂，它基于 Flexbox 技术，将页面划分为最多 12 列的网格。通过组合不同的类名，开发者可以轻松创建各种复杂的响应式布局。

核心概念：

容器 (Containers): 容器是网格系统的最外层元素，用于包裹页面内容，并控制页面的宽度。Bootstrap 提供了两种类型的容器：
- .container: 固定宽度容器，在不同屏幕尺寸下具有不同的最大宽度，但始终居中显示。
- .container-fluid: 流式容器，宽度始终为 100%，铺满整个屏幕宽度。
行 (Rows): 行是容器内部的水平分组，用于放置列。使用 .row 类创建行。
列 (Columns): 列是行内部的垂直分组，用于放置实际的内容。使用 .col-* 类族创建列。

列类名规则：

Bootstrap 的列类名采用以下格式：


.col-{断点}-{列数}

.col: 在所有屏幕尺寸下都平分剩余空间（弹性布局）。
.col-{断点}: 在指定断点及以上屏幕尺寸下平分剩余空间。
.col-{列数}: 在所有屏幕尺寸下占据指定的列数（总共 12 列）。
.col-{断点}-{列数}: 在指定断点及以上屏幕尺寸下占据指定的列数。

断点 (Breakpoints):

Bootstrap 定义了以下断点，用于适配不同屏幕尺寸：

断点名称	类前缀	最小宽度	描述
超小屏幕	无	0px	默认，适用于所有屏幕尺寸
小屏幕	`sm`	576px	手机横屏、平板竖屏
中等屏幕	`md`	768px	平板横屏、小尺寸笔记本电脑
大屏幕	`lg`	992px	笔记本电脑、显示器
超大屏幕	`xl`	1200px	大尺寸显示器
超超大屏幕	`xxl`	1400px	超大尺寸显示器、电视屏幕

示例代码：


<div class="container">
    <div class="row">
        <div class="col-md-4">
            <!-- 占据中等屏幕及以上 4 列 -->
            <p>第一列内容，占据中等屏幕及以上 4 列。</p>
        </div>
        <div class="col-md-8">
            <!-- 占据中等屏幕及以上 8 列 -->
            <p>第二列内容，占据中等屏幕及以上 8 列。</p>
        </div>
    </div>
</div>

代码详解：

<div class="container">: 创建一个固定宽度容器。
<div class="row">: 创建一行。
<div class="col-md-4">: 创建一个列，类名 col-md-4 表示：
- col-: 列类名的前缀。
- md-: 断点前缀，表示应用于中等屏幕 (md) 及以上尺寸。
- 4: 列数，表示占据 4 列的宽度。
<div class="col-md-8">: 创建另一个列，类名 col-md-8 表示占据 8 列的宽度。

Mermaid 图表：

graph TD A[container] --> B(row) B --> C1[col-md-4] B --> C2[col-md-8] C1 --> D1[内容1] C2 --> D2[内容2] style A fill:#f9f,stroke:#333,stroke-width:2px style B fill:#ccf,stroke:#333,stroke-width:2px style C1 fill:#ddf,stroke:#333,stroke-width:2px style C2 fill:#ddf,stroke:#333,stroke-width:2px

图表解释：

container 代表容器元素，是整个网格系统的外层。
row 代表行元素，位于容器内部，用于水平排列列。
col-md-4 和 col-md-8 代表列元素，位于行内部，分别占据中等屏幕及以上 4 列和 8 列的宽度。
内容1 和 内容2 代表列中实际的内容。

响应式行为：

在大屏幕 (md 及以上): 第一列占据 4/12 的宽度，第二列占据 8/12 的宽度，并排显示。
在小屏幕 (sm 及以下): 由于没有指定小屏幕下的列类名，默认情况下，Bootstrap 网格系统会将列堆叠显示，即第一列和第二列会垂直排列，各自占据 100% 的宽度。

为了实现更精细的响应式布局，您可以为不同断点指定不同的列类名，例如：


<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-4">
            <!-- 小屏幕及以上占据 6 列，中等屏幕及以上占据 4 列 -->
            <p>第一列内容。</p>
        </div>
        <div class="col-sm-6 col-md-8">
            <!-- 小屏幕及以上占据 6 列，中等屏幕及以上占据 8 列 -->
            <p>第二列内容。</p>
        </div>
    </div>
</div>

在这个例子中：

在小屏幕 (sm) 及以上: 两个列都使用了 col-sm-6，表示在小屏幕及以上尺寸下，都占据 6 列的宽度，平分一行。
在中等屏幕 (md) 及以上: 列的宽度会根据 col-md-4 和 col-md-8 重新调整，第一列占据 4 列，第二列占据 8 列。
在超小屏幕 (xs): 由于没有指定超小屏幕的列类名，列会默认堆叠显示，各自占据 100% 宽度。

1.3.3 常用 CSS 组件

Bootstrap 提供了丰富的 CSS 组件，可以快速构建常见的网页元素。以下列举一些常用的组件及其用法：

按钮 (Buttons):

Bootstrap 提供了多种按钮样式，通过不同的类名来定义按钮的颜色和风格。


<button type="button" class="btn btn-primary">主要按钮</button>
<button type="button" class="btn btn-secondary">次要按钮</button>
<button type="button" class="btn btn-success">成功按钮</button>
<button type="button" class="btn btn-danger">危险按钮</button>
<button type="button" class="btn btn-warning">警告按钮</button>
<button type="button" class="btn btn-info">信息按钮</button>
<button type="button" class="btn btn-light">浅色按钮</button>
<button type="button" class="btn btn-dark">深色按钮</button>
<button type="button" class="btn btn-link">链接按钮</button>

常用按钮类名：

btn: 基础按钮样式。
btn-primary: 主要按钮，通常用于关键操作。
btn-secondary: 次要按钮，用于辅助操作。
btn-success: 成功按钮，用于表示成功状态。
btn-danger: 危险按钮，用于表示危险操作或错误状态。
btn-warning: 警告按钮，用于表示警告信息。
btn-info: 信息按钮，用于表示提示信息。
btn-light: 浅色按钮。
btn-dark: 深色按钮。
btn-link: 链接样式按钮。

还可以通过添加 .btn-outline-* 类名来创建描边按钮，例如 btn-outline-primary。

导航栏 (Navbar):

导航栏是网页头部常见的导航组件，Bootstrap 提供了易于定制的导航栏组件。


<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="#">首页 <span class="sr-only">(current)</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>
            <li class="nav-item">
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">禁用</a>
            </li>
        </ul>
    </div>
</nav>

常用导航栏类名：

navbar: 基础导航栏样式。
navbar-expand-*: 指定导航栏在哪个断点开始展开，例如 navbar-expand-lg 表示在大屏幕及以上展开。
navbar-light: 浅色导航栏，适用于浅色背景。
navbar-dark: 深色导航栏，适用于深色背景。
bg-light: 浅色背景色。
bg-dark: 深色背景色。
navbar-brand: 网站品牌名称或 Logo。
navbar-toggler: 在小屏幕下用于触发折叠导航栏的按钮。
navbar-collapse: 折叠导航栏的内容容器。
navbar-nav: 导航链接列表。
nav-item: 导航链接项。
nav-link: 导航链接。
active: 表示当前激活的导航链接。
disabled: 禁用导航链接。
表单 (Forms):

Bootstrap 提供了丰富的表单样式和布局选项，可以快速创建各种类型的表单。


<form>
    <div class="form-group">
        <label for="exampleInputEmail1">邮箱地址</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
        <small id="emailHelp" class="form-text text-muted">我们绝不会将您的邮箱地址分享给任何人。</small>
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">密码</label>
        <input type="password" class="form-control" id="exampleInputPassword1">
    </div>
    <div class="form-group 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>

常用表单类名：

form-group: 表单组，用于包裹表单元素和标签，添加间距。
form-control: 表单控件的基本样式，应用于 <input>, <select>, <textarea> 等元素。
form-control-plaintext: 纯文本表单控件，移除边框和背景。
form-control-sm, form-control-lg: 小尺寸和大型表单控件。
form-text: 表单辅助文本样式。
text-muted: 灰色文本颜色，常用于辅助文本。
form-check: 复选框和单选框的容器。
form-check-input: 复选框和单选框的输入元素。
form-check-label: 复选框和单选框的标签。

除了上述组件，Bootstrap 还提供了排版、图片、表格、警报框、进度条、列表组、卡片等众多 CSS 组件，可以查阅 Bootstrap 官方文档 (https://getbootstrap.com/docs/5.0/components/) 了解更多详细信息。

1.3.4 常用 JavaScript 插件

Bootstrap 的 JavaScript 插件为网页添加了丰富的交互功能。以下列举一些常用的插件及其用法：

模态框 (Modal):

模态框是弹出的对话框，用于显示重要信息或进行用户交互。


<!-- 按钮触发模态框 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    打开模态框
</button>
<!-- 模态框 HTML 结构 -->
<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>

常用模态框类名和属性：

modal: 模态框基础样式。
fade: 添加淡入淡出动画效果。
modal-dialog: 模态框对话框容器。
modal-content: 模态框内容容器。
modal-header: 模态框头部。
modal-title: 模态框标题。
modal-body: 模态框主体内容。
modal-footer: 模态框底部，通常放置按钮。
data-toggle="modal": 触发模态框的按钮属性，值为 "modal"。
data-target="#exampleModal": 指定要打开的模态框的 ID。
data-dismiss="modal": 用于关闭模态框的按钮属性。
轮播图 (Carousel):

轮播图用于循环播放图片或内容。


<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://www.aiknowledge.cn/images/Bootstrap/slide1.jpg" class="d-block w-100" alt="Slide 1">
        </div>
        <div class="carousel-item">
            <img src="https://www.aiknowledge.cn/images/Bootstrap/slide2.jpg" class="d-block w-100" alt="Slide 2">
        </div>
        <div class="carousel-item">
            <img src="https://www.aiknowledge.cn/images/Bootstrap/slide3.jpg" class="d-block w-100" alt="Slide 3">
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

常用轮播图类名和属性：

carousel: 轮播图基础样式。
slide: 启用轮播动画效果。
carousel-inner: 轮播图内容容器。
carousel-item: 轮播图的每一项。
active: 表示当前显示的轮播项。
d-block w-100: 使图片占据容器宽度并以块级元素显示。
carousel-control-prev, carousel-control-next: 轮播图的上一页和下一页控制按钮。
carousel-control-prev-icon, carousel-control-next-icon: 控制按钮的图标。
data-ride="carousel": 自动初始化轮播图。
data-slide="prev", data-slide="next": 控制轮播图切换到上一页或下一页。
下拉菜单 (Dropdown):

下拉菜单用于显示一组可选项。


<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        下拉菜单
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">选项 1</a>
        <a class="dropdown-item" href="#">选项 2</a>
        <a class="dropdown-item" href="#">选项 3</a>
    </div>
</div>

常用下拉菜单类名和属性：

dropdown: 下拉菜单容器。
dropdown-toggle: 触发下拉菜单的按钮。
dropdown-menu: 下拉菜单列表容器。
dropdown-item: 下拉菜单选项。
data-toggle="dropdown": 触发下拉菜单的按钮属性，值为 "dropdown"。
aria-haspopup="true": ARIA 属性，表示该元素弹出一个弹出菜单。
aria-expanded="false": ARIA 属性，表示菜单当前是否展开，初始为 false。
aria-labelledby="dropdownMenuButton": ARIA 属性，关联下拉菜单列表与触发按钮。

除了上述插件，Bootstrap 还提供了标签页、工具提示、弹出框、滚动监听等 JavaScript 插件，可以查阅 Bootstrap 官方文档 (https://getbootstrap.com/docs/5.0/components/) 了解更多详细信息。

1.3.5 实用工具类 (Utility Classes)

Bootstrap 提供了大量的实用工具类，用于快速设置元素的样式，提高开发效率。以下列举一些常用的工具类：

间距 (Spacing):

用于快速设置元素的 margin 和 padding。类名格式：{property}{sides}-{size}

{property}: m (margin) 或 p (padding)。
{sides}: t (top), b (bottom), l (left), r (right), x (左右), y (上下), 或留空 (全部)。
{size}: 0 (0), 1 (0.25rem), 2 (0.5rem), 3 (1rem), 4 (1.5rem), 5 (3rem), auto (auto)。

示例：

mt-3: margin-top: 1rem;
px-4: padding-left: 1.5rem; padding-right: 1.5rem;
my-auto: margin-top: auto; margin-bottom: auto;