作者：李爱玲
出版社：清华大学出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
Bootstrap从入门到项目实战试读：
前言
为什么要写这样一本书Bootstrap是目前最受欢迎的前端框架之一。Bootstrap是基于HTML、CSS、JavaScript的，它简洁灵活，能够在很大程度上降低Web前端开发的难度，因此深受广大Web前端开发人员的喜爱。Bootstrap框架功能虽然强大，但是对于初学者来说入门比较困难，市场上的图书则以翻译为主，缺少一本真正适合初学者入门的书。本书以能让读者掌握Bootstrap框架技术作为编写本书的思路，知识点从易到难，讲解详细且透彻，结构合理，对于读者快速掌握Bootstrap前端框架有很大的帮助。本书特色
零基础、入门级的讲解
无论您是否从事相关行业，无论您是否接触过Bootstrap网页设计，都能从本书中找到最佳起点。
实用、专业的范例和项目
本书从Bootstrap基本操作开始，逐步带领读者学习Bootstrap的各种应用技术，侧重实战技能，使用简单易懂的实际案例进行分析和操作指导，让读者学起来简明轻松，操作起来有章可循。
细致入微、贴心提示
本书在讲解过程中，在各章中使用了“注意”“提示”“技巧”等小栏目，使读者在学习过程中能更清楚地了解相关操作、理解相关概念，并轻松掌握各种操作技巧。超值资源大放送
全程同步教学录像
涵盖本书所有知识点，详细讲解每个实例及项目的过程及技术关键点。比看书更能轻松地掌握书中所有的网页制作和设计知识，而且扩展的讲解部分使您得到比书中更多的收获。
超多容量王牌资源
赠送大量王牌资源，包括实例源代码、教学幻灯片、本书精品教学视频、88个实用类网页模板、12部网页开发必备参考手册、HTML 5标签速查手册、精选的JavaScript实例、CSS 3属性速查表、JavaScript函数速查手册、CSS+DIV布局赏析案例、精彩网站配色方案赏析、网页样式与布局案例赏析、Web前端工程师常见面试题等。读者对象
■ 没有任何Bootstrap网页开发基础的初学者。
■ 有一定的Bootstrap网页开发和基础，想精通前端框架开发的人员。
■ 有一定的网页前端设计基础，没有项目经验的人员。
■ 大专院校及培训学校的老师和学生。创作团队
本书由李爱玲编著，参加编写的人员还有刘春茂、李艳恩和李佳康。在编写过程中，我们虽竭尽所能将最好的讲解呈现给了读者，但难免有疏漏和不妥之处，敬请读者不吝指正。若您在学习中遇到困难或疑问，或有任何建议，可写信发送至邮箱357975357@qq.com。编 者第1章 开发框架Bootstrap 4简介
Bootstrap是一个简洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发者，也能做出很专业、美观的页面，极大地提高工作效率。
Bootstrap是目前最流行的一套前端开发框架，集成了HTML、CSS和JavaScript技术，为网页快速开发提供了包括布局、网格、表格、按钮、表单、导航、提示、分页、表格等组件。本章主要介绍Bootstrap的发展、优势、特性、网站欣赏和资源。1.1 Bootstrap概述
Bootstrap是最受欢迎的Web前端框架之一，用于开发响应式布局、移动设备优先的Web项目。Bootstrap是美国Twitter公司的设计师Mark Otto（马克·奥托）和Jacob Thornton（雅各布·桑顿）合作开发的，是基于HTML、CSS、JavaScript的简洁、直观、强悍的前端开发框架，使用它可以快速、简单地构建网页和网站。1.1.1 Bootstrap发展历史
在Twitter的早期，工程师们几乎使用他们熟悉的任何一个库来满足前端的需求，这就造成了网站维护困难、可扩展性不强、开发成本高等问题。在Twitter的第一个Hack Week期间，Bootstrap最初是为了应对这些挑战而迅速发展的。
2010年6月，为了提高内部的协调性和工作效率，Twitter公司的几个前端开发人员自发成立了一个兴趣小组，小组早期主要围绕一些具体产品展开讨论。在不断的讨论和实践中，小组逐渐确立了一个清晰的目标，期望设计一个伟大的产品，即创建一个统一的工具包，允许任何人在Twitter内部使用它，并不断对其进行完善和超越。后来，这个工具包逐步演化为一个有助于建立新项目的应用系统。在它的基础上，Bootstrap的构想产生了。
Bootstrap项目由Mark Otto和Jacob Thornton主导建立，定位为一个开放源码的前端工具包。他们希望通过这个工具包提供一种精致、经典、通用，且使用HTML、CSS和JavaScript构建的组件，为用户构建一个设计灵活和内容丰富的插件库。
最终，Bootstrap成为应对这些挑战的解决方案，并开始在Twitter内部迅速成长，形成了稳定版本。随着工程师对其不断的开发和完善，Bootstrap进步显著，不仅包括基本样式，而且有了更为优雅和持久的前端设计模式。
2011年8月，Twitter将其开源，开源页面地址为：http://twitter.github.com/bootstrap。至今，Bootstrap已发展到包括几十个组件，并已成为最受欢迎的Web前端框架之一。截至2019年4月16日，在GitHub上已有超过7315个关注、132545个加星和64838个分支，如图1-1所示。当然，这个数字还在不断变化中。图1-1 GitHub开源页面1.1.2 Bootstrap的优势
据调查，目前在各大中小型公司和企业中，很多前端项目都在全面推行使用Bootstrap。当然如此火爆，自然有它的道理，下面为大家简单地分析一下。
第一，Bootstrap出自Twitter。由大公司发布，并且完全开源，自然久经考验，减少了测试的工作量。这也就是我们经常说到的站在巨人的肩膀上，不重复造轮子。
第二，Bootstrap的代码有着非常良好的代码规范。在使用Bootstrap时也有助于我们养成良好的编码习惯，在Bootstrap的基础之上创建项目，日后代码的维护也变得异常简单清晰。
第三，Bootstrap是基于Less打造的，并且也有Sass版本。Less/Sass是CSS的预处理技术，正因如此，它一经推出就包含了一个非常实用的Mixin库供用户调用，使得开发者在开发过程中对CSS的处理更加简单。
第四，响应式开发。Bootstrap响应式的网格系统（Grid System）非常先进，它已经帮用户搭建好了实现响应式设计的基础框架，并且非常容易修改，如果你是一个新手，Bootstrap可以帮助你在非常短的时间内上手响应式布局的设计。
第五，丰富的组件与插件。Bootstrap的HTML组件和JavaScript组件非常丰富，并且代码简洁，非常易于修改，如果你觉得它设计的样子不是自己所想要的，你完全可以在其基础之上修改成自己想要的任何样子。由于Bootstrap的火爆，又出现了不少围绕Bootstrap而开发的JavaScript插件，这就使得开发的工作效率得到极大提升。
以上这些都是使用Bootstrap所带来的优势。当然Bootstrap并不能帮你完成所有事情，它只是一个框架，在这个框架上面你依旧可以任意发挥，并且发挥得更好，但是前提是你要驾驭得了它。1.1.3 Bootstrap 4介绍
Bootstrap 4是Bootstrap的最新版本，目前已经更新到了Bootstrap 4.2.1版本，还在持续更新中。本书使用的是Bootstrap 4.2.1版本，书中如果没有特别的说明，Bootstrap 4就是指Bootstrap 4.2.1版本。
1．Bootstrap 4是什么
Bootstrap是全球最受欢迎的前端框架之一，用于开发响应式布局、移动设备优先的Web项目。它是一套用于HTML、CSS和JS开发的开源工具集。利用Bootstrap 4提供的Sass变量和大量mixin、响应式栅格系统、可扩展的预制组件、基于jQuery的强大插件系统，能够快速开发出原型或者构建整个App。
2．Bootstrap 4与Bootstrap 3
Bootstrap 4与Bootstrap 3相比，其拥有更多具体的类并把一些有关的部分变成了相关的组件。同时Bootstrap.min.css的体积减小了40%以上。
Bootstrap 4放弃了对IE 8的支持，现在仅仅支持IE 9以上版本的浏览器。如果还在使用IE 9以前的浏览器，可使用Bootstrap 3。
3．Bootstrap 4更新的重要内容
2015年8月，Bootstrap 4内测版发布。Bootstrap 4是一次重大更新，几乎涉及每行代码。主要包括：
■ 从Less迁移到Sass：Bootstrap编译速度比以前更快。
■ 改进网格系统：新增一个网格层适配移动设备，并整顿语义混合。
■ 支持选择弹性盒模型（Flexbox）：利用Flexbox的优势快速布局。
■ 废弃了wells、thumbnails和panels，使用cards（卡片）代替。cards是个全新概念，但使用起来与wells、thumbnails及panels很像，且更方便。
■ 将所有HTML重置样式表整合到Reboot中：在用不了Normalize.css的地方，可以用Reboot，它提供了更多选项。例如box-sizing:border-box、margin tweaks等都存放在一个单独的Sass文件中。
■ 新的自定义选项：不再像前面的一样，将渐变、淡入淡出、阴影等效果分放在单独的样式表中，而是将所有选项都移到一个Sass变量中。想要给全局或考虑不到的角落定义一个默认效果时，只要更新变量值，然后重新编译就可以了。
■ 不再支持IE 8，使用rem和em单位：放弃对IE 8的支持意味着开发者可以放心地利用CSS的优点，不必研究css hack技巧或回退机制了。使用rem和em代替px单位，更适合做响应式布局，控制组件大小。如果要支持IE 8，只能继续使用Bootstrap 3。
■ 重写所有JavaScript插件：为了利用JavaScript的新特性，Bootstrap 4用ES6重写了所有插件。现在提供UMD支持、泛型拆解方法、选项类型检查等特性。
■ 改进工具提示（tooltips）和弹窗（popovers）自动定位：这部分要感谢Tether工具的帮助。
■ 改进文档：所有文档以Markdown格式重写，添加了一些方便的插件组织示例和代码片段，文档使用起来会更方便，搜索的优化工作也在进行中。
■ 更多变化：支持自定义窗体控件、空白和填充类，此外还包括新的实用程序类等。
发布Bootstrap 3的时候，Bootstrap曾放弃了对2.x版本的支持，给很多用户造成了麻烦，因此当升级到Bootstrap 4时，开发团队将继续修复Bootstrap 3的bug，改进文档。Bootstrap 4最终发布之后，Bootstrap 3也不会下线。1.1.4 Bootstrap 4浏览器支持
Bootstrap 4支持所有的主流浏览器和平台的最新的、稳定的版本。针对Windows，则是支持IE 10-11/Microsoft Edge浏览器。
使用最新版本WebKit、Blink或Gecko内核的第三方浏览器（例如360安全浏览器、极速浏览器、搜狗浏览器、QQ浏览器、UCweb浏览器），无论是直接地还是通过Web API接口，虽然Bootstrap 4官方没有针对性的开发支持，但在大多数情况下也都是完美兼容，不会影响视觉呈现和脚本运行。
可以在Bootstrap源码文件中找到.browserslistrc文件，它包括支持的浏览器以及版本，代码如下所示：
Bootstrap 4在移动设备浏览器上的支持情况如表1-1所示。表1-1 移动设备浏览器上的支持情况
Bootstrap 4在桌面浏览器上的支持情况如表1-2所示。表1-2 桌面浏览器上的支持情况
对于Firefox浏览器，除了最新的普通稳定版本，还支持Firefox浏览器最新的扩展版本。
大多数情况下，在Chromium、Chrome for Linux、Firefox for Linux和IE 9中，Bootstrap 4运行良好，尽管它们没有得到官方的支持。
对于IE浏览器来说，支持IE 10及更高版本，不支持IE 9（即使大多兼容，依然不推荐）。注意IE 10中不完全支持某些CSS 3属性和HTML 5元素，或者需要前缀属性才能实现完整的功能（访问https://caniuse.com网站可以了解不同浏览器对CSS 3和HTML 5功能的支持）。1.2 Bootstrap特性
下面简单地介绍一下Bootstrap的功能和特色。1.2.1 Bootstrap 4的构成
Bootstrap 4构成模块从大的方面可以分为页面布局、页面排版、通用样式、基本组件和jQuery插件等部分。下面简单介绍一下Bootstrap 4中各模块的功能。
1．页面布局
布局对于每个项目都必不可少。Bootstrap在960栅格系统的基础上扩展出一套优秀的栅格布局，而在响应式布局中有更强大的功能，能让栅格布局适应各种设备。这种栅格布局使用也相当简单，只需要按照HTML模板应用，即可轻松构建所需的布局效果。
2．页面排版
页面排版的好坏直接影响产品风格，在Bootstrap中，页面的排版都是从全局的概念上出发，定制了主体文本、段落文本、强调文本、标题、Code风格、按钮、表单、表格等格式。
3．通用样式
Bootstrap 4定义了通用样式类，包括边距、边框、颜色、对齐方式、阴影、浮动，显示与隐藏等，可以使用这些通用样式快速开发，无须再编写大量CSS样式。
4．基本组件
基本组件是Bootstrap的精华之一，它们都是开发者平时需要用到的交互组件。例如按钮、下拉菜单、标签页、工具栏、工具提示和警告框等。这些组件都配有jQuery插件，运用它们可以大幅度提高用户的交互体验，使产品不再那么呆板、无吸引力。
5．jQuery插件
Bootstrap中的jQuery插件主要用来帮助开发者实现与用户交互的功能。下面是Bootstrap提供的常见插件。（1）模态框（Modal）：在JavaScript模板基础上自定义的一款灵活性极强的弹出蒙版效果的插件。（2）下拉菜单（Dropdown）：Bootstrap中一款轻巧实用的插件，可以帮助实现下拉功能，例如下拉菜单、下拉工具栏等。（3）滚动监听（Scrollspy）：实现监听滚动条位置的效果，例如在导航中有多个标签，用户单击其中一个标签，滚动条会自动定位到导航中标签对应的文本位置。（4）标签页（Tab）：这个插件能够快速实现本地内容的切换，动态切换标签页对应的本地内容。（5）工具提示（Tooltip）：一款优秀的jQuery插件，无须加载任何图片，采用CSS 3新技术，动态显示存储的标题信息。（6）弹出提示（Popover）：在Tooltips的插件上扩展，用来显示一些叠加内容的提示效果，此插件需要配合Tooltips使用。（7）警告框（Alert）：用来关闭警告信息块。（8）按钮（Button）：用来控制按钮的状态。（9）折叠（Collapse）：一款轻巧实用的手风琴插件，可以用来制作面板或菜单折叠效果。（10）轮播（Carousel）：实现图片播放功能的插件。1.2.2 Bootstrap的特色
Bootstrap是目前最好的前端开发工具包之一，它拥有以下特色。（1）支持响应式设计：从Bootstrap 2开始，提供完整的响应式特性。所有的组件都能根据分辨率和设备灵活缩放，从而提供一致性的用户体验。（2）适应各种技术水平：Bootstrap适应不同技术水平的从业者，无论是设计师，还是程序开发人员，不管是骨灰级别的大牛，还是刚入门槛的菜鸟，使用Bootstrap既能开发简单的小东西，也能构造更为复杂的应用。（3）跨设备、跨浏览器：最初设想的Bootstrap只支持现代浏览器，不过新版本已经能支持所有主流浏览器，甚至包括IE 7。从Bootstrap 2开始，提供对平板和智能手机的支持。（4）提供12列网格布局：网格系统不是万能的，不过在应用的核心层有一个稳定和灵活的网格系统可以让开发变得更简单。（5）样式化的文档：与其他前端开发工具包不同，Bootstrap优先设计了一个样式化的使用指南，不仅可以用来介绍特性，更可以用来展示最佳实践、应用以及代码示例。（6）不断完善的代码库：尽管经过gzip压缩后，Bootstrap只有10KB大小，但是它却仍是最完备的前端工具包之一，提供了几十个全功能的随时可用的组件。（7）可定制的jQuery插件：任何出色的组件设计，都应该提供易用、易扩展的人机界面。Bootstrap为此提供了定制的jQuery内置插件。（8）选用LESS构建动态样式：当传统的枯燥CSS写法止步不前时，LESS技术横空出世。LESS使用变量、嵌套、操作、混合编码，帮助用户花费很少的时间成本，编写更快、更灵活的CSS。（9）支持HTML 5：Bootstrap支持HTML 5标签和语法，可在HTML 5文档类型基础上进行设计和开发。（10）支持CSS 3：Bootstrap支持CSS 3所有属性和标准，逐步改进组件以达到最终效果。（11）提供开源代码：Bootstrap全部托管于GitHub（https://github.com/），完全开放源代码，并借助GitHub平台实现社区化开发和共建。1.3 Bootstrap应用浏览
Bootstrap是目前最受欢迎也是最简洁的建站方式之一，所以互联网上涌现了很多基于Bootstrap建设的网站。同时，还出现了许多Bootstrap扩展插件。1.3.1 Bootstrap网站
下面介绍3个不同类型的国内网站，这些网站虽然鲜为人知，但分别从不同的侧面展示Bootstrap在开发中的应用效果。如果读者想了解更多的Bootstrap网站，可以浏览http://www.youzhan.org/。
1．星巴克（https://www.starbucks.com.cn/）
星巴克（Starbucks）是一家连锁咖啡公司的名称，网站比较独特，采用两栏的方式进行布局，如图1-2所示。图1-2 星巴克网站首页
2．派悦坊（https://www.pantrysbest.com/）
派悦坊是一个甜点网站，如图1-3所示。图1-3 派悦坊网站首页
3．悦合同（https://yuehetong.com/）
悦合同是一个以司法大数据作为工具，致力于打造专业化的企业顾问服务的网站。页面整体效果大方、美观，如图1-4所以。图1-4 悦合同网站首页1.3.2 Bootstrap插件
Bootstrap的使用越来越广泛，而且越来越多的人为Bootstrap开发各种扩展插件来增强Bootstrap的功能。下面介绍一些常用的插件。
1）Font Awesome
http://fontawesome.dashgame.com/。
Font Awesome提供可缩放的矢量图标，Font Awesome是一套专为Bootstrap设计的图标字体，几乎囊括了网页中可能用到的所有图标，可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其他任何支持的效果。
2）Flat UI
http://www.bootcss.com/p/flat-ui/。
Flat UI由Designmodo提供。Flat UI包含了许多Bootstrap提供的组件，外观上更加漂亮，所以Flat UI迅速普及开来。
3）Bsie
http://www.bootcss.com/p/bsie/。
Bsie弥补了Bootstrap对IE 6的不兼容。目前，Bsie能在IE 6上支持大部分Bootstrap的特性，但还有一些无法支持。
4）Sco.js
http://www.bootcss.com/p/sco.js/。
Sco.js创造的起因是为了增强Bootstrap中现有的JavaScript组件，并且也为了满足项目的特定需求。
5）jQuery-UI-Bootstrap
http://www.bootcss.com/p/jquery-ui-bootstrap/。
jQuery-UI-Bootstrap将Bootstrap应用到了jQuery UI控件上，让用户在使用jQuery UI控件时也能充分利用Bootstrap的样式，而且不会出现样式不统一的情况。
6）HTML 5 Boilerplate
http://www.bootcss.com/p/html5boilerplate/。
HTML 5 Boilerplate是最流行的Web开发前端模板，可以快速构建健壮、适应性强的App或网站。
7）Metro UI CSS
http://www.bootcss.com/p/metro-ui-css/。
Metro UI CSS是一套用来创建类似于Windows 8 Metro UI风格网站的样式。
8）Chart.js
https://chartjs.bootcss.com/。
Chart.js是一个简单、灵活的JavaScript图表工具，是专门为设计和开发人员准备的。1.4 Bootstrap开发工具和资源
对于初学者来说，拥有好的学习资源，将会对学习Bootstrap起到事半功倍的效果。1.4.1 Bootstrap开发工具
Layoutit（http://www.bootcss.com/p/layoutit/）是一个在线工具，首页效果如图1-5所示。它可以简单而又快速地搭建Bootstrap响应式布局，操作基本是使用拖动方式来完成的，而元素都是基于Bootstrap框架集成的，所以这个工具很适合网页设计师和前端开发人员使用。图1-5 Layoutit工具首页效果
ibootstrap（http://www.ibootstrap.cn/）也是一个在线工具，和Layoutit工具类似，界面如图1-6所示。ibootstrap适配了很多浏览器，同时可以简单可视化编辑和生成，有基本的布局设置、基本的CSS布局、工具组件和JavaScript工具，操作基本上是使用拖动方式来完成的。图1-6 ibootstrap工具首页效果1.4.2 Bootstrap资源
使用Bootstrap开发网站，就像在拼图一样，需要什么就拿什么，最后拼成一个完整的样子。Bootstrap框架定义了大量的组件，根据网页的需要，可以直接拿来相应的组件进行拼凑，然后稍微添加一些自定义的样式风格，即可完成网页的开发。对于初学者来说，花几个小时阅读本书，就能快速地了解各个组件的用法，只要按照它的使用规则使用即可。
Bootstrap 3中文网：http://www.bootcss.com/
Bootstrap 3英文参考https://getbootstrap.com/
Bootstrap 4中文网：https://v4.bootcss.com/
Bootstrap 4英文参考：https://getbootstrap.com/docs/4.0/getting-started/introduction/
Bootstrap 4.2.1英文参考：https://getbootstrap.com/docs/4.2/getting-started/introduction/
Bootstrap所有版本：https://getbootstrap.com/docs/versions/第2章 使用最新的框架Bootstrap 4
为了帮助读者快速入门，本章主要介绍如何安装和使用Bootstrap，为后续深入学习Bootstrap奠定基础。2.1 下载Bootstrap
下载Bootstrap 4.2.1版本之前，先确保系统中是否准备好了一个网页编辑器，本书使用WebStorm软件。另外，读者应该对自己的网页水平进行初步评估，是否基本掌握HTML和CSS技术，以便在网页设计和开发中轻松学习和使用Bootstrap。
Bootstrap提供了几个快速上手的方式，每种方式都针对不同级别的开发者和不同的使用场景。Bootstrap压缩包包含两个版本，一个是供学习使用的完整版，另一个是供直接引用的编译版。
1）下载源码版Bootstrap 4.2.1
访问GitHub，找到Twitter公司的Bootstrap项目页面（https://github.com/twbs/bootstrap/），即可下载最新版本的Bootstrap压缩包，如图2-1所示。通过这种方式下载的Bootstrap压缩包，名称为bootstrap-master.zip，包含Bootstrap库中所有的源文件以及参考文档，它们适合读者学习和交流使用。
用户也可以通过访问https://getbootstrap.com/docs/4.2/getting-started/download/页面下载源码文件，如图2-2所示。图2-1 GitHub上下载Bootstrap压缩包图2-2 在官网下载Bootstrap源代码
2）下载编译版Bootstrap
如果希望快速地使用Bootstrap，可以直接下载经过编译、压缩后的发布版，访问https://getbootstrap.com/docs/4.2/getting-started/download/页面，单击Download按钮进行下载，下载文件名称为bootstrap-4.2.1-dist.zip，如图2-3所示。图2-3 在官网下载编译版的Bootstrap
编译版的Bootstrap文件仅包括CSS文件和JavaScript文件，Bootstrap 4中删除了字体图标文件。直接复制压缩包中的文件到网站目录，导入相应的CSS文件和JavaScript文件，即可在网站和网页中应用Bootstrap的内容。2.2 Bootstrap 的结构
下载Bootstrap 4.2.1压缩包，在本地进行解压，就可以看到压缩包中包含的Bootstrap文件结构，Bootstrap提供了编译和压缩两个版本的文件，下面针对不同的下载方式进行简单的说明。2.2.1 源码版Bootstrap文件结构
在2.1节中，如果按照第一种方法下载源码版Bootstrap，解压bootstrap-master.zip文件，就可以看到其中包含的所有文件，如图2-4所示。
Bootstrap 4.2.1源代码包中包含了预编译的CSS和JavaScript资源，以及源Sass、JavaScript、例子和文档，核心结构如图2-5所示，说明如下。（1）dist文件夹：包含了编译版Bootstrap 4.2.1包中的所有文件。（2）docs文件夹：是开发者文件夹。（3）examples文件夹：是Bootstrap例子文件夹。图2-4 源码文件结构图2-5 核心结构（4）scss文件夹：CSS源码文件夹。（5）js文件夹：JavaScript源码文件夹。
其他文件则是对整个BootStrap 4.2.1开发、编译提供支持的文件以及授权信息、支持文档。2.2.2 编译版Bootstrap文件结构
在2.1节中，如果按照第二种方法下载编译版Bootstrap，解压bootstrap.zip文件可以看到该压缩包中包含的所有文件，如图2-6所示。Bootstrap提供了两种形式的压缩包，在下载的压缩包内可以看到一些目录和文件，这些文件按照类别放在不同的目录内，并提供了压缩和未压缩两种版本。
其中bootstrap.*是预编译的文件，bootstrap.min.*是编译且压缩后的文件，用户可以根据需要选择引用。bootstrap.*.map格式的文件，是Source map文件，需要在特定的浏览器开发者工具下才可使用。注意所有的JavaScript插件都依赖jQuery库。因此jQuery必须在bootstrap.*.js之前引入，在package.json文件中可查看Bootstrap 4.2.1支持的jQuery版本，详见bootstrap-master.zip源码版压缩包。图2-6 编译版Bootstrap文件结构2.3 安装Bootstrap
Bootstrap 4.2.1压缩包下载到本地之后，就可以安装使用了，本节介绍两种方法安装Bootstrap框架。2.3.1 本地安装
移动设备优先，Bootstrap 4不同于历史版本，它首先为移动设备优化代码，然后用CSS媒体查询来扩展组件。为了确保所有设备的渲染和触摸效果，必须在网页的
区添加响应式的视图标签，代码如下：接下来安装Bootstrap，需要以下两步。
第1步：安装Bootstrap的基本样式，在
标签中，使用标签调用CSS样式，这是常见的一种调用方法。另外还需要包含一个viewportmeta标记来进行适当的响应行为。其中bootstrap.css是Bootstrap的基本样式，style.css是项目自定义的样式。注意调用必须遵从先后顺序。style.css是项目中的自定义样式，用来覆盖Bootstrap中的一些默认设置，便于开发者定制本地样式，所以必须在bootstrap.css文件后面引用。
第2步：CSS样式安装完成后，开始安装bootstrap.js文件。方法很简单，按照与CSS样式相似的引入方式，把bootstrap.js和jquery.js引入页面代码中即可。
其中jquery.js是jQuery库基础文件；Popper.js是一些Bootstrap插件依赖的文件，例如，弹窗插件、工具提示插件、下拉菜单插件等；bootstrap.js是Bootstrap的jQuery插件的源文件。JavaScript脚本文件建议置于文档尾部，即放置在
标签的前面。2.3.2 在线安装Bootstrap官网为Bootstrap构建了CDN加速服务，访问速度快、加速效果明显。读者可以在文档中直接引用，代码如下：
也可以使用另外一些CDN加速服务。例如，BootCDN为Bootstrap免费提供了CDN加速器。使用CDN提供的链接即可引入Bootstrap文件：2.4 案例实训1——设计网页按钮
Bootstrap安装完成后，我们结合一个示例来演示Bootstrap具体的使用方法。下面来设计一个按钮，操作步骤如下。
第1步：启动WebStorm开发工具，新建HTML 5文档，命名为index.html。设置网页标题为“Bootstrap模板”。
第2步：在index.html中引入Bootstrap相应的CSS和JavaScript文件。模板文档的详细代码如下：
第3步：模板设置完成后，可以开始使用Bootstrap开发任何网站和应用程序。使用标签输出一句“Hello world!”，然后给它添加Bootstrap样式btn，定义成按钮，然后设置其颜色为btn-primary类样式，外边距为.m-5类样式，代码如下： Hello world!
最后，在IE浏览器中运行，效果如图2-7所示。图2-7 按钮设计效果提示.m-5类样式用来设置元素外边距，具体的请参考第5章。2.5 案例实训2——设计网页轮播组件
轮播是页面中使用频率比较高的组件之一，要使用Bootstrap设计基本组件，需要满足两个条件。
■ 正确设计最基本的HTML结构。
■ 需要Bootstrap中的jQuery插件提供支持。
下面的示例演示如何设计一个简单的轮播效果，如图2-8所示。图2-8 应用轮播组件
利用前面一节介绍的方法完成页面基本结构创建，然后在页面中添加如下的轮播结构：
完成上面代码即可实现轮播效果，具体说明如下。
在上面的结构中，carousel类定义轮播包含框，carousel-indicators类定义轮播指示器包含框，carousel-inner类定义轮播图片包含框，carousel-caption类定义轮播图的标题和说明，carousel-control-prev类和carousel-control-next类定义两个控制按钮，用来控制播放行为。
其中data-ride="carousel"属性用于定义轮播在页面加载时就开始动画播放，data-slide="prev"和data-slide="next"属性用于激活按钮行为，active类定义轮播的活动项，slide类定义动画效果。
在指示器包含框中，data-target="#Carousel"属性指定目标包含容器为
在轮播图片包含框中，carousel-item类定义轮播项包含框，carousel-caption类定义标题和说明包含框。其中图片引用了.d-block和.w-100样式，以修正浏览器预设的图像对齐带来的影响。
控制按钮和指示图标必须具有与.carousel元素的id（Carousel）匹配的数据目标属性或链接的href属性。第3章 快速掌握Bootstrap 4布局
Bootstrap中的网格系统提供了一套响应式的布局解决方案，网格系统在Bootstrap 4中又得到了加强，从原先的4个响应尺寸变成了现在的5个，好处是可以根据你的屏幕大小来使相应的类生效，这样能更好地去适配不同的设备。本章主要介绍布局基础、网格系统和布局工具类等知识。3.1 布局基础
Bootstrap 4布局基础包括布局容器、响应断点、z-index堆叠样式属性，下面分别进行介绍。3.1.1 布局容器
Bootstrap中定义了两个容器类，分别为.container和.container-fluid。容器是Bootstrap中最基本的布局元素，在使用默认网格系统时是必需的。Container容器和container-fluid容器最大的不同之处在于宽度的设定。
Container容器根据屏幕宽度的不同，会利用媒体查询设定固定的宽度，当改变浏览器的大小时，页面会呈现阶段性变化。意味着Container容器的最大宽度在每个断点都发生变化。
.container类的样式代码如下：
在每个断点中，container容器的最大宽度如下代码所示：
container-fluid容器则会保持全屏大小，始终保持100%的宽度。container-fluid用于一个全宽度容器，当需要一个元素横跨视口的整个宽度时，可以添加.container-fluid类。
.container-fluid类的样式代码如下：
下面分别使用.container和.container-fluid类来创建容器。
在IE 11浏览器上显示效果如图3-1所示。图3-1 容器效果
注释：示例中的border、text-center、align-middle、py-5和bg-light等类，分别用来设置容器的边框、内容水平居中、垂直居中、上下内边距和背景色，这些样式类在后面的章节中将会具体介绍。提示虽然容器可以嵌套，但大多数布局不需要嵌套容器。
试读结束[说明：试读内容隐藏了图片]