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）：实现图片播放功能的插件。