Bootstrap响应式Web前端开发与实战（微课版）最新章节_千锋教育著

2.2 Bootstrap开发环境

本节主要介绍Bootstrap框架的开发环境，包括VS Code、下载Bootstrap，安装Bootstrap以及快速体验Bootstrap。

2.2.1 VS Code

本书使用Visual Studio Code（简称VS Code）软件作为网页编辑器。VS Code是微软开发的轻量级代码编辑器，功能非常强大，页面简洁明晰，操作方便快捷，设计十分人性化。

VS Code的官方页面如图2.2所示。

图2.2　VS Code的官方页面

2.2.2 下载Bootstrap

读者在下载Bootstrap之前应对自身的开发水平进行评估，在掌握CSS和HTML技术的前提下可较为轻松地学习Bootstrap。

1. 进入官方页面

Bootstrap的官方页面如图2.3所示。

图2.3　Bootstrap的官方页面

2. 下载安装包

访问Bootstrap的下载页面，单击左下方的“Download”按钮进行下载，页面底部有下载进度提示信息，如图2.4所示。

图2.4　Bootstrap的下载

3. 解压缩安装包

下载完成后的文件名为bootstrap-4.5.3-dist.zip，解压缩后的目录结构如图2.5所示。

图2.5　安装包解压缩后的目录结构

打开解压缩文件可以看到Bootstrap安装包中包含css和js两个文件夹。Bootstrap可提供两种形式的文件，分别为样式文件和脚本文件，其文件结构如图2.6所示。

图2.6中主要包括css文件夹中的样式文件以及js文件夹中的脚本文件。其中，文件名中不含“min”关键字的是预编译的文件（如bootstrap.js），而包含“min”关键字的文件（如bootstrap.min.js）是编译且压缩好的文件（体积小，下载速度快），用户可根据实际需求选择引用相应文件。在实际项目开发中，为了提高文件的下载速度，一般选择压缩好的文件。

图2.6　Bootstrap的文件结构

2.2.3 安装Bootstrap

下载Bootstrap安装包到本地后，即可安装并使用Bootstrap。为确保页面渲染效果，读者在进行开发时，必须先在<head>标签中添加响应式的元标签，具体代码如下。

<head>
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
</head>

安装Bootstrap的方法很简单，主要有以下两种。

1. 本地安装

（1）与引入CSS文件的方法类似，可在<head>标签中通过<link>标签引入Bootstrap的基础样式文件，具体代码如下。

<head>
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
<!--引入Bootstrap的基础样式文件-->
<link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.min.css">
<!--引入自定义样式文件-->
<link rel="stylesheet" href="css/style.css">
</head>

其中，基础样式文件bootstrap.min.css必须放在自定义样式文件style.css的前面，以确保自定义样式可覆盖Bootstrap的一些默认样式，便于设置本地样式。

（2）与引入JavaScript文件的方法类似，可在<script>标签中引入JS文件，具体代码如下。

<!--页面内容-->
<body>
<!--引入jQuery文件-->
<script src="jquery-3.5.1.slim.js"></script>
<!--引入JS文件-->
<script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</body>

其中，Bootstrap的JavaScript效果是依赖于jQuery库实现的，使用Bootstrap的动态效果需要引入jquery.js文件。bootstrap.min.js文件是Bootstrap的jQuery插件的源文件，一般建议将bootstrap.min.js文件放在代码尾部，这样有利于提高页面加载速度。

2. 在线安装

在线安装Bootstrap依赖于第三方的CDN（Content Delivery Network，内容分发网络）服务，Bootstrap中文网为Bootstrap构建的CDN加速服务可使页面访问速度更快，加速效果更明显。读者可在标签中直接引用Bootstrap的CDN地址，具体代码如下。

<!--引入Bootstrap的基础样式文件-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/
bootstrap/4.5.3/css/bootstrap.min.css">
<!--引入jQuery文件-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<!--引入Bootstrap的JS文件-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.3/js/
bootstrap.min.js"></script>

2.2.4 快速体验Bootstrap

学习新框架的一个重要技巧是尽可能地练习和使用它，即从简单的案例入手，逐步学习和使用新框架。本小节从Bootstrap的工具类、组件和插件入手，通过简单的案例将Bootstrap应用于实践。

1. 调用Bootstrap的工具类

新建一个网页，引入Bootstrap必需的CSS文件、JS文件，以及jQuery文件。在Bootstrap官网中选择对应版本的Bootstrap，选择“Utilities”（工具类），此时页面会自动跳转至工具类的详情页面，读者可根据开发需求选择对应的工具类。以Colors颜色类为例，读者只需在<p>标签中添加class="text-*"即可获得Bootstrap设定好的文本颜色样式，具体代码如例2.1所示。

【例2.1】Bootstrap工具类。

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.      <meta charset="UTF-8">
5.      <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
6.      <!--引入Bootstrap的基础样式文件-->
7.      <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
8.      <!--引入jQuery文件-->
9.      <script src="jquery-3.5.1.slim.js"></script>
10.     <title>Bootstrap工具类</title>
11. </head>
12. <body>
13.     <div>
14.        <p class="text-primary">工具类--文本颜色类.text-primary</p>
15.        <p class="text-secondary">工具类--文本颜色类.text-secondary</p>
16.        <p class="text-success">工具类--文本颜色类.text-success</p>
17.        <p class="text-danger">工具类--文本颜色类.text-danger</p>
18.        <p class="text-warning">工具类--文本颜色类.text-warning</p>
19.        <p class="text-info">工具类--文本颜色类.text-info</p>
20.        <p class="text-light bg-dark">工具类--文本颜色类.text-light</p>
21.        <p class="text-dark">工具类--文本颜色类.text-dark</p>
22.        <p class="text-body">工具类--文本颜色类.text-body</p>
23.        <p class="text-muted">工具类--文本颜色类.text-muted</p>
24.        <p class="text-white bg-dark">工具类--文本颜色类.text-white</p>
25.        <p class="text-black-50">工具类--文本颜色类.text-black-50</p>
26.        <p class="text-white-50 bg-dark">工具类--文本颜色类.text-white-50</p>
27.    </div>
28.    <!--引入Bootstrap的JS文件-->
29.    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
30. </body>
31. </html>

