Bootstrap笔试题
bootstrap面试题
bootstrap⾯试题bootstrap⾯试题1、Bootstrap是哪家公司研发的？Twitter2、什么是Bootstrap？以及为什么要使⽤Bootstrap？Bootstrap是⼀个⽤于快速开发Web应⽤程序和⽹站的前端框架。
Bootstrap是基于HTML、CSS、JAVASCRIPT的。
Bootstrap具有移动设备优先、浏览器⽀持良好、容易上⼿、响应式设计等优点，所以Bootstrap被⼴泛应⽤。
3、使⽤Bootstrap时，要声明的⽂档类型是什么？以及为什么要这样声明？使⽤Bootstrap时，需要使⽤HTML5⽂档类型（Doctype）。
<!DOCTYPEhtml>因为Bootstrap使⽤了⼀些HTML5元素和CSS属性，如果在Bootstrap创建的⽹页开头不使⽤HTML5的⽂档类型（Doctype），可能会⾯临⼀些浏览器显⽰不⼀致的问题，甚⾄可能⾯临⼀些特定情境下的不⼀致，以致于代码不能通过W3C标准的验证。
4、如果需要制作响应式图像，需要在<img>标签上⾯增加什么？class="img-responsive"5、什么是Bootstrap⽹格系统（GridSystem）？Bootstrap包含了⼀个响应式的、移动设备优先的、不固定的⽹格系统，可以随着设备或视⼝⼤⼩的增加⽽适当地扩展到12列。
它包含了⽤于简单的布局选项的预定义类，也包含了⽤于⽣成更多语义布局的功能强⼤的混合类。
响应式⽹格系统随着屏幕或视⼝（viewport）尺⼨的增加，系统会⾃动分为最多12列。
6、Bootstrap⽹格系统（GridSystem）的⼯作原理？（1）⾏必须放置在.containerclass内，以便获得适当的对齐（alignment）和内边距（padding）。
（2）使⽤⾏来创建列的⽔平组。
（3）内容应该放置在列内，且唯有列可以是⾏的直接⼦元素。
第8章 Bootstrap CSS 知识点：评估试题 (3)[1页]
![第8章 Bootstrap CSS 知识点：评估试题 (3)[1页]](https://img.taocdn.com/s3/m/f2dd27df48649b6648d7c1c708a1284ac8500536.png)
“Bootstrap 按钮”知识点评估题学习知识点后请完成以下练习题
1）关于Bootstrap 按钮的样式说法错误的是( )。
（单选）
A..btn 为按钮添加基本样式
B..btn-default 默认标准按钮
C..btn-success 表示成功的操作
D..btn-info 表示需要谨慎操作的按钮
2）下表关于按钮大小的class说法正确的是( )（多选）
A..btn-lg 让按钮看起来比较大
B..btn-sm 让按钮看起来比较小
C..btn-xs 让按钮看起来特别小
D..btn-block 创建块级的按钮，会横跨父元素的全部宽度。
3）Bootstrap 提供了激活、禁用等按钮状态的 class。
( )（判断）
4）按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）。
( )（判断）
5）Bootstrap 不可以在 <a>、<button> 或 <input> 元素上使用按钮 class。
（）（判断）
第 1 页共1 页。
Bootstrap面试题
Bootstrap⾯试题1.⽤bootstrap中的栅格做⽹页布局的基本结构是什么?默认将⼀⾏分为多少列?答案:容器中设置⾏,⾏内设置列.默认将⼀⾏分为12个单元格(列)2.如何编写响应式⽹页?答案:(1)声明viewport元标签(2)所有容器/⽂字/图⽚使⽤相对尺⼨(3)流式布局+弹性布局(4)使⽤CSS3 MediaQuery技术3.同时监听多个scss⽂件的命令是什么?答案:node-sass -w scss⽂件夹 -o css⽂件夹4.在scss中如何定义混合器以及引⽤?答案:@mixin 混合器名称{ 样式声明 }通过@include来使⽤混合器.5.对于各类尺⼨的设备,Bootstrap设置的class前缀分别是什么?超⼩设备⼿机( <767px ): .col-xs-⼩型设备平板电脑( >=768px ): .col-sm-中型设备台式电脑( >=992px ): .col-md-⼤型设备台式电脑( >1200px ): .col-lg-6.Bootstrap如何设置响应式表格?增加class="table-responsive"7.使⽤Bootstrap激活或禁⽤按钮要如何操作?激活按钮:给按钮增加.active的class禁⽤按钮:给按钮增加disabled="disabled"的属性8.Bootstrap有哪些关于<img>的class(1) .img-rounded为图⽚添加圆⾓(2) .img-circle 将图⽚变为圆形(3) .img-thumbnail 缩略图功能(4) .img-responsive 图⽚响应式(将很好地扩展到⽗元素)9.Bootstrap中有关元素浮动及清除浮动的class?class="clearfix" 清除浮动10.Bootstrap如何制作下拉菜单?(1)将下拉菜单包裹在class="dropdown"的<div>中;(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"的<div>去包裹按钮组;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中如何制作徽章?<span class="badge">26</span>15.Bootstrap中超⼤屏幕的作⽤是什么?设置 class="jumbotron"可以制作超⼤屏幕,该组件可以增加标题的⼤⼩并增加更多的外边距.16.Bootstrap⽹格系统列与列之间的间隙宽度是多少?答案:间隙宽度为30px (⼀个列的每边分别是15px).17.⽤Bootstrap,如何设置⽂字的对齐⽅式?class="text-center" 设置居中⽂本class="text-right" 设置向右对齐⽂本class ="text-left" 设置向左对齐⽂本。
bootstrap面试题及答案
bootstrap面试题及答案Bootstrap，来自Twitter，是目前最受欢迎的前端框架。
Bootstrap是基于HTML、CSS、JAVASCRIPT的，它简洁灵活，使得Web 开发更加快捷。
1.什么是Bootstrap网格系统（GridSystem）？Bootstrap包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到12列。
它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。
2.doctype（文档类型）的作用是什么？知道多少种文档类型？此标签可告知浏览器文档使用哪种HTML或XHTML规范。
该标签可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的HTML文档。
HTML4.01规定了三种文档类型：Strict、Transitional以及Frameset。
XHTML1.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）：。
Bootstrap题目小测试
Bootstrap题目小测试什么是BootStrap框架Bootatrap是基于HTML、CSS、JAVASCRIPT的前端框架，之所以他能够帮我们快速构建一个前端应用是因为他实现了很多默认的网页样式效果。
Html、Css和BootStrap框架的关系是什么css对我们的html 标签进行样式修饰。
bootstrap实现了很多默认css样式的一个框架。
下列代码布局合理吗？不合理的话，应该怎么改进<div> 名字：<input type='text' name='username'> <br> 昵称：<input type='text' name='nickname'></div>1234512345不合理<div><div> 名字：<input type='text' name='username'><br></div><div> 昵称：<input type='text' name='nickname'></div> </div>123456789123456789绝对路径和相对路径的差别是什么绝对路径是指文件在硬盘上真正的路径。
相对路径是指相对于当前文件的路径。
col-md-6、col-xs-6这两个类分别表示什么含义col-md-6:bootatrap将父级元素分成等宽的12个单元格，子元素将自己设置成了6个宽度的单元格。
col-xs-6: 用于超小型设备(max-width:768px)bootatrap将父级元素分成等宽的12个单元格，子元素将自己设置成了6个宽度的单元格。
col-md-push-6、col-md-offset-6、col-md-pull-6这三个类分别表示什么含义col-md-push-6:将元素往右推进6个单元格col-md-offset-6：使当前元素左边产生6个单元格的margin填充col-md-pull-6：将元素往左推进6个单元格写出至少四个BootStrap的特殊文本效果标签并说明其对应效果<mark>标记文字</mark>高亮<del>删除文字</del><ins>划线文字</ins><p class='text-center'>文本居中</p>123411234写出至少三个BootStrap带颜色文本类<p class='text-warning'>红色文本</p><p class='text-primary'>蓝色文本</p><p class='text-success'>黄色文本</p>123123。
第8章 Bootstrap CSS 知识点：评估试题 (2)[1页]
![第8章 Bootstrap CSS 知识点：评估试题 (2)[1页]](https://img.taocdn.com/s3/m/9386fde1f9c75fbfc77da26925c52cc58bd690fb.png)
“Bootstrap 图片”知识点评估题学习知识点后请完成以下练习题
1）关于Bootstrap图片应用简单样式的 class说法正确的是( )。
（单选）
A..img-rounded：添加 border-radius:6px 来获得图片圆角。
B..img-circle：添加 border-radius:50% 来让整个图片变成圆形。
C..img-thumbnail：添加一些内边距（padding）和一个灰色的边框。
D.以上说法都正确
2）以下哪些类可用于任何图片中( )（多选）
A..img-rounded为图片添加圆角
B..img-circle 将图片变为圆形
C..img-thumbnail 缩略图功能
D..img-responsive 图片响应式
3）Bootstrap 通过在 <img> 标签添加 .img-responsive 类来让图片支持响应式设计。
( )（判断）
4）Bootstrap 中的.img-responsive 类将 max-width: 100%; 和 height: auto; 样式应用在图片上。
( )（判断）
5）Bootstrap 提供了四个可对图片应用简单样式的 class。
（）（判断）
第 1 页共1 页。
bootstrap试题及答案
bootstrap试题及答案1. 什么是Bootstrap？- A. 一种前端开发框架- B. 一种后端开发框架- C. 一种数据库管理系统- D. 一种操作系统答案：A2. Bootstrap是由哪个公司开发的？- A. Google- B. Facebook- C. Twitter- D. Microsoft答案：C3. Bootstrap的默认栅格系统有多少个列？- A. 12- B. 16- C. 24- D. 48答案：A4. 在Bootstrap中，哪个类用于创建一个容器？- A. `.container`- B. `.row`- C. `.col`- D. `.grid`答案：A5. 如何在Bootstrap中创建一个响应式导航栏？- A. 使用`.navbar`类- B. 使用`.nav`类- C. 使用`.navbar-nav`类- D. 使用`.navbar-responsive`类答案：A6. Bootstrap的哪个组件用于创建模态框？- A. `.modal`- B. `.dropdown`- C. `.alert`- D. `.tooltip`答案：A7. 在Bootstrap中，如何实现一个按钮的悬停效果？ - A. 添加`.hover`类- B. 添加`.active`类- C. 使用CSS的`:hover`伪类- D. 使用JavaScript监听鼠标事件答案：C8. Bootstrap的哪个版本开始引入了Flexbox布局？ - A. Bootstrap 3- B. Bootstrap 4- C. Bootstrap 5- D. Bootstrap 6答案：B9. 如何在Bootstrap中创建一个带有图标的按钮？ - A. 使用`.btn-icon`类- B. 使用`.icon`类- C. 使用`.glyphicon`类- D. 使用`.fas`类答案：D10. Bootstrap的哪个组件用于创建折叠面板？ - A. `.panel`- B. `.collapse`- C. `.card`- D. `.tab`答案：B。
Bootstrap题
பைடு நூலகம்
3、什么是 Less？ 4、什么是 Bootstrap 的网格系统？
5、Bootstrap 网格系统的工作原理？ 4、编程题 1、用 Bootstrap 写一响应式的导航栏？ 2、用 Bootstrap 写出下面表单。
Bootstrap 题 1、填空题 1、为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩 放，需要在网页的 head 之中添加_______________________________标签。 2、通过添加 _____________________________可以让 Bootstrap 3 中的图像 对响应式布局的支持更友好。 2、判断题 1、Bootstrap 使用了一些 HTML5 元素和 CSS 属性。（ ） 2、移动设备优先是 Bootstrap 2 的最显著的变化。（ ） 3、Bootstrap 允许您以两种方式显示代码：第一种是 <code> 标签，第二种是 <pre> 标签。（ ） 3、简述题 1、为什么使用 Bootstrap?
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
一、单选题（针对以下题目，请选择最符合题目要求的答案。
针对每一道题目，所有答案都选对，则该题得分，所选答案错误或不能选出所有答案，则该题不得分。
每题2.5分，共80分。
）1. Bootstrap 插件全部依赖是（）A.JavaScriptB.JQueryC.Angular JSD.Node JS2. 栅格系统小屏幕使用的类前缀是（）A. .col-xs-B. .col-sm-C. .col-md-D. .col-lg-3. 如下代码中，想要在超小屏幕和小屏幕显示两列，在中屏幕和大屏幕显示三列,三个div的class正确的写法是（）<div class="row"><div class=" ">item1</div><div class=" "> item2</div><div class=" "> item3</div></div>A. col-sm-6 col-md-4，col-sm-6 col-md-4，col-sm-6 col-md-4B. col-sm-6 col-lg-4，col-sm-6 col-lg-4，col-sm-6 col-lg-4C. col-xs-6 col-lg-4，col-xs-6 col-lg-4，col-xs-6 col-lg-4D. col-xs-6 col-md-4，col-xs-6 col-md-4，col-xs-6 col-md-44. 下面可以实现列偏移的类是（）A..col-md-offset-*B. .col-md-push-*C. .col-md-pull-*D. .col-md-move-*5.表单元素要加上什么类，才能给表单添加圆角属性，和阴影效果（）A.form-groupB.form-horizontalC.form-inlineD. form-control6.img-responsive类可以让图片支持响应式布局,它的实现原理是（）A.设置了max-width: 100%;和height: auto;B. 设置了max-width: 100%; 和height: 100%;C. 设置了width: auto; 和max-height: 100%;D. 设置了width: auto; 和height: auto;7.输入框组想加上图标，可以实现对表单控件的扩展的类是（）A. .input-group-btnB. .input-group-addonC. form-controlD. input-group-extra8. 标签页垂直方向堆叠排列,需要添加的类（）A.nav-verticalB.nav-tabsC.nav-pillsD.nav-stacked9. 可以把导航固定在顶部的类是（）A.navbar-fixed-topB.navbar-fixed-bottomC.navbar-static-topD.navbar-inverse10.导航条在小屏幕会被折叠，实现显示和折叠功能的按钮需要加什么（）A.折叠按钮加data-toggle=’collapsed’，折叠容器需要加collapsed类B.折叠按钮加data-toggle=’collapse’，折叠容器需要加collapse 类C.折叠按钮加data-toggle=’scroll’，折叠容器需要加collapse 类D.折叠按钮加data-spy=’scroll’，折叠容器需要加collapse类11.实现nav平铺整行，应该加哪个类（）A. nav-centerB. nav-justifiedC. nav-leftD. nav-right12. 模态框提供了哪些尺寸（）A. modal-xs modal-sm modal-md modal-lgB. modal-sm modal-md modal-lgC. modal-xs modal-smD. modal-sm modal-lg13. 如果你不需要模态框弹出时的动画效果（淡入淡出效果）怎样实现（）A. 删掉.fade 类即可B. 添加删掉.fade 类即可C. 去掉.active 类即可D．去掉.in 类即可14. 怎样实现滚动监听事件（）A. 添加data-toggle=“scroll”B. 添加data-target=’scroll’C. 添加data-spy=’scroll’D. 添加data-dismiss=”scroll”15. 关闭modal 的按钮应该加什么属性（）A.data-dismiss=’modal’B.data-toggle=’modal‘C. data-spy=’modal’D. data-hide='true'16. 下列不属于panel的三要素是（）A.panel-headingB.panel-bodyC.panel-footerD. panel-content17.用JavaScript怎样让轮播图从第二个图片开始播放（）A. $('.carousel').carousel()B. $('.carousel').carousel(0)C. $('.carousel').carousel(1)D.$('.carousel').carousel(2)18. 使用collapse实现手风琴，通过哪个属性关联整个面板组（）A.data-parentB.data-toggleC.data-targetD. href19. 如何让轮播图在页面切换时有动画（）A. 添加in类B. 添加fade类C. 添加active类D.添加slide类20.关于轮播图说法正确的是（）。
A.轮播图的页面切换索引从1开始B. 下一页实现方式data-slide-to=“prev”C.可以使用carousel-caption类为图片添加描述D. 上一页实现方式data-slide-to=“-1”21.对于tooltip的元素，data-placement的作用是（）A. 工具提示条的显示大小B. 工具提示条的显示位置C. 工具提示条的显示动画D. 工具提示条的显示颜色22. 弹出框元素：<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" id=”mypopover”title="this is my Popove element" data-animation=”true”data-content="And some amazing content.">点我弹出/隐藏弹出框</button>，对于title和data-content属性的作用，错误的是（）A.title可以不支持html标签B.title是弹出框的标题C.data-content是弹出框的内容D.data-content可以支持html标签23. 滚动监听哪个属性可以设置滚动条距离顶端的位置距离（）A. data-offsetYB. data-offsetC.data-spyD. data-dismiss24. 标签页加了fade给每个tab-pane使切换标签页时有动画，那么怎样让第一个默认显示出来（）A. 添加类activeB. 添加类showC. 添加类inD. 添加类fadeIn25. 怎样养tooltips通过点击事件弹出（）A. data-placement=”click”B. data-delay=”click”C. data-title=”click”D.data-trigger=”click”26. 怎样修改轮播图的页面切换的时间间隔（）A.data-intervalB.data-pauseC.data-wrapD.data-time27. 下列说法正确的是（）A. button 组件能同时支持工具提示和控制模态框。
B. 不要在同一个元素上同时使用多个插件的data 属性C. 使用bootstrap插件不需要引用jQueryD. bootstrap插件不可以单个引入28. 怎样只关闭警告框的data-API（）A. $(document).off('.data-api')B.$(document).off('.alert-data-api')C. $(document).off('.data-api.alert')D.$(document).off('.alert.data-api')29. 关于分页组件说法错误的是（）A．使用类pagination来实现B．.pagination-lg、.pagination-sm类提供了额外可供选择的尺寸。
C．.disabled 类不可用于翻页中的链接D．previous类和类next可以表示上一页、下一页30.下列哪个类起徽章的作用（）A.page-headerB. jumbotronC. badgeD. thumbnail31. 怎样为进度条创建条纹效果（）A. 添加类progress-bar-stripedB. 添加类progress-barC. 添加类progress-stripedD.添加类progressBar-striped32. 制作tab切换，要显示的内容要放在下方哪个容器里面（）A.contentB. tab-groupC. tab-bodyD. tab-content二，多选题(针对以下题目，请选择最符合题目要求的答案。
针对每一道题目，所有答案都选对，则该题得分，漏选答案则该题得2分，选了错误答案则该题不得分。
每题4分，共20分。
33.关于bootstrap的布局容器说法正确的有（）A. .container 类用于固定宽度并支持响应式布局的容器。
B. .container-fluid 类用于100% 宽度，占据全部视口（viewport）的容器。
C. .container和.container-fluid可以互相嵌套D.布局容器仅提供了.container和.container-fluid两种容器34. 如果想要绘制带边框的条纹状的表格需要添加的类有（）A. table-condensedB. table-hoverC. table-borderedD. table-striped35.对于下拉菜单说法正确的是( )A.表示有四个下拉选项的下拉菜单B.<span class=‘caret’></span 可以去掉而不影响功能C.可以加入pull-right使菜单右对齐D.可以加入dropdown-menu-right使菜单右对齐36.下列关于栅格系统说法正确的有（）A. 栅格系统每一行不能少于12列B. 通过“行（row）”在水平方向创建一组“列（column）”。