JS 流行库（十）：Bootstrap

Bootstrap 是由 Twitter 公司开发，专门用于开发响应式布局、移动设备优先的 Web 框架，目前最新版本为 Bootstrap4，兼容最新的 PC 和移动端浏览器，Bootstrap3 和 Bootstrap4 的区别在于：

版本

预处理器

栅格种类

单位

布局方式

Bootstrap3

Less

4

px

浮动

Bootstrap4

Sass

5

rem

伸缩

模板

不论使用任何框架，开始时必须导入相应的库文件，Bootstrap 亦是如此，由于 Bootstrap 为了提高性能以及兼容性，相较于另外的框架将导入其它文件，所以开始时以模板的形式说明

Bootstrap3

由于 Bootstrap3 并未放弃低版本浏览器的兼容性，所以将导入其它文件从而实现在低版本浏览器中使用诸如媒体查询（响应式）、H5 标签等高级浏览器功能，模板如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <!-- 渲染模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 移动端 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>标题</title>

    <!-- 导入 bootstrap.css(3.4.1) 库 -->
    <link rel="stylesheet" href="./css/bootstrap3.css">
    <!-- 导入 html5shiv 和 respond 目的在于让低版本浏览器支持 H5 元素和媒体查询功能-->
    <!--[if lt IE 9]>
            <script src="./js/html5shiv.js"></script>
            <script src="./js/respond.js"></script>
    <!  [endif]-->
    <!-- 上述注释含义是如果 IE 浏览器的版本小于 9，那么执行注释中包含的语句，条件注释在 IE 浏览器中有效 -->
    <!-- 导入 jQuery(1.12.4) 库 -->
    <script src="./js/jquery-1.12.4.js"></script>
    <!-- 导入 bootstrap.js(3.4.1) 库 -->
    <script src="./js/bootstrap3.js"></script>
</head>

<body>

</body>

</html>

Bootstrap4

由于 Bootstrap4 放弃了低版本浏览器的兼容，所以相较于 Bootstrap3 更加简单，模板如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <!-- 渲染模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 移动端 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>标题</title>

    <!-- 导入 Bootstrap.css(4.6.1) 库 -->
    <link rel="stylesheet" href="./css/bootstrap4.css">
    <!-- 导入 jQuery(3.1.1) 库 -->
    <script src="./js/jquery-3.1.1.js"></script>
    <!-- 导入 popper.js 库 -->
    <script src="./js/popper.js"></script>
    <!-- 导入 Bootstrap.js -->
    <script src="./js/bootstrap4.js"></script>
</head>

<body>

</body>

</html>

如果使用 VSCode 编辑器，那么可以将上述模板作为 HTML 的代码片段（Snippet）

容器

Bootstrap 中容器是实现响应式布局的基础，官方推荐将所有的内容都定义在容器中，此外，容器是启用栅格系统的必要条件

固定容器

Bootstrap 中的固定容器是指在不同宽度的视口下容器有不同的固定宽度，视口划分如下：

类型

视口范围

容器宽度

超小屏幕（xs）

小于 576px

width(px)

小屏幕（sm）

大于等于 576px

540px

中等屏幕（md）

大于等于 768px

720px

大屏幕（lg）

大于等于 992px

960px

超大屏幕（xl）

大于等于 1200px

1140px

如果让某个元素成为固定容器，必须为此元素添加 Bootstrap 种预定义的 container 类，示例如下：

  • CSS
div {
    height: 200px;
    background-color: orange;
}
  • HTML
<div class="container"></div>

自适应容器

Bootstrap 中的自适应容器是指不论在何种情况下容器的宽度始终是视口的宽度，如果让某个元素成为自适应容器，必须为此元素添加 Bootstrap 种预定义的 container-fluid 类，示例如下：

  • CSS
div {
    height: 200px;
    background-color: orange;
}
  • HTML
<div class="container-fluid"></div>

栅格系统

基本使用

Bootstrap 依赖栅格系统实现响应式布局，Bootstrap4 中底层使用伸缩布局、Bootstrap3 中底层使用浮动布局，不论使用哪一种布局，默认情况下，Boostrap 将容器中的一行分为 12 等份，之后通过绑定类名的方式描述每一列占用所在行的多少份，基本格式如下：

<div class="container">
    <div class="row">
        <span class="col-num"></span>
        <span class="col-num"></span>
        <span class="col-num"></span>
    </div>
</div>

基本格式中的 num 表示此列所占行的多少分，示例如下：

  • CSS
.container {
    height: 200px;
    background-color: red;
}

.row {
    height: 200px;
    background-color: yellowgreen;
}

span {
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 30px;
}

