开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> JS 流行框架（十）：Bootstrap -> 正文阅读

[JavaScript知识库]JS 流行框架（十）：Bootstrap

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 类，示例如下：

div {
    height: 200px;
    background-color: orange;
}

HTML

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

自适应容器

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

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 表示此列所占行的多少分，示例如下：

.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 类以消除沟槽，示例如下：

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>&times;</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>&times;</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>

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

$("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>

$("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	样式（输入、表单控件）