Bootstrap 测试题

4个月前 ⋅ 0
  1. Bootstrap是什么？

 

答案：
一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。
（1）简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集。
（2）基于html5、css3的bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档。
（3）自定义JQuery插件，完整的类库，基于Less等。
  1. 如何使用bootstrap?

  

答案：
1.首先下载bootstrap源码  
2.在页面中head标签内引入bootstrap.css,在body标签中引入jquery.js及bootstrap.js,因为bootstrapjs操作是基于jquery方法实现的
3.接下来可以引入自己的css样式文件和js文件
  1. 一般我们在利用bootstrap进行布局时习惯在wrapper内嵌套class名为container的div，那么在利用bootstrap过程中，设置container有什么效果呢？

 

答案：居中，设置container  class名 可以让包含在container  中的子元素自适应居中
  1. 在bootstrap中我们如何使用字体图标

 

答案：
可以通过span标签设置class名来使用字体图标：<span class="glyphicon glyphicon-search"></span>
解析：
我们在使用字体图标引入时需要引入字体文件，字体文件在bootstrap源码中，当我们设置了指定的class类名，就会找到文件下边的字体图标，需要注意在引入bootstrap时需要引入整个bootstrap文件夹，不是只引入css及js文件，要不然在使用过程中会出现问题。
  1. bootstrap中有非常强大的栅格系统，那么栅格系统的实现原理是什么？

 

答案：
栅格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。
  1. 你来猜测一下 栅格系统中设置class名为.col-md-3，在css源码中是如何实现的？

 

利用百分比实现
.col-md-3 {
    width: 25%;
}
解析：栅格系统总共分12份，即col-md-3每一列占三份，即一行四列，所以一列宽度为25%

  1. 为什么要使用bootstrap?

    答案：
Bootstrap具有移动设备优先、浏览器支持良好、容易上手、响应式设计等优点，所以Bootstrap被广泛应用。

  2. 使用Bootstrap时，要声明的文档类型是什么？以及为什么要这样声明？

 

答案：
使用Bootstrap时，需要使用 HTML5 文档类型（Doctype，<!DOCTYPE html>）。
因为Bootstrap 使用了一些 HTML5 元素和 CSS 属性，如果在 Bootstrap 创建的网页开头不使用 HTML5 的文档类型（Doctype），可能会面临一些浏览器显示不一致的问题，甚至可能面临一些特定情境下的不一致，以致于代码不能通过 W3C 标准的验证。
  1. 说一下bootstrap中这几个类是代笔什么尺寸的设备？

.col-sm-   .col-md- .col-lg- .col-xl-

.col-sm- 平板。屏幕宽度等于或大于 576px
.col-md- 桌面显示器。 屏幕宽度等于或大于 768px
.col-lg- 大桌面显示器。屏幕宽度等于或大于 992px
.col-xl- 超大桌面显示器。屏幕宽度等于或大于 1200px
  1. 在bootstrap中，如果想给段落添加强调文本，可以怎样操作？
答案：添加class="lead"