当前位置：文档之家 › Bootstrap笔试题教程文件

Bootstrap笔试题教程文件

  • 格式：doc
  • 大小：148.50 KB
  • 文档页数：11

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

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

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

合集下载

前端bootstrap面试题

前端bootstrap面试题

前端bootstrap面试题Bootstrap是一种流行的前端开发框架，它提供了一套易用的CSS和JavaScript组件，可以帮助开发人员快速构建响应式网页设计。

对于前端工程师来说，掌握Bootstrap是非常重要的技能之一。

在面试中，面试官可能会问一些关于Bootstrap的问题，考察你的理解和运用能力。

本文将为大家整理一些常见的Bootstrap面试题，帮助大家更好地准备面试。

1. 什么是Bootstrap？Bootstrap是由Twitter开发的一个开源前端框架，它提供了一系列CSS和JavaScript组件，可以用于构建响应式网页设计。

通过使用Bootstrap，开发人员可以快速搭建出美观、一致性的网页界面。

2. Bootstrap的特点有哪些？- 响应式布局：Bootstrap提供了一套响应式栅格系统，可以自动适应不同屏幕尺寸，保证网页在各种设备上都能良好显示。

- 组件丰富：Bootstrap提供了大量的组件，如导航栏、按钮、表单等，这些组件都经过了严格的设计和测试，可以直接使用，极大地提高了开发效率。

- 浏览器兼容性：Bootstrap对主流浏览器有着良好的兼容性，可以在各种平台和浏览器上正常显示。

- 定制性强：Bootstrap可以通过定制主题、组件的方式，满足不同项目的需求，让开发人员能够自由地定制网页样式。

3. 如何使用Bootstrap？通过以下几个步骤可以开始使用Bootstrap：- 下载Bootstrap：可以从官方网站上下载Bootstrap的源代码，也可以通过CDN引入Bootstrap的CSS和JavaScript文件。

- 引入Bootstrap文件：在HTML文件中引入Bootstrap的CSS和JavaScript文件，可以使用link和script标签完成引入。

- 使用Bootstrap组件：在HTML文件中使用Bootstrap提供的CSS 类和JavaScript组件，可以直接在HTML标签上添加相应的类名或者在JavaScript中调用相应的方法。

第9章 Bootstrap 布局组件 知识点：评估试题 (2)[1页]

第9章 Bootstrap 布局组件 知识点：评估试题 (2)[1页]

“Bootstrap 列表组”知识点评估题学习知识点后请完成以下练习题
1）列表组件用于以列表形式呈现复杂的和自定义的内容。

( )。

（判断）
2）创建一个基本的列表组的步骤(1)向元素 <ul> 添加 class .list-group。

（2）向 <li> 添加 class .list-group-item。

( )（判断）
3）可以向任意的列表项添加徽章组件，它会自动定位到右边。

只需要在 <li> 元素中添加<span class="badge"> 即可。

( )（判断）
4）通过使用锚标签代替列表项，我们可以向列表组添加链接。

我们需要使用 <div> 代替<ul> 元素。

( )（判断）
5）可以向上面已添加链接的列表组添加任意的 HTML 内容。

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

bootstrap面试题及答案

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是一种流行的前端开发框架，被广泛应用于网页设计和开发中。

今天，我们将为大家整理一些常见的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提供了多种按钮样式，包括默认按钮、主要按钮、成功按钮、信息按钮、警告按钮、危险按钮等。