JS 流行库（十）：Bootstrap

原创

已于 2022-11-03 09:15:18 修改 · 917 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #javascript #前端

于 2022-10-06 17:57:23 首次发布

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>