《Bootstrap响应式Web前端开发》（慕课版）课后习题及答案
第1章
骗色1-1 简述什么是bootstrap是什么。
Bootstrap是全球最受欢迎的前端框架，用于开发响应式、移动设备优先的web项目。Bootstrap中预定义了一套CSS样式和与样式对应的jQuery代码，在应用该框架时，只需提供固定的HTML结构，并且为各元素添加bootstrap中提供的class名称，即可实现指定的效果。
1-2 从网格布局的角度讲，bootstrap4版本与bootstrap3的特点是什么？
与bootstrap3版本的网格布局相比，bootstrap4的网格布局与弹性布局相结合，所以，使用网格布局时，可以不用指定每一列的宽度，而bootstrap3版本则需要严格指定每一列的宽度。
1-3 bootstrap的优点有哪些？
Bootstrap主要有以下优点：
（1）含有多中常用样式和功能，且占用资源小，可以提高开发效率。
（2）移动设备优先：自bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式。
什么是酸根离子（3）浏览器支持：所有的主流浏览器（包括IE、Chrome、Safari、Firefox、opera）都支持bootstrap。
（4） 容易上手：要使用bootstrap框架，您只需具备HTML、CSS的基础知识就可以学习bootstrap。
（5）响应式设计：bootstrap的响应式CSS能够自适应于台式机、平板电脑和手机等设备的屏幕。
1-4 简述bootstrap1版本至bootstrap4，各版本的特点。
（1）bootstrap 1
2011年8月，Twitter推出了快速搭建网页应用的轻量级前端开发工具bootstrap。它由动态CSS语言less写成，经过编译后，bootstrap就是众多CSS的合集。
（2）bootstrap 2
Bootstrap2最大的改变在于添加12网格的响应式布局，除此之外，它还增加了一些新样式，并且还修改了一些网页元素的默认样式，同时修改了上一版本中的一些错误，以及完善了说明文档。
（3）bootstrap 3
Bootstrap 3版本简化页面组织以及增加和删除的部分组件，同时改进了网格系统，以及不在支持IE其提供支持的工具，以及增加和删除了布局2013年3月，bootstrap发7和Firefox3.6等。
（4）bootstrap 4
bootstrap4是一项几乎涉及每行代码的大型工作，其更新的内容比较多，包括改进网格系统、它的特点主要包括：支持flexbox、改进网格系统、增加以及删除部分组件，以及新增边距。填充等施工工具。
1-5 创建一个HTML文件，然后按顺序引用bootstrap相关文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta chart="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>Title</title>
<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
</head>
<body>
<script type="text/javascript" src="js/jQuery-v3.4.0.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
第2章
2-1 为元素添加bootstrap中的标题样式的方法有哪些？
有两种，第一种为直接使用标题标签，如<h1>标签，第二种则是在文字标签中添加对应标题的类名，如<p class=”h1”></p>
2-2 bootstrap可以设置的最大内间距的尺寸为多少？如果设置元素水平方向的外间距为1rem，需要添加的类名为什么？
Bootstrap可以设置的最大内间距为3rem，设置元素水平方向的外间距为1rem，需要添加的类名为mx-3.
2-3 bootstrap中预设的元素的背景样式有哪些？
bootstrap中预设的元素的背景样式有十个，分别是.bg-primary、.bg-condary、.bg-success、.bg-danger、.bg-warning、.bg-info、.bg-light、.bg-dark、.bg-white、.bg-transparent
2-4 bootstrap中添加与清除表格的边框分别是通过什么类名？
添加边框是通过table-bordered，清除边框是通过table-borderless
2-5 如何设置文字为斜体样式？
神舟12号设置斜体样式的类名为：font-italic。
2-6 如何将文字中的英文转换为大写？如何转换为小写？
将英文转换为大写，所添加的类名为：text-upperca，转换为小写，所添加的类名为：text-lowerca
第3章
人生目标规划3-1 响应式网页的特点是什么
响应式网页设计是目前流行的一种网页设计形式，其主要特点是页面布局能够根据不同的设备（智能手机、平板电脑以及台式电脑等）调整网页内容的布局，从而让用户在不同的设备上都能友好地浏览网页。
3-2 常见的布局方式有哪些？
常见的布局方式有三种，分别是单一固定布局、均分多列布局和不均分多列布局。其中单一固定布局适合内容较少的网站布局，一般由顶部的Logo和菜单（一行）、中间的内容区（一行）和底部的网站相关信息（一行），共3行组成；均分多列布局通常为列数大于等于2列的布局类型。每列宽度相同，列与列间距相同，适合商品或图片的列表等；而不均分多列布局指列数大于等于老人临终前的忌讳2列的布局类型。每列宽度不同，列与列间距不同
3-3 弹性布局是什么？其特点是什么？
弹性盒是CSS3中的一种新的布局模式，其特点就是当页面需要适应不同的屏幕大小或设备类型时，该布局能够确保元素拥有恰当的行为。该布局方式能够更有效的对容器中的子元素进行排列、对齐以及分配空白空间等。
3-4 弹性布局项目在主轴上的对齐方式有哪些？对应的bootstrap中的类名是什么？
弹性项目在主轴上的对齐方式主要有5种，分别是从起始位置开始排列（justify-content-start）、从中间位置开始排列（justify-content-center）、从结束位置开始排列（justify-content-end）、项目之间等间距排列（justify-content-between）、项目两侧以及项目之间等间距排列（justify-content-around）。
3-5 弹性项目在侧轴上的对齐方式有哪些？对应的bootstrap中的类名是什么？
弹性项目在侧轴上的对齐方式主要有5种，分别是从起始位置开始排列（align-items-start）、从中间位置开始排列（出国留学出国留学align-items-center）、从结束位置开始排列（align-items-end）、拉伸以适应容器（align-items-stretch）、元素与容器基线位置对齐（align-items-baline）。
3-6 什么是flex-wrap?其属性值有哪些？
flex-wrap规定弹性盒中的元素元素在必要的时候是否拆行显示，以及拆行显示的话，拆行的顺序。其属性值包括nowrap(不拆行显示)、wrap（必要时拆行显示）、wrap-rever（
规定项目必要时拆行显示，但是以相反的顺序）以及initial（设置为默认值）、inherit（从父元素继承该属性）。
3-7 bootstrap中如何自定义某个弹性项目在纵轴上的对齐方式？
Bootstrap中自定义弹性项目在纵轴上的对齐方式时，需要为该弹性项目添加align-lf-*，具体可以是align-lf-start、align-lf-center、align-lf-end、align-lf-baline、align-lf-stretch
第4章
4-1 简述网格系统的作用原理。
简单的说，网格系统就是将网页的总宽度分为12等份，开发人员可以自由的分配项目中的列所占的份数，
4-2 网格系统中设置列的宽度有哪几种方法？
一共有三种。第一种：col-{数字1~12}，表示该项目占据该行的多少格；第二种，直接添加
类名col，表示该行的.col平分剩余的空间；第三种:添加类名col-auto，表示其宽度正好能适应内容。
4-3 对项目进行换行有哪几种方式？
有两种方式，第一种方式是将下一行的内容添加到.row中，第二种方式是添加一个div并且添加类名.w-100。
科目一考题
4-4 对项目进行偏移有哪几种方式？
有两种方式，第一种是通过margin进行想左偏移或者向右偏移，具体是添加类名.mr-auto或者.ml-auto，第二种是通过offt-{1~11}，具体规定项目偏移的尺寸
4-5 bootstrap 4中定义了哪几个尺寸范围的屏幕等级，如何定义这些等级的屏幕中列的宽度？
定义了5个屏幕宽度，从小到大依次是超小屏（屏幕水平宽度<576px），定义该屏幕范围内列的宽度通过类名.col-*；次小屏（屏幕水平宽度≥576px），定义该屏幕范围内列的宽度
通过类名col-sm-*；中等屏（屏幕水平宽度≥768px），定义该屏幕范围内列的宽度通过类名col-md-*；大屏（屏幕水平宽度≥992px），定义该屏幕范围内列的宽度通过类名col-xl-*；超大屏（屏幕水平宽度≥1200px），定义该屏幕范围内列的宽度通过类名col-lg-*；
第5章
5-1 使用bootstrap设置垂直排列的按钮组时，需要为按钮组的父元素添加的类名是什么？
在父元素上添加类名.btn-group-vertical即可。
芙蓉鲫鱼5-2 bootstrap中下拉菜单的展开方向有哪几个，对应的类名是什么？
有四个，分别是向上展开（类名为.dropup）、向下展开（类名为.dropdown）、向左展开（.dropleft）和向右展开（.dropright）
