前端期末考试试题及参考答案(08)

Posted 2023-01-11 谷哥的小弟

---

版权声明

• 本文原创作者：谷哥的小弟
• 作者博客地址：http://blog.csdn.net/lfdfhl

---

一、 填空题

1. 在BootStrap中，表单、分页等都属于Bootstrap的______。
2. Bootstrap是由______公司的设计师开发的一个前端开源框架。
3. 在页面引入html5shiv.min.js，用于让低版本的浏览器支持______元素。
4. Bootstrap包中为我们提供了两个容器类______和______。
5. Bootstrap创建内联表单，只需要在垂直表单的基础上，为标签添加______类。

二、 判断题

1. Bootstrap表单中的堆叠表单为默认样式。（ ）
2. 使用.container-fluid类进行布局时，默认显示黑色边框。（ ）
3. 使用Bootstrap进行开发时，除Bootstrap包中提供的内容外，不需要引入其他包。（ ）
4. Bootstrap基于HTML、CSS、javascript等前端技术实现的。（ ）
5. Bootstrap的栅格系统默认将父元素分成12等份，所以可根据占据的份数来设置子元素的宽度。（ ）

三、 选择题

1. 下列选项中，属于Bootstrap默认表单的是（ ）。
   A. 内联表单 B. 水平表单 C. 堆叠表单 D. 外联表单
2. 当网页中某个模块需要占据100%视口的宽度时，使用哪个容器类（ ）。
   A. .container-fluid B. .container-all C. .container D. .all
3. 下列选项中，不支持使用Bootstrap定义按钮的标签是（ ）。
   A. < a>标签 B. < button>标签 C. < image>标签 D. < input>标签
4. Bootstrap栅格系统中，大于多少列需要另起一行（ ）。
   A. 5 B. 10 C. 12 D. 8
5. 在Bootstrap中，为按钮添加基本样式的类是（ ）。
   A. .btn-default类 B. .btn-info类 C. .btn-primary类 D. .btn类

四、 简答题

1. 请简述Bootstrap有哪些特点。
2. 请简述Bootstrap中布局容器的概念。

参考答案

一、 填空题

• 组件
• Twitter
• HTML5
• .container .container-fluid
• .form-inline

二、 判断题

• 对
• 错
• 错
• 对
• 对

三、 选择题

• C
• A
• C
• C
• D

四、 简答题

1、请简述Bootstrap有哪些特点。

• Less被Sass所替代，编译速度更快。
• Bootstrap 4的CSS预处理器由Sass取代了之前的Less。这是因为Sass的开发者社区日渐扩大，因此Bootstrap开发团队更青睐于Sass。
• 重构了CSS代码，避免使用标签选择符与子元素选择符。
• 使用rem和em单位来代替px单位，更加适合设计响应式布局。
• 改进了网格系统，新增一个网格层适配移动设备，并整顿语义混合，更好地适配移动端设备。
• 使用ES6重写了所有插件，提供UMD支持等特性。
• 支持弹性盒模型，可以利用Flexbox来快速布局。

2、请简述Bootstrap中布局容器的概念。

布局容器是Bootstrap中最基本的布局元素，在使用默认网格系统时，布局容器是必需的。它用于在其中容纳、填充一些内容，以及有时需要使内容居中。

Bootstrap中提供了.container类和.container-fluid布局容器类，这两种容器类最大的不同之处在于宽度的设定。前者可以根据屏幕宽度的不同，利用媒体查询设定固定的宽度，当浏览器窗口大小改变时，页面效果也会随之发生改变。后者在不同设备下始终保持宽度为100%，如果一个元素需要占据全部视口时可以使用.container-fluid类。