bootstrap常见的面试题

1、  如果让一个元素在pc端显示而在手机端隐藏，下列选项正确的是（b）。

A、 visible-xs-8  hidden-md

B、 visible-md-8 hidden-xs

C、 visible-md-8 hidden-sm

D、 visible-sm-8 hidden-md

　　详解：

　　a、 超小屏幕（<768px）显示，中屏（>=992px）隐藏，所以错误

　　b、 中屏（>=992px）显示，超小屏幕（<768px）隐藏，所以正确

　　c、 中屏（>=992px）显示，小屏幕（>=768px）隐藏，所以错误

　　d、 小屏幕（>=768px）显示，中屏（>=992px）隐藏，所以错误

2、 在bootstrap中，下列的类（c）可以使一个元素在打印使隐藏。

　　A、visible-print-block

　　B、 visible-print-inline

　　C、 hidden-print

　　D、   print-hidden

　　详解：

　　　　a、 浏览器：隐藏。打印机：可见。

　　　　b、 浏览器：隐藏。打印机：可见。

　　　　c、 浏览器：可见。打印机：隐藏。

　　　　d、 Bootstrap的打印类里面没有这个类。

3、 在bootstrap中，栅格系统的标准用法（c）是错误的。

　　A、<div class="container"><div class="row"></div></div>

　　B、 <div class="row"><div class="col-md-1"></div></div>

　　C、 <div class="row"><div class="container"></div></div>

　　D、   <div class="col-md-1"><div class="row"></div></div>

　　详解：

　　　　a、 .row的行必须包含在.container的容器中，所以正确。

　　　　b、 在.row的行中可以添加.column的列，所以正确

　　　　c、 .row的行必须包含在.container的容器中，所以错误。

　　　　d、 在.column的列中可以嵌套.row的行，所以正确。

4、 下列（d）不是正确的辅助类。

　　A、.text-muted。

　　B、 .text-danger。

　　C、 .tex-success。

　　D、   .text-title。

　　详解：正确的辅助类有：

　　　　a、  text-muted/text-primary/text-success/text-info/text-warning/text-danger

　　　　b、  text-muted/text-primary/text-success/text-info/text-warning/text-danger

　　　　c、  text-muted/text-primary/text-success/text-info/text-warning/text-danger

　　　　d、  text-muted/text-primary/text-success/text-info/text-warning/text-danger

5、 在bootstrap中，关于弹性布局的属性错误的是（d）。

A、flex

B、 flex-direction

C、 justify-content

D、   flex-container

　　详解：

　　　　a、 flex：伸缩性

　　　　b、 flex-direction：伸缩流动性

　　　　c、 justify-content：主轴对齐

　　　　d、 flex-wrap：伸缩换行，不是flex-container，没有这个方法

6、 在bootstrap中，关于flex-direction属性值错误的是（a）。

A、col

B、 row

C、 row-reverse

D、   column-reverse

　　详解：

　　　　a、 应该是：column（元素从上到下排列）。所以错误。

　　　　b、 row：默认值，元素从左到右排列。正确。

　　　　c、 row-reverse：元素从右到左排列。正确。

　　　　d、 column-reverse：元素从下到上排列。正确。

7、 在bootstrap中，关于flex-wrap属性值错误的是（b）。

A、nowrap

B、colwrap

C、wrap

D、wrap-reverse

　　详解：

　　　　a、nowrap：默认值，伸缩容器单行显示，伸缩项目不会换行。所以正确

　　　　b、没有这个属性值，所以错误。

　　　　c、wrap：伸缩容器多行显示，伸缩项目会换行。所以显示正确。

　　　　d、wrap-reverse：伸缩容器多行显示，伸缩项目会换行，且颠倒行顺序。正确。

8、 在bootstrap中，关于justify-content属性值错误的是（c）。

A、flex-start

B、flex-end

C、middle

D、space-between

　　详解：

　　　　a、flex-start：向一行的起始位置靠齐，所以正确。

　　　　b、flex-end：向一行的结束位置靠齐，所以正确。

　　　　c、应该是center：向一行的中间位置靠齐，所以错误。

　　　　d、space-between：平均分布在行内，第一个伸缩项目在一行的最开始。最后一个伸缩项目在一行的最终点，所以正确。

9、 在bootstrap中，关于align-items属性值错误的是（d）。

A、flex-start

B、flex-end

C、center

D、underline

　　详解：

　　　　a、flex-start：在侧轴起点的外边距紧靠该行在侧轴起始边，所以正确。

　　　　b、flex-end：在侧轴终点边的外边距紧靠该行在侧轴终点边，所以正确。

　　　　c、center：外边距盒在该行的侧轴上居中放置，所以正确。

　　　　d、应该是baseline：根据第一行文字的基线对齐，所以错误。

