(完整版)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）内容应该放置在列内，且唯有列可以是⾏的直接⼦元素。
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是一种流行的前端开发框架，被广泛应用于网页设计和开发中。
今天，我们将为大家整理一些常见的Bootstrap面试题，帮助大家更好地了解和掌握这个框架。
第一部分：基础知识回顾1. 什么是Bootstrap？它有哪些特点和优势？Bootstrap是一个基于HTML、CSS和JavaScript的开源框架，用于开发响应式、移动设备优先的网站和应用程序。
它的特点和优势包括：易于上手、跨浏览器兼容、快速开发、预置了丰富的样式和组件等。
2. Bootstrap的网格系统是什么？它是如何工作的？Bootstrap的网格系统是一种用于创建响应式布局的强大工具。
它将页面划分为12列，并在不同屏幕宽度下自动适应布局。
通过使用预定义的CSS类，可以将元素放置在不同列和行中，从而实现自适应布局。
3. Bootstrap中的栅格类是如何使用的？栅格类是Bootstrap中用于实现网格布局的CSS类。
通过为元素添加`.col-*-*`类，可以指定元素在不同屏幕宽度下的占比和布局。
其中，第一个`*`代表屏幕尺寸（如`xs`、`sm`、`md`、`lg`），第二个`*`代表占比（1-12），第三个`*`代表偏移量。
4. 什么是响应式设计？Bootstrap是如何实现响应式设计的？响应式设计是一种能够根据用户的设备尺寸和屏幕宽度自动适应布局的设计方式。
Bootstrap通过使用弹性网格系统、媒体查询、栅格类等技术来实现响应式设计。
用户访问网页时，页面会根据设备尺寸进行自动调整，以提供更好的用户体验。
第二部分：应用实践1. 如何在项目中引入Bootstrap？可以通过以下两种方式引入Bootstrap：- 下载Bootstrap的CSS和JavaScript文件，并在项目中引入相关文件。
- 使用Bootstrap的CDN（内容分发网络）链接，直接在HTML文件中引入CDN链接。
2. Bootstrap中的按钮样式有哪些？如何使用它们？Bootstrap提供了多种按钮样式，包括默认按钮、主要按钮、成功按钮、信息按钮、警告按钮、危险按钮等。
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。
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。
《网页设计与制作项目教程(HTML+CSS+Bootstrap) 》题库练习题复习题习题测试题带答案
项目一思考练习答案练习1一、填空题1．URL（Uniform Resource Locator）即统一资源定位系统，也就是网络地址，是在Internet上用来描述信息资源，并将Internet提供的服务统一编址的系统。
2．因特网（Internet）又称为互联网，是一个把分布于世界各地的计算机用传输介质互相连接起来的网络。
3. Dreamweaver CC是有Adobe公司出品的。
4．HTML（Hyper Text Markup Language 超文本标识语言）是一种用来制作超文本文档简单语言。
二、单选题1．万维网是( A )。
A. 无数个网络站点和网页的集合B. 互联网C. 一个网站D. 一个网页2．目前在Internet上应用最为广泛的服务是( B)A.FTP服务B.WWW服务C.Telnet服务D.Gopher服务3．网页的特征是（D）A．HTML文档的基本特征——超文本B．标识语言，网页中不能没有标记（Tag）C．网页提供了一些措施以防在网上冲浪的过程中迷失方向D．网页实现了对原文档信息的无限补充或扩展三、简单题（略）练习2一、选择题（单选或多项）1．Dreamweaver CC的新建文档页面，一般情况下，创建完全空白的静态页面应选择( D）。
A.XMLB.PHPC.CSSD.HTML2．Dreavermeaver CC中关闭所有面板和面板组，按（B）。
A.【F1】B.【F4】C.【CTRL】D.【TAB】3．利用Dreamweaver建立站点，要创建站点根文件夹，以下说法正确的是（BCD）。
A.存放网站链接B.是网站中的一部分C.用来保存网站内容（包括网页文件和图像、动画等）的文件夹D.创建若干个子文件夹，以存放不同类型的文件二、判断题1．静态的首页命名只能为“index.html”。
（×）2．最好不要使用中文命名文件和文件夹（包括根文件夹），因为在使用Unix或Linux作为操作系统的主机上，使用中文名容易出错。
(完整版)Bootstrap笔试题
一、单选题（针对以下题目，请选择最符合题目要求的答案。
针对每一道题目，所有答案都选对，则该题得分，所选答案错误或不能选出所有答案，则该题不得分。
每题 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 ”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-content 17. 用 JavaScript 怎样让轮播图从第二个图片开始播放( )A. $('.carousel').carousel()B. $('.carousel').carousel(0)C. $('.carousel').carousel(1)D.$('.carousel').carousel(2)18. 使用 collapse 实现手风琴，通过哪个属性关联整个面板组 ( )A. data-parentB. data-toggle)B. 添加 data-target=' scroll 'D. 添加 data-dismiss=””C. 添加 data-spy=' scroll 'C. data-targetD. href19. 如何让轮播图在页面切换时有动画（）A. 添加in 类B. 添加fade 类C. 添加active 类D. 添加slide 类20. 关于轮播图说法正确的是（）。
bootstrap期末复习题
bootstrap期末复习题bootstrap期末复习题随着互联网的普及，网页设计和开发成为了一个热门的行业。
而在网页开发中，前端开发是一个至关重要的环节。
为了提高开发效率和减少重复劳动，前端开发者们开始使用各种框架来辅助开发。
其中，bootstrap是最受欢迎的前端框架之一。
它提供了丰富的组件和样式，可以帮助开发者快速构建响应式的网页。
在本文中，我将回顾一些与bootstrap相关的重要知识点，以期帮助大家复习并加深对bootstrap的理解。
1. 什么是bootstrap？Bootstrap是一个开源的前端框架，由Twitter的工程师们开发并维护。
它使用HTML、CSS和JavaScript，提供了一套易于使用的组件和样式，可以帮助开发者快速构建现代化的网页。
2. 响应式设计响应式设计是bootstrap的一个重要特性。
它意味着网页可以根据用户的设备和屏幕大小进行自适应调整，以提供更好的用户体验。
在bootstrap中，我们可以使用栅格系统来实现响应式布局。
栅格系统将页面水平分为12列，我们可以根据需要在不同的列中放置内容，并通过CSS类来控制在不同屏幕大小下的显示。
3. 组件Bootstrap提供了丰富的组件，可以帮助我们快速构建各种功能和样式。
其中一些常用的组件包括导航栏、按钮、表格、表单、模态框等。
通过使用这些组件，我们可以减少开发时间，提高开发效率。
4. 样式除了组件，bootstrap还提供了一些样式类，可以帮助我们快速设置页面的样式。
例如，我们可以使用按钮样式类来设置按钮的外观和交互效果；使用文本样式类来设置文字的颜色、大小和对齐方式；使用边框样式类来设置元素的边框样式等等。
通过合理地使用这些样式类，我们可以轻松地实现页面的美化和定制。
5. 插件除了组件和样式，bootstrap还提供了一些JavaScript插件，可以帮助我们实现更复杂的交互和功能。
例如，我们可以使用轮播插件来创建一个图片轮播效果；使用模态框插件来实现弹出窗口；使用滚动插件来实现页面滚动效果等等。
《Bootstrap响应式Web前端开发》(慕课版)课后习题及答案
《Bootstrap响应式Web前端开发》（慕课版）课后习题及答案第1章1-1 简述什么是bootstrap是什么。
Bootstrap是全球最受欢迎的前端框架，用于开发响应式、移动设备优先的web项目。
Bootstrap中预定义了一套CSS样式和与样式对应的jQuery代码，在应用该框架时，只需提供固定的HTML结构，并且为各元素添加bootstrap中提供的class名称，即可实现指定的效果。
1-2 从网格布局的角度讲，bootstrap4版本与bootstrap3的特点是什么？与bootstrap3版本的网格布局相比，bootstrap4的网格布局与弹性布局相结合，所以，使用网格布局时，可以不用指定每一列的宽度，而bootstrap3版本则需要严格指定每一列的宽度。
1-3 bootstrap的优点有哪些？Bootstrap主要有以下优点：（1）含有多中常用样式和功能，且占用资源小，可以提高开发效率。
（2）移动设备优先：自bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式。
（3）浏览器支持：所有的主流浏览器（包括IE、Chrome、Safari、Firefox、opera）都支持bootstrap。
（4）容易上手：要使用bootstrap框架，您只需具备HTML、CSS的基础知识就可以学习bootstrap。
（5）响应式设计：bootstrap的响应式CSS能够自适应于台式机、平板电脑和手机等设备的屏幕。
1-4 简述bootstrap1版本至bootstrap4，各版本的特点。
（1）bootstrap 12011年8月，Twitter推出了快速搭建网页应用的轻量级前端开发工具bootstrap。
它由动态CSS语言less写成，经过编译后，bootstrap就是众多CSS的合集。
（2）bootstrap 2Bootstrap2最大的改变在于添加12网格的响应式布局，除此之外，它还增加了一些新样式，并且还修改了一些网页元素的默认样式，同时修改了上一版本中的一些错误，以及完善了说明文档。
- 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）”。