Bootstrap是目前最受欢迎的前端框架之一，Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。随着Bootstrap的火热，各大公司的面试题中Bootstrap出现的频率也越来越高。

1.什么是Bootstrap网格系统（Grid System）？

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。

2.doctype（文档类型）的作用是什么？知道多少种文档类型？

此标签可告知浏览器文档使用哪种HTML或XHTML规范。该标签可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的HTML文档。

HTML 4.01规定了三种文档类型：Strict、Transitional以及Frameset。

XHTML 1.0规定了三种XML文档类型：Strict、Transitional以及Frameset。

Standards（标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

3.data-属性的作用是什么？

属性用于存储页面或应用程序的私有自定义数据。

data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。

存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验。

4.用过媒体查询，或针对移动端的布局/CSS吗？

媒体查询，就是响应式布局。通过不同的媒介类型和条件定义样式表规则。媒介查询让CSS可以更精确作用于不同的媒介类型和同一媒介的不同条件。

语法结构及用法：@media 设备名 only （选取条件） not （选取条件） and（设备选取条件），设备二{sRules}。

5.对于各类尺寸的设备，Bootstrap设置的class前缀分别是什么？

超小设备手机（<768px）：.col-xs-

小型设备平板电脑（>=768px）：.col-sm-

中型设备台式电脑（>=992px）：.col-md-

大型设备台式电脑（>=1200px）：.col-lg-

6.使用Bootstrap创建垂直表单的基本步骤？

（1）向父<form>元素添加role="form"；

（2）把标签和控件放在一个带有class="form-group"的<div>中，这是获取最佳间距所必需的；

（3）向所有的文本元素<input>、<textarea>、<select>添加class="form-control"。

7.Bootstrap有哪些关于<img>的class？

（1）.img-rounded 为图片添加圆角

（2）.img-circle 将图片变为圆形

（3）.img-thumbnail 缩略图功能

（4）.img-responsive 图片响应式 (将很好地扩展到父元素)

8.Bootstrap中有关元素浮动及清除浮动的class？

（1）class="pull-left" 元素浮动到左边

（2）class="pull-right" 元素浮动到右边

（3）class="clearfix" 清除浮动

9.Bootstrap如何制作按钮组？以及水平按钮组和垂直按钮组的优先级？

（1）用class="btn-group"的<div>去包裹按钮组；class="btn-group-vertical"可设置垂直按钮组。

（2）btn-group的优先级高于btn-group-vertical的优先级。

10.Bootstrap中的输入框组如何制作？

（1）把前缀或者后缀元素放在一个带有class="input-group"中的<div>中；

（2）在该<div>内，在class="input-group-addon"的<span>里面放置额外的内容；

（3）把<span>放在<input>元素的前面或后面。

以上就是动力节点在线为大家精挑细选的10道Bootstrap面试题，倘若我们能够吃透这些面试题中涉及到的各个Bootstrap知识点，那么我们在未来的面试中也就畅通无阻了！