本节主要介绍Bootstrap框架的开发环境,包括VS Code、下载Bootstrap,安装Bootstrap以及快速体验Bootstrap。
本书使用Visual Studio Code(简称VS Code)软件作为网页编辑器。VS Code是微软开发的轻量级代码编辑器,功能非常强大,页面简洁明晰,操作方便快捷,设计十分人性化。
VS Code的官方页面如图2.2所示。
图2.2 VS Code的官方页面
读者在下载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的文件结构
下载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>
学习新框架的一个重要技巧是尽可能地练习和使用它,即从简单的案例入手,逐步学习和使用新框架。本小节从Bootstrap的工具类、组件和插件入手,通过简单的案例将Bootstrap应用于实践。
1. 调用Bootstrap的工具类
新建一个网页,引入Bootstrap必需的CSS文件、JS文件,以及jQuery文件。在Bootstrap官网中选择对应版本的Bootstrap,选择“Utilities”(工具类),此时页面会自动跳转至工具类的详情页面,读者可根据开发需求选择对应的工具类。以Colors颜色类为例,读者只需在<p>标签中添加class="text-*"即可获得Bootstrap设定好的文本颜色样式,具体代码如例2.1所示。
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所示。
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列表组的显示效果
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。