前端面试题Bootstrap

1.用bootstrap中的栅格做网页布局的基本结构是什么？默认将一行分为多少列？ 答案：容器中设置行，行内设置列 默认将一行分为12个单元格（列） 2.如何编写响应式网页？ 答案： (1)声明viewport元标签 (2)所有容器/文字/图片 使用相对尺寸 (3)流式布局+弹性布局 (4)使用CSS3 Media Query技术 3.同时监听多个scss文件的命令是什么？ 答案：node-sass -w scss文件夹 –o css文件夹 4.在scss中如何定义混合器以及引用？ 答案： @mixin 混合器名称{ 样式声明 } 通过@include来使用混合器。 5.对于各类尺寸的设备，Bootstrap设置的class前缀分别是什么？ 答案 超小设备手机（<768px）：.col-xs- 小型设备平板电脑（>=768px）：.col-sm- 中型设备台式电脑（>=992px）：.col-md- 大型设备台式电脑（>=1200px）：.col-lg- 6.Bootstrap如何设置响应式表格？ 增加class=“table-responsive” 7、使用Bootstrap激活或禁用按钮要如何操作？ 激活按钮：给按钮增加.active的class 禁用按钮：给按钮增加disabled=“disabled"的属性 8、Bootstrap有哪些关于的class？ （1）.img-rounded 为图片添加圆角 （2）.img-circle 将图片变为圆形 （3）.img-thumbnail 缩略图功能 （4）.img-responsive 图片响应式 (将很好地扩展到父元素) 9、Bootstrap中有关元素浮动及清除浮动的class？ class=“clearfix” 清除浮动 10、Bootstrap如何制作下拉菜单？ （1）将下拉菜单包裹在class=“dropdown"的

中； （2）在触发下拉菜单的按钮中添加：class=“btn dropdown-toggle” id=“dropdownMenu1” data-toggle=“dropdown” （3）在包裹下拉菜单的ul中添加：class=“dropdown-menu” role=“menu” aria-labelledby=“dropdownMenu1” （4）在下拉菜单的列表项中添加：role=“presentation”。其中，下拉菜单的标题要添加class=“dropdown-header”，选项部分要添加tabindex=”-1”。 11、Bootstrap如何制作按钮组？ 用class="btn-group"的

去包裹按钮组；class="btn-group-vertical"可设置垂直按钮组。 12、Bootstrap中的导航都有哪些？ （1）导航元素：有class="nav nav-tabs"的标签页导航，还有class="nav nav-pills"的胶囊式标签页导航； （2）导航栏：class=“navbar navbar-default” role=“navigation”； （3）面包屑导航：class=“breadcrumb” 13、Bootstrap中设置分页的class？ 默认的分页：class=“pagination” 14、Bootstrap中如何制作徽章？ 26 15、Bootstrap中超大屏幕的作用是什么？ 设置class="jumbotron"可以制作超大屏幕，该组件可以增加标题的大小并增加更多的外边距。 16、Bootstrap 网格系统列与列之间的间隙宽度是多少？ 间隙宽度为30px（一个列的每边分别是15px）。 17、用Bootstrap，如何设置文字的对齐方式？ class=“text-center” 设置居中文本 class=“text-right” 设置向右对齐文本 class=“text-left” 设置向左对齐文本