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页]

“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页]

“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题

2、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?

《网页设计与制作项目教程(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笔试题

item1
item2
item3
1. Bootstrap 插件全部依赖是（）
A.JavaScript
B.JQuery
C.Angular JS
D.Node JS
2. 栅格系统小屏幕使用的类前缀是（）
A. -xs-
B. .col-sm-
C. .col-md-
D. .col-lg-
3. 如下代码中，想要在超小屏幕和小屏幕显示两列，在中屏幕和大屏幕显示三列,三个div的class正确的写法是（）
如下代码中想要在超小屏幕和小屏幕显示两列在中屏幕和大屏幕显示三列三个div的class正确的写法是
（完整版）Bootstrap笔试题
一、单选题（针对以下题目，请选择最符合题目要求的答案。针对每一道题目，所有答案都选对，则该题得分，所选答案错误或不能选出所有答案，则该题不得分。每题2.5分，共80分。）

第10章 Bootstrap 插件知识点：评估试题 (2)[1页]

“bootstrap轮播插件”知识点评估题学习知识点后请完成以下练习题
1）Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。

( )。

（判断）
2）Bootstrap 轮播（Carousel）插件内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他想要放置的任何类型的内容。

( )（判断）
3）如果想要单独引用该插件的功能，那么需要引用 carousel.js。

或者，可以引用bootstrap.js或压缩版的bootstrap. min .js。

( )（判断）
4）Bootstrap 轮播（Carousel）插件使用 data 属性可以很容易控制轮播（Carousel）的位置。

( )（判断）
5）Bootstrap 轮播（Carousel）插件中data-ride="carousel" 属性用于标记轮播在页面加载时就开始动画播放。

（）（判断）
第 1 页共1 页。

web框架技术期末试题

web框架技术期末试题1. Bootstrap网格系统在各种屏幕和设备上的约定，大型屏幕设备的断点范围是（） [单选题] *A、≥576pB、≥768pxC、≥992px(正确答案)D、≥1200px2. 下面代码表示<p class="bg-primary text-white">将来，社会迎接你的礼物，就是无数个打击，而你能做的准备，就是在校园里练就一颗坚强的心脏。

</p> （） [单选题] *A、这段文本是灰色背景，白色文本B、这段文本是白色背景，灰色文本C、这段文本是蓝色背景，白色文本(正确答案)D、这段文本是蓝色背景，灰色文本3. 圆角边框显示正圆效果的是（） [单选题] *A、.roundedB、.rounded-circle(正确答案)C、.rounded-pillD、.rounded-04. Bootstrap中的下拉菜单组件中功能选项必须包含在（）类容器中。

[单选题] *A、.dropdownB、.dropdown-menu(正确答案)C、.dropdown-toggleD、.dropdown-item5. Bootstrap导航组件一般以列表结构为基础进行设计，下列描述错误的是（） [单选题] *A、在<ul>上添加nav类B、在每个<li>选项上添加nav-item类C、在每个链接<a>上添加nav-link类D、.flex-column类可以设置导航的水平布局(正确答案)6. Bootstrap默认的网格和列间有边距，一般是左右15px的margin或padding处理，可以使用（）类来消除它 [单选题] *A、border-0B、m-0C、no-gutters(正确答案)D、p-07. 下列flexbox弹性布局容器表示内容排列的是（） [单选题] *A、align-content-*B、align-items-*C、justify-content-*(正确答案)D、align-self-*8. Bootstrap中的下拉菜单组件必须包含在（）类容器中。

bootstrap练习题

bootstrap练习题基本信息：[矩阵文本题] *1、下列关于Bootstrap说法错误的是（）？ [单选题] *A、移动优先B、响应式Web设计C、所有版本的浏览器都支持(正确答案)D、拥有丰富的组件和插件2、Bootstrap插件全部依赖（）？ [单选题] *A、JavaScriptB、jQuery(正确答案)C、Angular JSD、Vue JS3、使用（）表示在中型屏幕上向右偏移3列？ [单选题] *A、.offset-md-3(正确答案)B、.offset-md-2C、.offset-sm-3D、.offset-34、下列选项中，用于设置100%宽度，占据全部视口（viewport）的容器代码正确的是（）？ [单选题] *A、<div class="container">...</div>B、<div class="container-fluid">...</div>(正确答案)C、<div class=".container">...</div>D、<div class=".container-fluid">...</div>5、下面代码表示（）等宽的布局？<div class="row"><div class="col border">...</div><div class="col border">...</div><div class="col border">...</div></div> [单选题] *A、1行1列B、1行2列C、1行3列(正确答案)D、1行4列6、下列哪个不是bootstrap4的容器类（）？ [单选题] *A、.containerB、.container-fluidC、.container-xs(正确答案)D、.container-sm7、下面关于bootstrap4的网格系统说法错误的是（） [单选题] *A、Bootstrap4包含了一个强大的移动优先的网格系统，它有5种响应尺寸B、网格系统使用行来创建水平的列组C、网格系统是一个用于响应式设计的组件(正确答案)D、网格系统中的列通过指定1~12 的值来表示其跨越的范围8、下列哪个不是bootstrap4的容器类（）？ [单选题] *A、.containerB、.container-fluidC、.container-xs(正确答案)D、.container-sm9、使用（）属性设置弹窗的内容 [单选题] *A、titleB、data-content(正确答案)C、data-placementD、data-toggle10、下列（）类可以实现关闭模态框 [单选题] *A、data-toggle="modal"B、data-dismiss="modal"(正确答案)C、class="modal"D、class="moda-dialog"11、下列（）类用于轮播在切换时滑动的效果 [单选题] *A、showB、slide(正确答案)C、openD、fade in12、用于定义轮播在页面加载时就开始自动播放的代码是（）。

bootstrap常见的面试题

bootstrap常见的⾯试题1、如果让⼀个元素在pc端显⽰⽽在⼿机端隐藏，下列选项正确的是（b）。

A、 visible-xs-8 hidden-mdB、 visible-md-8 hidden-xsC、 visible-md-8 hidden-smD、 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的容器中，所以正确。

Bootstrap笔测试试题

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”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.关于轮播图说法正确的是（）。

第8章 Bootstrap CSS 知识点：评估试题 (5)[1页]

“Bootstrap 表格”知识点评估题学习知识点后请完成以下练习题
1）关于Bootstrap 表格定义说法错误的是( )。

（单选）
A.<table>为表格添加基础样式
B.<thead>表格标题行的容器元素，用来标识表格列。

C.<tbody>表格主体中的表格行的容器元素
D.<tr>默认的表格单元格
2）关于Bootstrap 表格类的样式说法错误的是( )（单选）
A..table 为任意<table>添加基本样式。

B..table-striped为<tbody>内添加斑马线形似的条纹。

C..table-bordered为所有表格的单元格添加边框。

D..table-hover 让表格更加紧凑
3）下列哪些类可用于表格的行或者单元格( )（多选）
A..active将悬停的颜色应用在行或者单元格上
B..success 表示成功的操作
表示信息变化的操作
D..warning 表示一个警告的操作
4）Bootstrap 表格类中.danger表示一个危险的操作。

( )（判断）
5）Bootstrap 支持的<caption>的作用是表格储存内容的描述或总结。

（）（判断）
第 1 页共1 页。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

一、单选题（针对以下题目，请选择最符合题目要求的答案。

针对每一道题目，所有答案都选对，则该题得分，所选答案错误或不能选出所有答案，则该题不得分。

每题2.5分，共80分。

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）”。

Bootstrap笔试题

bootstrap面试题

第8章 Bootstrap CSS 知识点：评估试题 (3)[1页]

Bootstrap面试题

bootstrap面试题及答案

Bootstrap题目小测试

第8章 Bootstrap CSS 知识点：评估试题 (2)[1页]

bootstrap试题及答案

Bootstrap题

《网页设计与制作项目教程(HTML+CSS+Bootstrap) 》题库练习题复习题习题测试题带答案

（完整版）Bootstrap笔试题

第10章 Bootstrap 插件 知识点：评估试题 (2)[1页]

web框架技术期末试题

bootstrap练习题

bootstrap常见的面试题

Bootstrap笔测试试题

第8章 Bootstrap CSS 知识点：评估试题 (5)[1页]

第10章 Bootstrap 插件知识点：评估试题 (2)[1页]