Bootstrap工具类的显示效果如图2.7所示。

图2.7　Bootstrap工具类的显示效果

Bootstrap工具类的功能非常强大，可提供多种通用的CSS样式。在上述代码中，.text-primary类用于定义文本的默认颜色，.bg-dark类用于定义文本的背景颜色为黑色，Bootstrap提供的所有工具类的使用规则均可参考上述示例。读者将基本的网页结构构建完成后，在对应标签中加入Bootstrap所提供的各种工具类，即可呈现出优美的页面效果。

2. 调用Bootstrap的组件

除使用工具类实现页面的样式设计之外，还可使用Bootstrap的组件实现页面布局。Bootstrap组件的使用方法也十分简单，只需将符合规范的工具类名和页面结构组合起来。在Bootstrap官网中选择对应版本的Bootstrap后，单击“Components”（组件）按钮，页面会自动跳转至对应的组件详情页面。以列表组为例，只要符合ul.list-group> li.list-group-item结构，即可构建列表组，具体代码如例2.2所示。

【例2.2】Bootstrap列表组。

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.     <meta charset="UTF-8">
5.     <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
6.     <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
7.     <script src="jquery-3.5.1.slim.js"></script>
8.     <title>Bootstrap列表组组件</title>
9.  </head>
10. <body>
11.    <div>
12.        <ul class="list-group">
13.           <li class="list-group-item active" aria-current="true"> 《江雪》</li>
14.           <li class="list-group-item">千山鸟飞绝，</li>
15.           <li class="list-group-item">万径人踪灭。</li>
16.           <li class="list-group-item">孤舟蓑笠翁，</li>
17.           <li class="list-group-item">独钓寒江雪。</li>
18.        </ul>
19.    </div>
20.    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
21. </body>
22. </html>

Bootstrap列表组的显示效果如图2.8所示。

在上述代码中，.list-group类用于定义列表组的父容器，.list-group-item类用于定义列表组的列表项。使用Bootstrap提供的任意组件，可简便、快捷地设计布局、构建页面。

3. 调用Bootstrap标签页插件

为Bootstrap组件添加JavaScript效果，一方面需要根据Bootstrap的参考文档编写对应组件的HTML结构代码，另一方面需要调用jQuery插件。Bootstrap的所有插件均支持两种调用方式：一种是data属性的API调用，另一种是JavaScript脚本调用。读者可根据业务需求选择任意一种调用方式进行开发。下面以标签页切换效果为例演示Bootstrap标签页插件的使用方法，具体代码如例2.3所示。

图2.8　Bootstrap列表组的显示效果

【例2.3】Bootstrap标签页插件。

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.      <meta charset="UTF-8">
5.      <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
6.      <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
7.      <script src="jquery-3.5.1.slim.js"></script>
8.      <title>Bootstrap标签页插件</title>
9.  </head>
10. <body>
11.     <div>
12.        <!-- 标签页 -->
13.        <ul class="nav nav-tabs" id="myTab">
14.           <li class="active"><a class="nav-link" href="#country" data-toggle="tab">李白</a></li>
15.           <li><a class="nav-link" href="#society" data-toggle="tab">杜甫</a></li>
16.           <li><a class="nav-link" href="#citizen" data-toggle="tab">苏轼</a></li>
17.        </ul>
18.        <!-- 标签页的内容面板 -->
19.        <div class="tab-content">
20.           <div class="tab-pane active" id="country">李白，字太白，号青莲居士，又号“谪仙人”，唐代伟大的浪漫主义诗人，被后人誉为“诗仙”。</div>
21.           <div class="tab-pane" id="society">杜甫，字子美，自号少陵野老，唐代伟大的现实主义诗人，与李白合称“李杜”。</div>
22.           <div class="tab-pane" id="citizen">苏轼，字子瞻，一字和仲，号铁冠道人、东坡居士，世称苏东坡、苏仙。</div>
23.        </div>
24.     </div>
25.     <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
26. </body>
27. </html>

上述示例采用Bootstrap自带的data属性触发规则调用插件，在标签中设置data-toggle="tab"属性来实现标签页切换。这种调用方式的好处是无须编写任何JavaScript代码即可实现切换功能。

另一种方式则是使用JavaScript脚本调用插件，具体代码如下。

1.  <script type="text/javascript">
2.      $('#myTab a').click(function (e){
3.         e.preventDefault()
4.         $(this).tab('show')
5.     })
6.  </script>

用Bootstrap标签页插件的两种调用方式实现的显示效果相同，如图2.9所示。

图2.9　Bootstrap标签页插件的显示效果

在采用第一种方式的代码中，为<ul>标签添加.nav和.nav-tabs类即可赋予其Bootstrap标签页样式。实现标签页的切换效果，一方面可以为页面元素添加data-toggle= "tab"属性，借助Bootstrap的data属性规则实现标签页的切换；另一方面可使用JavaScript脚本调用jQuery插件实现标签页的切换。Bootstrap提供的所有插件工具的调用方法均可参考例2.3。