本文编写于 218 天前,最后修改于 135 天前,其中某些信息可能已经过时。

1+x证书Web前端开发Bootstrap专项练习

一、单选题(针对以下题目,请选择最符合题目要求的答案。针对 每一道题目,所有答案都选对,则该题得分,所选答案错误或不能选出所有答案,则该题不得分。每题2.5分,共80分。) 

官方QQ群

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正确的写法是(   ) 
<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-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
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-control 

6. 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-btn       B. .input-group-addon  C. form-control          D. input-group-extra 

8. 标签页垂直方向堆叠排列,需要添加的类() 

A.nav-vertical B.nav-tabs C.nav-pills D.nav-stacked 

9. 可以把导航固定在顶部的类是() 
A. navbar-fixed-top B. navbar-fixed-bottom C. navbar-static-top D. navbar-inverse 

10. 导航条在小屏幕会被折叠,实现显示和折叠功能的按钮需要加什么 ()   

A. 折叠按钮加data-toggle=’collapsed’,折叠容器需要加collapsed类 
B. 折叠按钮加data-toggle=’collapse’,折叠容器需要加collapse类 
C. 折叠按钮加data-toggle=’scroll’,折叠容器需要加collapse类 
D. 折叠按钮加data-spy=’scroll’,折叠容器需要加collapse类 

11. 实现nav平铺整行,应该加哪个类()             

A. nav-center  B. nav-justified  C. nav-left  D. nav-right   

12. 模态框提供了哪些尺寸(   ) 

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. 如果你不需要模态框弹出时的动画效果(淡入淡出效果)怎样实现(   ) 

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-heading B. panel-body C. panel-footer D. panel-content 

17.用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-targetD. href 

19. 如何让轮播图在页面切换时有动画(   )

 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-offsetY  B. data-offset    C.data-spy      D. data-dismiss 

24. 标签页加了fade给每个tab-pane使切换标签页时有动画,那么怎样让第一个默认显示出来() 

A. 添加类active B. 添加类show C. 添加类in D. 添加类fadeIn 

25. 怎样养tooltips通过点击事件弹出(   )  
A. data- placement=”click”  B. data- delay=”click”       C. data- title=”click”          D.data-trigger=”click”   

26. 怎样修改轮播图的页面切换的时间间隔(   ) 

A.data- interval  B.data- pause    C.data- wrap       D.data-time 

27. 下列说法正确的是(   ) 

A. button 组件能同时支持工具提示和控制模态框。 
B. 不要在同一个元素上同时使用多个插件的 data 属性 
C. 使用bootstrap插件不需要引用jQuery 
D. 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-header    B. jumbotron  C. badge     D. thumbnail 

31. 怎样为进度条创建条纹效果(  )
 A. 添加类progress-bar-striped
 B. 添加类progress-bar
 C. 添加类progress-striped 
D.添加类progressBar-striped 

32、下面哪个()类用于固定宽度并支持响应式布局的容器?()

A、container

B、center

C、containers

D、containerFluid

33、栅格系统中,如果一“行(row)”中包含了的“列(column)”大于 (),多余的“列(column)”所在的元素将被作为一个整体另起一行排列。()

A、8

B、10

C、12

D、15

34、下面选项哪个()类为表格和其中的每个单元格增加边框?()

A、table-hover

B、table-bordered

C、table-condensed

D、table

35、通过为表单添加 下面哪个()类,并联合使用 Bootstrap 预置的栅格类,可以将 label 标签和控件组水平并排布局。()

A、form-control

B、form-inline

C、form-group

D、form-horizontal

36、下面那些选项()是栅格参数类前缀?

A.、col-xs-1

B、col-sm-1

C、col-ng-1

D、col-md-1

37、下面那些()类可以改变按钮大小。

A、btn-lg

B、btn-sm

C、btn-md

D、btn-xs

38. 制作tab切换,要显示的内容要放在下方哪个容器里面()  
 A. content  B. tab-group  C. tab-body  D. tab-content 

二,多选题 (针对以下题目,请选择最符合题目要求的答案。针对 每一道题目,所有答案都选对,则该题得分,漏选答案则该题得2分,选了错误答案则该题不得分。每题4分,共20分。 

38.关于bootstrap的布局容器说法正确的有(     ) 
A. .container 类用于固定宽度并支持响应式布局的容器。 
B. .container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。    
C. .container和.container-fluid可以互相嵌套  
D.布局容器仅提供了.container和.container-fluid两种容器

40. 如果想要绘制带边框的条纹状的表格需要添加的类有(  )  
A. table-condensed B. table-hover       C. table-bordered     D. table-striped 

41. 对于下拉菜单说法正确的是(   )   
A.表示有四个下拉选项的下拉菜单  
B.<span class=‘caret’></span 可以去掉而不影响功能 
C.可以加入pull-right使菜单右对齐     
D.可以加入dropdown-menu-right使菜单右对齐 

42.下列关于栅格系统说法正确的有(   )  
A. 栅格系统每一行不能少于12列 
B. 通过“行(row)”在水平方向创建一组“列(column)”。
 C. 行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。 
D. 如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。


43.下列哪些是辅助类  ()   

A.text-muted B.text-primary C.text-info   D.text-danger