前端面试题-Bootstrap

1 什么是Bootstrap?以及为什么要使⽤Bootstrap?

  • Bootstrap 是⼀个⽤于快速开发 Web 应⽤程序和⽹站的前端框架。 Bootstrap 是基于 HTML 、 CSS 、 JAVASCRIPT 的
  • Bootstrap 具有移动设备优先、浏览器⽀持良好、容易上⼿、响应式设计等优点,所以Bootstrap 被⼴泛应⽤

2 使⽤Bootstrap时,要声明的⽂档类型是什么?以及为什么要这样声明?

  • 使⽤ Bootstrap 时,需要使⽤ HTML5 ⽂档类型( Doctype )。
  • 因为 Bootstrap 使⽤了⼀些 HTML5 元素和 CSS 属性,如果在 Bootstrap 创建的⽹⻚开头不使⽤ HTML5 的⽂档类型( Doctype ),可能会⾯临⼀些浏览器显示不⼀致的问题,甚⾄可能⾯临⼀些特定情境下的不⼀致,以致于代码不能通过 W3C 标准的验证

3 什么是Bootstrap⽹格系统

Bootstrap 包含了⼀个响应式的、移动设备优先的、不固定的⽹格系统,可以随着设备或视⼝⼤⼩的增加⽽适当地扩展到 12 列。
它包含了⽤于简单的布局选项的预定义类,也包含了⽤于⽣成更多语义布局的功能强⼤的混合类
  • 响应式⽹格系统随着屏幕或视⼝( viewport )尺⼨的增加,系统会⾃动分为最多 12列。

4 Bootstrap ⽹格系统(Grid System)的⼯作原理

(1)⾏必须放置在 .container class 内,以便获得适当的对⻬( alignment )和内边距( padding )。
(2)使⽤⾏来创建列的⽔平组。
(3)内容应该放置在列内,且唯有列可以是⾏的直接⼦元素。
(4)预定义的⽹格类,⽐如 .row 和 .col-xs-4 ,可⽤于快速创建⽹格布局。 LESS混合类可⽤于更多语义布局。
(5)列通过内边距( padding )来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距( margin )取负,表示第⼀列和最后⼀列的⾏偏移。
(6)⽹格系统是通过指定您想要横跨的⼗⼆个可⽤的列来创建的。例如,要创建三个相等的列,则使⽤三个 .col-xs-4

5 对于各类尺⼨的设备,Bootstrap设置的class前缀分别是什么

  • 超⼩设备⼿机( <768px ): .col-xs-*
  • ⼩型设备平板电脑( >=768px ): .col-sm-*
  • 中型设备台式电脑( >=992px ): .col-md-*
  • ⼤型设备台式电脑( >=1200px ): .col-lg-*

6 Bootstrap ⽹格系统列与列之间的间隙宽度是多少

间隙宽度为 30px (⼀个列的每边分别是 15px )

7 如果需要在⼀个标题的旁边创建副标题,可以怎样操作

在元素两旁添加  ,或者添加 .small 的 class

8 ⽤Bootstrap,如何设置⽂字的对⻬⽅式?

  • class=“text-center” 设置居中⽂本
  • class=“text-right” 设置向右对⻬⽂本
  • class=“text-left” 设置向左对⻬⽂本

9 Bootstrap如何设置响应式表格?

增加 class="table-responsive"

10 使⽤Bootstrap创建垂直表单的基本步骤?

(1)向⽗

元素添加 role=“form” ;
(2)把标签和控件放在⼀个带有 class=“form-group” 的
中,这是获取最佳间距所必需的;
(3)向所有的⽂本元素