span:nth-of-type(1) {
    background-color: skyblue;
}

span:nth-of-type(2) {
    background-color: deeppink;
}

span:nth-of-type(3) {
    background-color: orangered;
}
  • HTML
<div class="container">
    <div class="row">
        <span class="col-6">1</span>
        <span class="col-4">2</span>
        <span class="col-2">3</span>
    </div>
</div>

如果所有行的所占份数超过 12 份，那么将自动换行，若未设置每一列的高度，那么每一行将等分容器高度，示例如下：

<div class="container">
    <div class="row">
        <span class="col-6">1</span>
        <span class="col-4">2</span>
        <span class="col-6">3</span>
    </div>
</div>

默认情况下，行的宽度和所在容器相同

<div class="container">
    <div class="row">
    </div>
</div>

此外，如果未指定 num，那么在默认情况下所有列将等分其所在行宽度，示例如下：

<div class="container">
    <div class="row">
        <span class="col">1</span>
        <span class="col">2</span>
        <span class="col">3</span>
    </div>
</div>

尺寸

Bootstrap 的栅格系统以绑定类名的形式也可以实现在不同宽度视口下以不同的比例分配一行中的所有列，由于 Bootstrap 将视口划分为 5 种，所以绑定的类名也有 5 种，如下所示：

视口类型

类名

超小屏幕

col-num

小屏幕

col-sm-num

中等屏幕

col-md-num

大屏幕

col-lg-num

超大屏幕

col-xl-num

示例如下：

<div class="container">
    <div class="row">
        <span class="col-6">1</span>
        <span class="col-4">2</span>
        <span class="col-2">3</span>
    </div>
</div>

如果以超小屏幕绑定，那么不论视口宽度如何，均采用超小屏幕的比例，如果以超大屏幕绑定，那么在比超大屏幕小的视口中每一列的宽度将和所在行的宽度相同，示例如下：

<div class="container">
    <div class="row">
        <span class="col-xl-6">1</span>
        <span class="col-xl-4">2</span>
        <span class="col-xl-2">3</span>
    </div>
</div>

如果以 col-md-num 形式绑定类名，那么在中等屏幕、大屏幕以及超大屏幕时将以规定比例显示，即列宽比可以向上兼容，此外，如果同时以所有视口类型绑定类名，那么在每一个视口大小下将以相应的列宽比显示，示例如下：

<div class="container">
    <div class="row">
        <span class="col-md-6 col-lg-2">1</span>
        <span class="col-md-4 col-lg-4">2</span>
        <span class="col-md-2 col-lg-6">3</span>
    </div>
</div>

沟槽

默认情况下，栅格系统中的容器、行、列有左右内边距，此内边距被称为沟槽，可以通过为元素绑定 no-gutters 类以消除沟槽，示例如下：

  • CSS
span {
    color: white;
    font-weight: bold;
    font-size: 30px;
}
  • HTML
<div class="container">
    <div class="row no-gutters">
        <span class="col-md-6">1</span>
        <span class="col-md-4">2</span>
        <span class="col-md-2">3</span>
    </div>
</div>

Bootstrap 中虽然可以通过 no-gutters 取消沟槽，不过此行为将影响到行列的显示效果，此时可以为容器绑定 px-0 类以消除影响，示例如下：

<div class="container px-0">
    <div class="row no-gutters">
        <span class="col-md-6">1</span>
        <span class="col-md-4">2</span>
        <span class="col-md-2">3</span>
    </div>
</div>

对齐方式

由于 Bootstrap4 栅格系统底层以伸缩布局实现，所以可以以类似于伸缩布局的方式来调整行列的对齐方式，示例如下：

<div class="container">
    <div class="row justify-content-center align-items-center">
        <span class="col-md-4">1</span>
        <span class="col-md-2">2</span>
        <span class="col-md-2">3</span>
    </div>
</div>

偏移

Bootstrap 为了使布局更加灵活，提供以列为单位的偏移功能，示例如下：

  • 居中对齐
<div class="container">
    <div class="row">
        <span class="col-md-4 offset-2">1</span>
        <span class="col-md-2">2</span>
        <span class="col-md-2">3</span>
    </div>
</div>

由于所有行被平均分为 12 份、所有列总共占 8 份，此时将第一列向右移动 2 份，此时所有列即居中对齐

排序

Bootstrap 为了使布局更加灵活，提供以列为单位的排序功能，示例如下：

<div class="container">
    <div class="row justify-content-center">
        <span class="col-md-4">1</span>
        <span class="col-md-2 order-1">2</span>
        <span class="col-md-2 order-0">3</span>
    </div>
</div>

