第五章 Bootstrap 栅格系统

Bootstrap 响应式布局

下载 Bootstrap

Bootstrap 提供了 3 种下载方式供开发者进行选择，具体如下。

第 1 种方式是下载预编译的文件。
第 2 种方式是下载源文件进行手动编译，Bootstrap 4 的源文件采用了 Sass 进行编写。
第 3 种方式是使用 CDN 来引入。

Bootstrap 官网：Bootstrap · The most popular HTML, CSS, and JS library in the world. (getbootstrap.com)

Bootstrap 中文网：Bootstrap中文网 (bootcss.com)

Bootstrap 自带的大部分组件都需要依赖 JavaScript 才能起作用。将 <script> 标签粘贴到页面底部，并且是在 </body> 标签之前，就能起作用了。

注意：要确保 bootstrap.min.css 和 bootstrap.bundle.min.js 确实在这个路径。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/bootstrap/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
</head>
<body>
    <script src="/bootstrap/bootstrap-5.3.0-alpha1-dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

使用 jsDelivr 的话可以跳过下载文件的操作，直接在你的项目中使用 Bootstrap 编译过的 CSS 和 JS 文件。

1
2
3


<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/mhDoLbDldZc3qpsJHpLogda//BVZbgYuw6kof4u2FrCedxOtgRZDTHgHUhOCVim" crossorigin="anonymous"></script>

Bootstrap 栅格系统

栅格系统（Grid Systems），即网格系统，它是一种清晰、工整的设计风格，用固定的格子进行网页布局。栅格系统最早应用于印刷媒体上，一个印刷版面上划分了若干个格子，非常方便排版。

后来，栅格系统被应用于网页布局中，使用响应式栅格系统进行页面布局时，可以让一个网页在不同大小的屏幕上，呈现出不同的结构。例如，在小屏幕设备上有某些模块将按照不同的方式排列或者被隐藏。

实现简单的栅格系统

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            text-align: center;
            font-size: 50px;
        }
        .row{
            width: 100%;
        }
        .col1{
            width: 25%;
            float: left;
            background-color: lightgray;
        }
        .col2{
            width: 50%;
            float: left;
            background-color: gray;
        }
        @media (max-width: 768px){	/* 媒体查询 */
            .col1{
                float: none;
                width: 100%;
            }
            .col2{
                float: none;
                width: 100%;
            }
        }
    </style>
</head>

<body>
    <div class="row">
        <header>页头</header>
    </div>
    <div class="row">
        <nav class="col1">导航栏</nav>
        <div class="col2">主要内容</div>
        <aside class="col1">侧边栏</aside>
    </div>
    <div class="row">
        <footer>页尾</footer>
    </div>
</body>

</html>

Bootstrap 布局容器

container 类

容器是 Bootstrap 一个基本的构建块，它包含、填充和对齐给定设备或视口中的内容。

Bootstrap 需要一个容器元素来包裹网站的内容。

我们可以使用以下三个容器类：

