2022年Bootstrap笔试题

1、一、单选题（针对以下题目，请选择最符合题目要求的答案。针对每一道题目，所有答案都选对，则该题得分，所选答案错误或不能选出所有答案，则该题不得分。每题2.5 分，共 80 分。）1. bootstrap 插件全部依赖是（）a. javascript b. jquery c. angular js d. node js 2. 栅格系统小屏幕使用的类前缀是（）a. .col-xs- b. .col-sm-c. .col-md- d. .col-lg- 3. 如下代码中，想要在超小屏幕和小屏幕显示两列，在中屏幕和大屏幕显示三列 ,三个 div 的 class正确的写法是（） item1 item2 i

2、tem3 a. col-sm-6 col-md-4 ，col-sm-6 col-md-4，col-sm-6 col-md-4 b. col-sm-6 col-lg-4 ，col-sm-6 col-lg-4，col-sm-6 col-lg-4 c. col-xs-6 col-lg-4 ，col-xs-6 col-lg-4 ，col-xs-6 col-lg-4 精品学习资料 可选择p d f - - - - - - - - - - - - - - 第 1 页，共 9 页 - - - - - - - - -精品学习资料 可选择p d f - - - - - - - - - - - - - - 第 1

3、 页，共 9 页 - - - - - - - - -d. col-xs-6 col-md-4 ，col-xs-6 col-md-4，col-xs-6 col-md-4 4. 下面可以实现列偏移的类是（）a.col-md-offset-* b. .col-md-push-* c. .col-md-pull-* d. .col-md-move-* 5.表单元素要加上什么类，才能给表单添加圆角属性，和阴影效果（）a.form-group b.form-horizontal c.form-inline d. form-control6.img-responsive类可以让图片支持响应式布局,它的实现原

4、理是（）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-btn b. .input-group-addon c. form-control d. input-group-extra8. 标签页垂直方向堆叠排列 , 需要添加的类（）a.nav-vert

5、ical b.nav-tabs c.nav-pills d.nav-stacked 9. 可以把导航固定在顶部的类是（）a. navbar-fixed-top精品学习资料 可选择p d f - - - - - - - - - - - - - - 第 2 页，共 9 页 - - - - - - - - -精品学习资料 可选择p d f - - - - - - - - - - - - - - 第 2 页，共 9 页 - - - - - - - - -b. navbar-fixed-bottom c. navbar-static-top d. navbar-inverse 10.导航条在小屏幕会被折

6、叠， 实现显示和折叠功能的按钮需要加什么（）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-left d. nav-right 12. 模态框提供了哪些尺寸（

7、）a. modal-xs modal-sm modal-md modal-lg b. modal-sm modal-md modal-lg c. modal-xs modal-sm d. modal-sm modal-lg 13. 如果你不需要模态框弹出时的动画效果（淡入淡出效果）怎样实精品学习资料 可选择p d f - - - - - - - - - - - - - - 第 3 页，共 9 页 - - - - - - - - -精品学习资料 可选择p d f - - - - - - - - - - - - - - 第 3 页，共 9 页 - - - - - - - - -现（）a. 删掉 .

8、fade 类即可b. 添加删掉.fade 类即可c. 去掉 .active 类即可d去掉.in 类即可14. 怎样实现滚动监听事件（）a. 添加 data-toggle=“scroll”b. 添加 data-target=scrollc. 添加 data-spy=scrolld. 添加 data-dismiss= ”scroll”15. 关闭 modal 的按钮应该加什么属性（）a.data-dismiss=modalb.data-toggle=modalc. data-spy= modald. data-hide=true 16. 下列不属于 panel 的三要素是（）a.panel-hea

9、ding b.panel-body c.panel-footer d. panel-content17.用 javascript怎样让轮播图从第二个图片开始播放（）a. $(.carousel).carousel() b. $(.carousel).carousel(0) c. $(.carousel).carousel(1) d.$(.carousel).carousel(2) 18. 使用 collapse实现手风琴，通过哪个属性关联整个面板组 （）a. data-parent b. data-toggle c. data-target 精品学习资料 可选择p d f - - - - -

10、- - - - - - - - - 第 4 页，共 9 页 - - - - - - - - -精品学习资料 可选择p d f - - - - - - - - - - - - - - 第 4 页，共 9 页 - - - - - - - - -d. href 19. 如何让轮播图在页面切换时有动画（）a. 添加 in 类b. 添加 fade类c. 添加 active 类d.添加 slide 类20.关于轮播图说法正确的是（）。a.轮播图的页面切换索引从1 开始b. 下一页实现方式data-slide-to=“prev”c.可以使用 carousel-caption类为图片添加描述d. 上一页实现方