在 Bootstrap 的排序功能中，被绑定 order-num 类的列参与排序，未绑定 order-num 类的列不参与排序，以从小到大依次排序，所以上述示例显示顺序为 1 - 3 - 2，另一个示例如下：

<div class="container">
    <div class="row justify-content-center">
        <span class="col-md-2">1</span>
        <span class="col-md-2 order-2">2</span>
        <span class="col-md-2">3</span>
        <span class="col-md-2 order-1">4</span>
        <span class="col-md-2">5</span>
        <span class="col-md-2 order-0">6</span>
    </div>
</div>

上述示例的显示顺序为 1 - 3 - 5 - 6 - 4 - 2

公共样式

Bootstrap 可以通过为元素绑定类名的方式快速编辑诸如颜色、边框、显示模式、浮动、定位、外边距、内边距、项目符号以及图片等样式，示例如下：

<span class="d-block m-auto bg-light rounded clearfix border border-info">
    <img src="./images/SpiderMan.jpg" class="img-fluid mb-5">
    <ul class="float-left list-unstyled p-2 bg-primary border border-dark">
        <li class="text-danger">Reyn</li>
        <li class="text-warning">Steven</li>
        <li class="text-success">Lily</li>
    </ul>
    <ul class="float-right list-unstyled p-2 bg-secondary border border-dark">
        <li class="text-danger">Jack</li>
        <li class="text-warning">Alen</li>
        <li class="text-success">Miles</li>
    </ul>
</span>

在上述示例中，演示了 Bootstrap 中常用的预定义工具类，从而实现快速布局和编辑样式，此处不再详细说明，详情可以访问官方网站

常用组件

Bootstrap 中可以通过预定义类和 jQuery 快速实现某些功能（组件）

警告框

示例如下：

<div class="alert alert-primary" role="alert">
    Reyn Never Give Up！
</div>

上述示例中，role 属性专门用于增强语义，由于 div 本身没有任何语义，通过 role="alert" 表示此 div 是一个警告框，如下是 Bootstrap 中类的说明：

类名

含义

alert

样式（警告框）

alert-primary

primary 主题（警告框）

此外，Bootstrap 提供了关闭警告框的功能，通常用于横幅广告的实现，示例如下：

<div class="alert alert-warning alert-dismissible fade show" role="alert">
    Reyn Never Give Up!
    <button type="button" class="close" data-dismiss="alert">
        <span>×</span>
    </button>
</div>

在 Bootstrap 官方网站示例中经常存在以 aria 开头的属性，此属性专门为了残障人士无障碍访问网页，类的说明如下：

类名

含义

alert-dismissible

可关闭（警告框）

fade

动画效果（被关闭时）

show

显示内容

close

样式（关闭按钮）

属性说明如下：

属性

含义

data-dismiss

绑定 Bootstrap alert 事件

按钮

示例如下：

<button type="button" class="btn btn-warning">Start</button>

类的说明如下：

类名

含义

btn

样式（按钮）

btn-warning

warning 主题（按钮）

此外，Bootstrap 提供了按钮组的功能，通常用于分页的实现，示例如下：

<div class="btn-group" role="group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
</div>

类的说明如下：

类名

含义

btn-group

样式（按钮组）

btn-secondary

secondary 主题（按钮）

卡片

示例如下：

<div class="card" style="width: 18rem;">
    <img src="./images/SpiderMan.jpg" class="card-img-top">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
            content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>

卡片组件通常用于组织一系列内容，类的说明如下：

类名

含义

card

样式（卡片）

card-img-top

样式（顶部图片、卡片）

card-body

样式（卡片主体）

card-title

样式（卡片标题）

card-text

样式（卡片内容）

轮播图

示例如下：

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <!-- 指示器 -->
    <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
    </ol>
    <!-- 内容 -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="./images/img1.jpg" class="d-block w-100">
        </div>
        <div class="carousel-item">
            <img src="./images/img2.jpg" class="d-block w-100">
        </div>
        <div class="carousel-item">
            <img src="./images/img3.jpg" class="d-block w-100">
        </div>
        <div class="carousel-item">
            <img src="./images/img4.jpg" class="d-block w-100">
        </div>
    </div>
    <!-- 后退 -->
    <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </button>
    <!-- 前进 -->
    <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </button>
</div>

类的说明如下：

类名

含义

carousel

样式（轮播图）

slide

样式（轮播图）

carousel-indicators

样式（指示器、轮播图）

active

样式（激活）

carousel-inner

样式（容器、轮播图）

carousel-item

样式（内容、轮播图）

carousel-control-prev

样式（后退按钮）

carousel-control-prev-icon

图标（后退按钮）

carousel-control-next

样式（前进按钮）

