Bootstrap - 模拟测试

本节提供与Bootstrap框架相关的各种模拟测试。您可以将这些模拟测试样本下载到本地计算机，并在方便时离线解答。每个模拟测试都附带答案，以便您可以验证最终分数并进行自我评估。

Bootstrap 模拟测试一

题 1 - 关于 Bootstrap，以下哪项说法正确？

A - Bootstrap 是一个简洁、直观且功能强大的移动优先前端框架，可以加快并简化 Web 开发。

B - 它使用 HTML、CSS 和 Javascript。

C - Bootstrap 由 Mark Otto 和 Jacob Thornton 在 Twitter 开发。

D - 以上都正确。

答案：D

解释

以上所有选项都正确。

题 2 - 关于 Bootstrap，以下哪项说法正确？

A - Bootstrap 的响应式 CSS 可以适应桌面电脑、平板电脑和移动设备。

B - 为开发者构建界面提供了一种简洁统一的解决方案。

C - 它包含美观且功能强大的内置组件，易于定制。

D - 以上都正确。

答案：D

解释

以上所有选项都正确。

题 3 - 以下哪项是 Bootstrap 移动优先策略的一部分？

A - 内容：确定最重要的内容。

B - 布局：先为较小的宽度设计。基础 CSS 首先针对移动设备；媒体查询针对平板电脑和桌面电脑。

C - 渐进增强：随着屏幕尺寸的增加添加元素。

D - 以上都正确。

答案：D

解释

以上所有选项都正确。

题 4 - 关于 Bootstrap 网格系统，以下哪项说法正确？

A - 行必须放在 .container 类中才能实现正确的对齐和填充。

B - 使用行创建水平的列组。

C - 内容应放在列中，并且只有列可以作为行的直接子元素。

D - 以上都正确。

答案：D

解释

以上所有选项都正确。

题 5 - 关于 Bootstrap 网格系统，以下哪项说法正确？

A - 提供了预定义的网格类，例如 .row 和 .col-xs-4，可以快速创建网格布局。LESS 混合器也可以用于更语义化的布局。

B - 列通过填充创建间距（列内容之间的间隙）。该填充在行的第一列和最后一列中通过 .rows 上的负边距进行抵消。

C - 网格列是通过指定要跨越的十二个可用列中的数量来创建的。例如，三个相等的列将使用三个 .col-xs-4。

D - 以上都正确。

答案：D

解释

以上所有选项都正确。

题 6 - 关于 Bootstrap 媒体查询，以下哪项说法正确？

A - 媒体查询是一个非常花哨的术语，指的是“条件 CSS 规则”。

B - 它只是根据规定的某些条件应用一些 CSS。如果满足这些条件，则应用样式。

C - 以上都正确。

D - 以上都不正确。

答案：C

解释

以上两个选项都正确。

题 7 - 关于 Bootstrap 媒体查询，以下哪项说法正确？

A - 媒体查询有两个部分：设备规范和尺寸规则。

B - Bootstrap 中的媒体查询允许您根据视口大小移动、显示和隐藏内容。

C - 以上都正确。

D - 以上都不正确。

答案：C

解释

以上两个选项都正确。

题 8 - 关于 Bootstrap 移动优先策略，以下哪项说法正确？

A - 您需要将视口元标记添加到元素中，以确保在移动设备上正确渲染和触摸缩放。

B - width 属性控制设备的宽度。将其设置为 device-width 将确保它在各种设备（移动设备、桌面电脑、平板电脑……）上正确渲染。

C - initial-scale=1.0 确保加载时，您的网页将以 1:1 的比例渲染，并且不会应用任何缩放。

D - 以上都正确。

答案：D

解释

以上所有选项都正确。

题 9 - 关于 Bootstrap 响应式图片，以下哪项说法正确？

A - Bootstrap 3 允许您通过向 <.img> 标记添加类 ..img-responsive 来使图片具有响应性。

B - ..img-responsive 类将 max-width: 100%; 和 height: auto; 应用于图像，以便它可以很好地缩放为父元素。

C - 以上都正确。

D - 以上都不正确。

答案：C

解释

以上两个选项都正确。

题 10 - 关于 Bootstrap 跨浏览器一致性，以下哪项说法正确？

A - Bootstrap 使用 Normalize 来建立跨浏览器一致性。

B - Normalize.css 是现代的、支持 HTML5 的 CSS 重置替代方案。