10、 在bootstrap中，（b）不是媒体查询类型的值。

A、all

B、speed

C、handheld

D、print

　　详解：

　　　　a、所有设备，所以正确。

　　　　b、不是媒体查询类型的值，所以错误。

　　　　c、便携设备，所以正确。

　　　　d、打印用纸或打印预览视图，所以正确。

11、 在bootstrap中，（）不是媒体特性的属性。

A、device-width

B、width

C、background

D、orientation

　　详解：

　　a、device-width：设置屏幕的输出宽度，所以正确。

　　b、width：渲染界面的宽度，所以正确。

　　c、应该是color：设置每种色彩的字节数，所以错误。

　　d、orientation：设置是是横屏或者竖屏，所以正确。

12、 在bootstrap中，（c）是错误的媒体查询的写法。

A、@media all and (min-width:1024px) { };

B、@media all and (min-width:640px) and (max-width:1023px) { };

C、@media all and (min-width:320px) or (max-width:639px) { };

D、@media screen and (min-width:320px) and (max-width:639px) { };

　　详解：

　　　　a、屏幕分辨率大于1024px，所以正确。

　　　　b、屏幕介于640px和1023px之间，所以正确。

　　　　c、Bootstrap的媒体查询中没有or关键词，所以错误。

　　　　d、屏幕介于320px和639px之间，所以正确。

13、 在bootstrap中，（b）不属于栅格系统的实现原理。

A、自定义容器的大小。平均分为12份

B、基于JavaScript开发的组件

C、结合媒体查询

D、调整内外边距

　　详解：

　　　　a) 可以自定义，分了12份。俗称12栅格系统，所以正确。

　　　　b) 基于jQuery开发的组件，所以错误。

　　　　c) 是实现流式布局的关键所在，所以正确。

　　　　d) Margin-left/margin-right： 15px；所以正确。

14、 在bootstrap中，关于响应式栅格系统（a）的描述是错误的。

A、.col-sx-：超小屏幕（<768px）。

B、.col-sm-：小屏幕、平板（>=768px）。

C、.col-md-：中等屏幕（>=992px）。

D、.col-lg-：大屏幕（>=1200px）。

　　详解：

　　　　a) col-xs-：超小屏幕，所以错误。

　　　　b) small，所以正确。

　　　　c) middle，所以正确。

　　　　d) large，所以正确。

15、 在bootstrap中，以下的（b）不是文本对其的方式。

A、.text-left

B、.text-middle

C、.text-right

D、text-justify

　　详解：

　　　　a) 左对齐用text-left，所以正确

　　　　b) 居中用text-center，所以错误

　　　　c) 右对齐用text-right，所以正确

　　　　d) 两端对齐用text-justify，所以正确

16、 在bootstrap中，下列（c）不属于验证提示状态的类。

A、.has-warning

B、.has-error

C、.has-danger

D、.has-success

　　详情：

　　　　a) .has-warning：警告（黄色）。所以正确。

　　　　b) .has-error：错误（红色）。所以正确。

　　　　c) 验证提示状态没有这个类。所以错误。

　　　　d) .has-success：成功（绿色）。所以正确。

17、 在bootstrap中，（d）不属于媒体查询的关键词。

A、and

B、not

C、only

D、or

　　详解：

　　　　a) and：同时满足这两者时生效，到达限定范围，所以正确。

　　　　b) not：排除某种指定的媒体类型，即排除符合表达式的设备，所以正确。

　　　　c) only：指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器，所以正确。

　　　　d) or：不是媒体查询的关键字，所以正确。

18、 在bootstrap中，下列（b）不属于按钮尺寸。

A、.btn-lg

B、.btn- md

C、.btn-sm

D、.btn-xs

　　详情：

　　　　a) .btn-lg：大按钮，所以正确

　　　　b) .btn-default：默认尺寸，所以错误

　　　　c) .btn-sm：小按钮，所以正确

　　　　d) .btn-xs：超小按钮，所以正确

19、 在bootstrap中，下列（b）类不属于button的预定义样式。

A、.btn-success

B、.btn-warp

C、.btn-info

D、.btn-link

　　详情：

　　　　a) .btn-success：成功信息，所以正确。

　　　　b) Bootstrap中的button预定义样式没有这个类，所以错误。

　　　　c) .btn-info：一般信息，所以正确。

　　　　d) .btn-link：链接信息，所以正确。

20、 在bootstrap中，下列（）不属于图片处理的类。

A、.img-rounded

B、.img-circle

C、.img-thumbnail

D、.img-radius

　　详情：

　　　　a) .img-rounded，border-radius：6px；正确

　　　　b) .img-circle，border-radius：50%；正确

　　　　c) .img-thumbnail，border-radius：4px, border: 1px solid #ddd;正确

　　　　d) Bootstrap中的图片没有这个类。错误