.container 类用于固定宽度并支持响应式布局的容器。（会根据屏幕宽度改变）
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
.container-{breakpoint} 容器在每个响应断点处设置布局容器的宽度为 100%，直到达到指定断点为止。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/bootstrap/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
    <style>
        div{
            /* text-align: center; */
            background-color: blanchedalmond;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="container">container</div>
    <div class="container-fluid">container-fluid</div>
    <div class="container-md">container-md</div>
</body>
</html>

	超小屏幕<576px	小屏幕≥576px	中等屏幕≥768px	大屏幕≥992px	特大屏幕≥1200px	超大屏幕≥1400px
max-width	100%	540px	720px	960px	1140px	1320px

可以使用 .container-sm/md/lg/xl 类来创建响应式容器，容器的 max-width 属性值会根据屏幕的大小来改变。

类名/屏幕类型	超小屏幕<576px	小屏幕≥576px	中等屏幕≥768px	大屏幕≥992px	特大屏幕≥1200px	超大屏幕≥1400px
.container	100%	540px	720px	960px	1140px	1320px
.container-sm	100%	540px	720px	960px	1140px	1320px
.container-md	100%	100%	720px	960px	1140px	1320px
.container-lg	100%	100%	100%	960px	1140px	1320px
.container-xl	100%	100%	100%	100%	1140px	1320px
.container-xxl	100%	100%	100%	100%	100%	1320px
.container-fluid	100%	100%	100%	100%	100%	100%

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/bootstrap/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
    <style>
        div{
            /* text-align: center; */
            background-color: blanchedalmond;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="container">container</div>
    <div class="container-fluid">container-fluid</div>
    <div class="container-sm">container-sm</div>
    <div class="container-md">container-md</div>
    <div class="container-lg">container-lg</div>
    <div class="container-xl">container-xl</div>
    <div class="container-xxl">container-xxl</div>
</body>
</html>

栅格系统的行和列

Bootstrap 栅格系统将页面布局划分为行和列。随着屏幕或视口尺寸的增加，系统会自动分为 1-12 列。

栅格系统用于通过一系列的 行（row）与列（column） 的组合来创建页面布局。
开发者可以将内容放入这些创建好的布局中，然后通过列数的定义来模块化页面布局。
栅格系统页面的内容可以放入这些创建好的布局容器中，并且会根据父元素盒子（布局容器）尺寸的大小进行适当地调节，从而达到响应式页面布局的效果。

1
2
3
4
5
6
7


# Bootstrap 栅格系统为不同屏幕宽度定义了不同的类，直接为元素添加类名即可。

# 行必须包含在布局容器中，以便为其赋予合适的排列和内补。

# 通过行可以在水平方向创建一组列并且只有列可以作为行的直接子元素。

# 行使用样式 .row，列使用样式 .col-*-*，内容应当放置于列内，列大于 12 时，将会另起一行排列。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/bootstrap/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
    <style>
        .container{
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-1">1</div>
            <div class="col-md-1">2</div>
            <div class="col-md-1">3</div>
            <div class="col-md-1">4</div>
            <div class="col-md-1">5</div>
            <div class="col-md-1">6</div>
            <div class="col-md-1">7</div>
            <div class="col-md-1">8</div>
            <div class="col-md-1">9</div>
            <div class="col-md-1">10</div>
            <div class="col-md-1">11</div>
            <div class="col-md-1">12</div>
        </div>
    </div>
</body>
</html>

学生信息表格案例

首先需要在布局容器中创建一个类名为 row 的 div 元素作为行。
然后在行的容器内部创建列，布局容器中的行和列就构成了栅格系统。
栅格系统中的行和列类似于表格中的行和列。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/bootstrap/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
    <style>
        .row{
            font-size: 30px;
            background-color: #eee;
        }
        .col-md-4{
            border: 2px solid white;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">姓名</div>
            <div class="col-md-4">年龄</div>
            <div class="col-md-4">性别</div>
        </div>
        <div class="row">
            <div class="col-md-4">张三</div>
            <div class="col-md-4">26</div>
            <div class="col-md-4">男</div>
        </div>
    </div>
</body>
</html>

栅格系统的类前缀

基本类前缀

栅格系统提供了基本的前缀，用于在不同宽度的屏幕中实现不同的排列方式，列的类名可以写多个，也就是可以同时设置 .col-、.col-sm-、 .col-md-、.col-lg- 和 .col-xl- 类名。当同时使用这些类的时候，它会根据当前屏幕的大小来使相应的类生效，实现在不同屏幕下展示不同的页面结构。

	超小屏幕<576px	小屏幕≥576px	中等屏幕≥768px	大屏幕≥992px	特大屏幕≥1200px	超大屏幕≥1400px
max-width	100%	540px	720px	960px	1140px	1320px
类前缀	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-	.col-xxl

使用类前缀设置列的宽度

由于栅格系统就是默认将父元素分成 12 等份，所以可根据占据的份数来设置子元素的宽度，在设置列的宽度时，只需要在不同的类前缀后面加上栅格数量即可。

案例需求：① 在超小屏幕上，一列占一行。② 在小屏幕上，一列占三分之一。③ 在中等屏幕上，一列占二分之一。④ 在超大屏幕上，一列占一行

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/bootstrap/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
    <style>
        .row{
            background-color: #eee;
        }
        .col-sm-4{
            border: 2px solid white;
            text-align: center;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-12 col-sm-4 col-md-6 col-xl-12">第一列</div>
            <div class="col-12 col-sm-4 col-md-6 col-xl-12">第二列</div>
            <div class="col-12 col-sm-4 col-md-6 col-xl-12">第三列</div>
        </div> 
    </div>
</body>
</html>

栅格系统实现导航栏效果

首先定义导航栏页面结构，通过 Bootstrap 栅格系统中的 .container 设置导航栏的布局容器。
在导航栏布局容器中设置行和列。
在中等屏幕设备下，占 3 份，即每列宽度为 33.33%;
在小屏幕设备下，占 12 份，即每列宽度为 100%。然后再去定义导航栏的页面样式。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/bootstrap/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
    <style>
        ul{
            padding: 0px;
        }
        li{
            list-style: none;
            cursor: pointer;
        }
        .container{
            background-color: #eee;
        }
        li{
            text-align: center;
            font-size: 30px;
            padding: 10px;
        }
        /* li:hover{
            background-color: white;
        } */
        .active{
            background: lightgray;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul class="row">
            <li class="col-md-3 col-sm-12 active">首页</li>
            <li class="col-md-3 col-sm-12">新闻资讯</li>
            <li class="col-md-3 col-sm-12">关于我们</li>
            <li class="col-md-3 col-sm-12">客户服务</li>
        </ul>
    </div>
    <script>
        const lis = document.querySelectorAll('li');
        for(let i = 0; i < lis.length; i++){
            lis[i].addEventListener('mouseenter', function(){
                document.querySelector('.active').classList.remove('active');
                this.classList.add('active');
            })
        }
    </script>
</body>
</html>

列嵌套和列偏移

列嵌套

栅格系统内允许列的嵌套，在嵌套时也需要先创建 row 行，在创建 col 列，同样是分为 12 份。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/bootstrap/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
    <style>
        .row{
            background-color: #eee;
        }
        .col-md-4{
            border: 2px solid white;
            text-align: center;
            font-size: 30px;
        }
        .col-md-6{
            border: 2px solid white;
            text-align: center;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="row"><div class="col-md-6">嵌套一</div>
                <div class="col-md-6">嵌套二</div></div>
            </div>
            <div class="col-md-4">第二列</div>
            <div class="col-md-4">第三列</div>
        </div> 
    </div>
</body>
</html>

列偏移

栅格系统使用 .offset-md- 类将列向右侧偏移，主要是通过使用 .offset-md- 获取到当前元素并且增加了当前元素左侧的边距（margin）来实现的。

md 可以使用 sm、xl 和 lg 等替代，分别表示在不同屏幕下设置列的偏移。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/bootstrap/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
    <style>
        .row div{
            height: 50px;
            background-color: #eee;
            font-size: 30px;
            text-align: center;
        }
    </style>
</head>
<body>
   <div class="container">
    <div class="row">
        <div class="col-md-3">左侧</div>
        <div class="col-md-3 offset-md-6">右侧</div>
    </div>
   </div> 
</body>
</html>