第六章 Bootstrap 框架常用组件

组件基础

什么是组件

在 Bootstrap 中，组件是对网页中常用的公共代码的封装，使代码可以复用。Bootstrap 提供了各种各样的组件，如导航、表单、按钮、轮播图等。

组件的组成

Bootstrap 组件由结构和样式组成。

结构需要参考官方文档来编写。
样式是 Bootstrap 预定义好的，直接通过设置样式类（class）即可使用。

使用组件时，需要先查询官方文档，找到想用的组件；编写组件的 html 结构；为组件设置样式类。

 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


<!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>
    <div class="alert alert-primary" role="alert">
        A simple primary alert—check it out!
    </div>
    <div class="alert alert-secondary" role="alert">
        A simple secondary alert—check it out!
    </div>
    <div class="alert alert-success" role="alert">
        A simple success alert—check it out!
    </div>
    <div class="alert alert-danger" role="alert">
        A simple danger alert—check it out!
    </div>
    <div class="alert alert-warning" role="alert">
        A simple warning alert—check it out!
    </div>
    <div class="alert alert-info" role="alert">
        A simple info alert—check it out!
    </div>
    <div class="alert alert-light" role="alert">
        A simple light alert—check it out!
    </div>
    <div class="alert alert-dark" role="alert">
        A simple dark alert—check it out!
    </div>
</body>

</html>

组件的优势和引入

组件可以复用
代码更易维护和管理
降低代码之间的耦合程度
提高开发效率
组件是模块化的

1
2
3


<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="/bootstrap/bootstrap-5.3.0-alpha1-dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="/bootstrap/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">

jQuery 文件

jQuery 是一个快速的、简洁的 JavaScript 库。

官网：jQuery

更多版本：jQuery CDN

CDN 引入：在联网情况下直接引入，其中，integrity 和 crossorigin 属性用于验证 jQuery 文件完整性，防止文件被篡改。

1

<script src="https://code.jquery.com/jquery-3.7.1.slim.js" integrity="sha256-UgvvN8vBkgO0luPSUl2s8TIlOSYRoGFAX4jlCIm9Adc=" crossorigin="anonymous"></script>

本地引入：进入 https://code.jquery.com/jquery-3.7.1.slim.js，选中文本存储在本地文件中再引入。

Bootstrap 常用组件

按钮

Bootstrap 中的按钮一般使用 < a > 标签、< button > 标签或 < input > 标签（type 为 button、submit 或 reset）定义，给这 3 种标签添加按钮样式类即可设置成 Bootstrap 提供的按钮效果。

类	描述
.btn	按钮的基础样式类
.btn-danger	危险按钮
.btn-lg	大号按钮
.btn-warning	警示按钮
.btn-sm	小号按钮
.btn-info	信息按钮
.btn-primary	主要按钮
.btn-light	亮色按钮
.btn-dark	暗色按钮
.btn-secondary	次要按钮
.btn-success	成功按钮
.btn-link	链接按钮

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


<!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>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-dark">Dark</button>
    <button type="button" class="btn btn-link">Link</button>
</body>

</html>

 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


<!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>
    <ul class="nav">
        <li class="nav-item">
            <a href="#" class="nav-link">1</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">2</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">3</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">4</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">5</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link disabled">6</a>
        </li>
    </ul>
</body>

</html>

Bootstrap 常用组件提供了面包屑导航，通过为导航层次结构自动添加分隔符来实现面包屑导航的页面效果。

 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


<!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>
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item active" aria-current="page">Home</li>
        </ol>
    </nav>

    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Library</li>
        </ol>
    </nav>

    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item"><a href="#">Library</a></li>
            <li class="breadcrumb-item active" aria-current="page">Data</li>
        </ol>
    </nav>
</body>

</html>

分页 Pagination

在前端页面开发的过程中，经常会使用到分页器的功能，分页器的功能是帮助用户快速的跳转到指定页码的页面，当用户想要打开指定页面时，不需要用户多次操作，实现了一步到位的效果，提高了用户的使用体验。

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


<!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>
    <nav aria-label="Page navigation example">
        <ul class="pagination">
          <li class="page-item"><a class="page-link" href="#">Previous</a></li>
          <li class="page-item"><a class="page-link" href="#">1</a></li>
          <li class="page-item"><a class="page-link" href="#">2</a></li>
          <li class="page-item"><a class="page-link" href="#">3</a></li>
          <li class="page-item"><a class="page-link" href="#">Next</a></li>
        </ul>
      </nav>
</body>

</html>

列表 List-group

在学习 Bootstrap 常用组件之前，为了实现列表页面，我们首先要编写列表结构，然后再根据页面的样式需求编写 CSS 代码。

为了提高开发的效率，在 Bootstrap 中可以直接通过列表组件来实现列表页面结构。

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


<!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>
    <ul class="list-group">
        <li class="list-group-item active">列表1</li>
        <li class="list-group-item">列表2</li>
        <li class="list-group-item">列表3</li>
        <li class="list-group-item">列表4</li>
    </ul>
</body>

</html>