11、式data-slide-to=“-1”21. 对于 tooltip 的元素， data-placement 的作用是（）a. 工具提示条的显示大小b. 工具提示条的显示位置c. 工具提示条的显示动画d. 工具提示条的显示颜色22. 弹出框元素： 点我弹出 /隐藏弹出框 ，对于 title 和 data-content 属性的作用，错误的是（）a. title 可以不支持 html 标签b. title 是弹出框的标题c. data-content 是弹出框的内容精品学习资料 可选择p d f - - - - - - - - - - - - - - 第 5 页，共 9 页 - - - - - -

12、 - - -精品学习资料 可选择p d f - - - - - - - - - - - - - - 第 5 页，共 9 页 - - - - - - - - -d. data-content 可以支持 html 标签23. 滚动监听哪个属性可以设置滚动条距离顶端的位置距离（）a. data-offsety b. data-offset c.data-spy d. data-dismiss 24. 标签页加了 fade 给每个 tab-pane 使切换标签页时有动画，那么怎样让第一个默认显示出来（）a. 添加类 active b. 添加类 show c. 添加类 in d. 添加类 fadein

13、25. 怎样养 tooltips 通过点击事件弹出（）a. data-placement=”click”b. data-delay=”click”c. data-title=”click”d.data-trigger=”click”26. 怎样修改轮播图的页面切换的时间间隔（）a.data-intervalb.data-pause c.data-wrap d.data-time 27. 下列说法正确的是（）a. button 组件能同时支持工具提示和控制模态框。b. 不要在同一个元素上同时使用多个插件的data 属性c. 使用 bootstrap 插件不需要引用 jquery d. boots

14、trap 插件不可以单个引入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)精品学习资料 可选择p d f - - - - - - - - - - - - - - 第 6 页，共 9 页 - - - - - - - - -精品学习资料 可选择p d f - - - - - - - - - - - - - - 第 6 页，共 9 页

15、 - - - - - - - - -29. 关于分页组件说法错误的是（）a使用类 pagination 来实现b.pagination-lg、.pagination-sm 类提供了额外可供选择的尺寸。c.disabled 类不可用于翻页中的链接dprevious类和类 next 可以表示上一页、下一页30.下列哪个类起徽章的作用（）a.page-header b. jumbotron c. badge d. thumbnail 31. 怎样为进度条创建条纹效果（）a. 添加类 progress-bar-striped b. 添加类 progress-bar c. 添加类 progress-st

16、riped d.添加类 progressbar-striped 32. 制作 tab 切换，要显示的内容要放在下方哪个容器里面（）a.content b. tab-group c. tab-body d. tab-content二，多选题(针对以下题目，请选择最符合题目要求的答案。针对每一道题目，所有答案都选对， 则该题得分，漏选答案则该题得2 分，选了错误答案则该题不得分。每题4 分，共 20 分。33.关于 bootstrap 的布局容器说法正确的有（）a. .container 类用于固定宽度并支持响应式布局的容器。b. .container-fluid 类用于100% 宽度，占据全部视

17、口（ viewport）的容器。c. .container和.container-fluid 可以互相嵌套精品学习资料 可选择p d f - - - - - - - - - - - - - - 第 7 页，共 9 页 - - - - - - - - -精品学习资料 可选择p d f - - - - - - - - - - - - - - 第 7 页，共 9 页 - - - - - - - - -d.布局容器仅提供了 .container 和.container-fluid 两种容器34. 如果想要绘制带边框的条纹状的表格需要添加的类有（）a. table-condensedb. table-h

18、over c. table-borderedd. table-striped35.对于下拉菜单说法正确的是( ) a.表示有四个下拉选项的下拉菜单b./span 可以去掉而不影响功能c.可以加入 pull-right 使菜单右对齐d.可以加入 dropdown-menu-right 使菜单右对齐36.下列关于栅格系统说法正确的有（）a. 栅格系统每一行不能少于12 列b. 通过“行（ row）”在水平方向创建一组“列（column）”。c. 行 （row） ” 必须包含在.container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。精品学习资料 可选择p d f - - - - - - - - - - - - - - 第 8 页，共 9 页 - - - - - - - - -精品学习资料 可选择p d f - - - - - - - - - - - - - - 第 8 页，共 9 页 - - - - -