carousel-control-next-icon

图标（前进按钮）

属性说明如下：

属性

含义

data-ride

自动轮播

data-target

目标绑定（id）

data-slide-to

指示器索引

data-slide

按钮方向

Bootstrap 轮播图可以通过 jQuery 自定义选项，示例如下：

$('.carousel').carousel({
    interval: 2000
})

上述示例将轮播图自动轮播的时间间隔修改为 2s（默认为 5s）

折叠面板

示例如下：

<p>
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample">
        SHOW
    </button>
</p>
<div class="collapse" id="collapseExample">Hello World!</div>

类的说明如下：

类名

含义

collapse

样式（折叠面板）

属性说明如下：

属性

含义

data-toggle

功能对象

绑定 collapse 类的元素默认不显示

下拉菜单

示例如下：

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">
        SHOW
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Reyn</a>
        <a class="dropdown-item" href="#">Lily</a>
        <a class="dropdown-item" href="#">Jack</a>
    </div>
</div>

类型如下：

类名

含义

dropdown

样式（下拉菜单）

dropdown-toggle

样式（下拉箭头）

dropdown-menu

样式（菜单内容）

dropdown-item

样式（菜单项目）

绑定 dropdown-menu 类的元素默认不显示

模态弹窗

示例如下：

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    SHOW
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>×</span>
                </button>
            </div>
            <div class="modal-body">
                Reyn Never Give Up!
            </div>
            <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>

类名

含义

modal

样式（模态弹窗）

modal-dialog

样式（弹窗正文）

modal-content

样式（弹窗内容）

modal-header

样式（弹窗顶部）

modal-title

样式（弹窗标题）

modal-body

样式（弹窗内容）

modal-footer

样式（弹窗底部）

提示气泡

示例如下：

  • HTML
<button type="button" class="btn btn-secondary m-5" data-toggle="tooltip" data-placement="right"
    title="Tooltip on right">
    Tooltip on right
</button>

气泡必须在有足够空间被容纳才会显示

  • JS
$("button").tooltip();

初始化 data-toggle 属性值为 tooltip 的按钮

属性说明如下：

属性

含义

data-placement

显示位置（提示气泡）

title

内容（提示气泡）

Bootstrap 中 tooltip 为光标悬浮显示，此外，Bootstrap 还提供了光标单击显示的 popover，示例如下：

  • HTML
<button type="button" class="btn btn-secondary m-5" data-container="body" data-toggle="popover"
    data-placement="bottom" data-content="Bottom popover">
    Popover on bottom
</button>
  • JS
$("button").popover();

初始化 data-toggle 属性值为 popover 的按钮

属性说明如下：

属性

含义

data-container

容器（弹出框）

data-content

内容（弹出框）

导航栏

示例如下：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <!-- 标题 or Logo -->
    <a class="navbar-brand" href="#">Navbar</a>

    <!-- 导航按钮（缩略） -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
        <span class="navbar-toggler-icon"></span>
    </button>

    <!-- 导航内容 -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <!-- 导航列表 -->
        <ul class="navbar-nav mr-auto">
            <!-- 导航条目 -->
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <!-- 导航条目 -->
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <!-- 导航条目 -->
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                    data-toggle="dropdown">
                    Dropdown
                </a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
            <!-- 导航条目 -->
            <li class="nav-item">
                <a class="nav-link disabled">Disabled</a>
            </li>
        </ul>

        <!-- 表单 -->
        <form class="form-inline my-2 my-lg-0">
            <!-- 搜索框 -->
            <input class="form-control mr-sm-2" type="search" placeholder="Search">
            <!-- 搜索按钮 -->
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>

上述示例中，navbar-expand-lg 类的含义是当视口范围小于大屏幕时，导航条以缩略形式展现，此时导航栏内容消失、导航按钮出现，导航栏内容将隐藏于导航按钮所关联的下拉菜单中

类的说明如下：

类名

含义

navbar

样式（导航条）

navbar-expand-lg

样式（缩略范围、导航条）

navbar-light

样式（导航条）

navbar-brand

样式（品牌、Logo、标题）

navbar-toggler

样式（导航按钮）

navbar-toggler-icon

字体图标（导航按钮）

collapse

样式（非缩略、导航）

navbar-collapse

样式（缩略、导航）

navbar-nav

样式（导航内容）

nav-item

样式（导航项目）

nav-link

样式（导航连接）

dropdown-divider

样式（分隔线）

form-inline

样式（行内、表单控件）

form-control

样式（输入、表单控件）

此篇文章是关于 Bootstrap 的简单介绍，有一个大致了解即可，使用 Bootstrap 时应当以官方文档为标准和参考