输入框组 Input-group

 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>
        .container{
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="input-group mb-3">
            <div class="input-group-prepend"> <!-- input 前方的文字 -->
                <span class="input-group-text">姓名</span>
            </div>
            <input type="text" class="form-control" placeholder="请输入姓名">
        </div>
        <div class="input-group mb-3">
            <span class="input-group-text">家庭住址</span>
            <input type="text" class="form-control" placeholder="请输入家庭住址">
        </div>
        <div class="input-group">
            <span class="input-group-text">联系方式</span>
            <input type="text" class="form-control" placeholder="请输入联系方式">
        </div>

    </div>
</body>

</html>

Bootstrap 实现菜单功能

折叠菜单 Collapse

 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


<!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">
    <script src="/bootstrap/jquery.min.js"></script>
    <script src="/bootstrap/bootstrap-5.3.0-alpha1-dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>
    <p>
        <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false"
            aria-controls="collapseExample">
            Link with href
        </a>
        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample"
            aria-expanded="false" aria-controls="collapseExample">
            Button with data-bs-target
        </button>
    </p>
    <div class="collapse" id="collapseExample">
        <div class="card card-body">
            Some placeholder content for the collapse component. This panel is hidden by default but revealed when the
            user activates the relevant trigger.
        </div>
    </div>
    <div class="collapse" id="collapseExample">
        <div class="card card-body">
            Some placeholder content for the collapse component. This panel is hidden by default but revealed when the
            user activates the relevant trigger.
        </div>
    </div>
</body>

</html>

模仿 Bootstrap 编写折叠菜单代码。

 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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73


<!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">
    <script src="/bootstrap/jquery.min.js"></script>
    <script src="/bootstrap/bootstrap-5.3.0-alpha1-dist/js/bootstrap.bundle.min.js"></script>
    <style>
        .btn {
            color: gray;
            border: 1px solid black;
            margin: 20px 0 0 20px;
        }

        .card {
            border: none;
        }

        .last {
            border-top: 1px solid gray;
            border-radius: 0;
            margin: 20px;
        }
    </style>
</head>

<body>
    <div class="container">
        <p>
            <a class="btn btn-light" data-bs-toggle="collapse" href="#collapseExample" role="button"
                aria-expanded="false" aria-controls="collapseExample">
                =
            </a>
        </p>
        <div class="collapse" id="collapseExample">
            <div class="card card-body">
                Bootstrap v3 中文文档
            </div>
        </div>
        <div class="collapse" id="collapseExample">
            <div class="card card-body">
                Bootstrap v4 中文文档
            </div>
        </div>
        <div class="collapse" id="collapseExample">
            <div class="card card-body">
                Bootstrap v5 中文文档
            </div>
        </div>
        <div class="collapse" id="collapseExample">
            <div class="card card-body">
                网站实例
            </div>
        </div>
        <div class="collapse" id="collapseExample">
            <div class="card card-body">
                精选模板
            </div>
        </div>
        <div class="collapse  last" id="collapseExample">
        </div>
        <div class="collapse" id="collapseExample">
            <div class="card card-body">
                Bootstrap v2 中文文档
            </div>
        </div>
    </div>
</body>

</html>

下拉菜单 Dropdowns

 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


<!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">
    <script src="/bootstrap/jquery.min.js"></script>
    <script src="/bootstrap/bootstrap-5.3.0-alpha1-dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>
    <div class="dropdown">
        <!--  添加 dropdown-toggle 类在按钮右侧出现向下箭头  -->
        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            菜单
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">菜单1</a></li>
            <li><a class="dropdown-item" href="#">菜单2</a></li>
            <li><a class="dropdown-item" href="#">菜单3</a></li>
        </ul>
    </div>
</body>

</html>

Bootstrap 实现轮播图功能

轮播图

为 <a> 标签定义类名为 carousel-control-prev，表示设置左侧箭头的样式;定义 <a> 标签的 href 属性的值为 #carouselExampleControls，表示与轮播图最外层盒子绑定；定义 role 的值为 button 表示按钮角色;定义 data-slide 属性的值为 prev；表示查看上一张图片；在 <a> 标签的内部定义类名为 carousel-control-prev-icon 的 span 元素，表示左侧箭头图标；并且定义类名 sr-only 的 span 元素，设置内容为 Previous。

 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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95


<!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">
    <script src="/bootstrap/jquery.min.js"></script>
    <script src="/bootstrap/bootstrap-5.3.0-alpha1-dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>
    <div id="carouselExampleCaptions" class="carousel slide">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"
                aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"
                aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"
                aria-label="Slide 3"></button>
            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="3"
                aria-label="Slide 4"></button>
            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="4"
                aria-label="Slide 5"></button>
            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="5"
                aria-label="Slide 6"></button>
            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="6"
                aria-label="Slide 7"></button>
        </div>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="/MyPra/img/mi1.webp" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                    <h5>第一张图片</h5>
                    <p>图片描述</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="/MyPra/img/mi2.webp" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                    <h5>第二张图片</h5>
                    <p>图片描述</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="/MyPra/img/mi3.webp" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                    <h5>第三张图片</h5>
                    <p>图片描述</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="/MyPra/img/mi4.jpg" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                    <h5>第四张图片</h5>
                    <p>图片描述</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="/MyPra/img/mi5.webp" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                    <h5>第五张图片</h5>
                    <p>图片描述</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="/MyPra/img/mi6.webp" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                    <h5>第六张图片</h5>
                    <p>图片描述</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="/MyPra/img/mi7.webp" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                    <h5>第七张图片</h5>
                    <p>图片描述</p>
                </div>
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"
            data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions"
            data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
</body>

</html>