C - Normalize.css 是一个小的 CSS 文件，它在 HTML 元素的默认样式中提供了更好的跨浏览器一致性。

D - 以上都正确。

答案：D

解释

以上所有选项都正确。

题 11 - 以下哪个类将表格样式化为一个不错的基本表格，只有一些轻微的填充和水平分隔线？

答案：A

解释

如果您想要一个不错的基本表格样式，只有一些轻微的填充和水平分隔线，请向任何表格添加 .table 的基础类。

题 12 - 以下哪个类将表格样式化为一个不错的基本表格，并在行上带有条纹？

答案：B

解释

通过添加 .table-striped 类，您将在 <tbody> 内的行上获得条纹。

题 13 - 以下哪个类将表格样式化为带有围绕每个元素的边框和整个表格周围的圆角的表格？

答案：C

解释

通过添加 .table-bordered 类，您将获得围绕每个元素的边框和整个表格周围的圆角。

题 14 - 以下哪个类在光标悬停在行上时，会在行上添加浅灰色背景？

答案：D

解释

通过添加 .table-hover 类，在光标悬停在行上时，将向行添加浅灰色背景。

题 15 - 以下哪个类将悬停颜色应用于表格的特定行或单元格？

答案：A

解释

.active − 将悬停颜色应用于特定行或单元格。

题 16 - 以下哪个类表示成功或积极的操作？

答案：B

解释

.success − 表示成功或积极的操作。

题 17 - 以下哪个类表示可能需要关注的警告？

答案：C

解释

.warning − 表示可能需要关注的警告。

题 18 - 以下哪个类表示危险或潜在的负面操作？

答案：D

解释

.danger − 表示危险或潜在的负面操作。

题 19 - 以下哪个类可用于创建响应式表格？

A - .table-responsive

B - .responsive

C - .active

D - .table

答案：A

解释

通过将任何 .table 包裹在 .table-responsive 类中，您将使表格在小型设备（小于 768 像素）上水平滚动。在宽度大于 768 像素的任何设备上查看时，您将不会看到这些表格的任何区别。

Q 20 - Bootstrap表单的默认布局是以下哪一项？

答案：A

解释

垂直或基本表单：Bootstrap自带的基本表单结构。

Q 21 - 要使表单内联显示，需要向表单标签添加以下哪个类？

答案：B

解释

要创建一个所有元素都内联显示、左对齐且标签位于旁边的表单，请向<form>标签添加.form-inline类。

Q 22 - 要使表单水平显示，需要向表单标签添加以下哪个类？

答案：B

解释

要创建使用水平布局的表单，请向父元素添加.form-horizontal类。

Q 23 - 关于Bootstrap帮助文本，以下哪一项是正确的？

A - Bootstrap表单控件可以包含一个与输入项一起显示的块级帮助文本。

B - 要添加一个全宽的内容块，请在<input>之后使用.help-block。

C - 以上都正确。

D - 以上都不是。

答案：C

解释

以上两个选项都正确。

Q 24 - 以下哪个Bootstrap按钮样式可以创建默认/标准按钮？

答案：A

解释

.btn − 默认/标准按钮。

Q 25 - 以下哪个Bootstrap按钮样式可以提供额外的视觉权重，并在按钮组中标识主要操作？

答案：B

解释

.btn-primary − 提供额外的视觉权重，并在按钮组中标识主要操作。

答案表

题号	答案
1	D
2	D
3	D
4	D
5	D
6	B
7	B
8	D
9	B
10	D
11	A
12	A
13	B
14	D
15	A
16	A
17	B
18	D
19	A
20	A
21	A
22	A
23	B
24	A
25	A

下载

bootstrap_questions_answers.htm

打印页面

题号	答案
1	D
2	D
3	D
4	D
5	D
6	B
7	B
8	D
9	B
10	D
11	A
12	A
13	B
14	D
15	A
16	A
17	B
18	D
19	A
20	A
21	A
22	A
23	B
24	A
25	A

题号	答案
1	D
2	D
3	D
4	D
5	D
6	B
7	B
8	D
9	B
10	D
11	A
12	A
13	B
14	D
15	A
16	A
17	B
18	D
19	A
20	A
21	A
22	A
23	B
24	A
25	A

题号	答案
1	D
2	D
3	D
4	D
5	D
6	B
7	B
8	D
9	B
10	D
11	A
12	A
13	B
14	D
15	A
16	A
17	B
18	D
19	A
20	A
21	A
22	A
23	B
24	A
25	A