Bootstrap筆測試試題

1、Bootstrap筆試題作者:1. 日期:一、單選題（針對以下題目，請選擇最符合題目要求的答案。針對每一道題目，所有答案都選對，則該題得分，所選答案錯誤或不能選出所有答案，則該題不得分。每題2.5分，共80分。）Bootstrap插件全部依賴是（）A. JavaScriptB. JQueryC. AngularJS2. NodeJS柵格系統(tǒng)小屏幕使用的類前綴是（）.col-xs-B.col-sm-C.col-md-D.col-lg-如下代碼中，想要在超小屏帛和小屏帛顯不兩列，在中屏帛和大屏幕顯示三列，三個div的class正確的寫法是（）<divclass="row"

2、><divclass="">item1</div><divclass="">item2</div><divclass="">item3</div></div>col-sm-6col-md-4,col-sm-6col-md-4,col-sm-6col-md-4A. col-sm-6col-lg-4col-sm-6col-lg-4,col-sm-6col-lg-4B. col-xs-6col-lg-4col-xs-6col-lg-4,col-xs-6

3、col-lg-43. col-xs-6col-md-4,col-xs-6col-md-4,col-xs-6col-md-4下面可以實(shí)現(xiàn)列偏移的類是（）A. .col-md-offset-*B. .col-md-push-*C. .col-md-pull-*4. .col-md-move-*表單元素要加上什么類，才能給表單添加圓角屬性，和陰影效果（）5. form-groupB.form-horizontalC.form-inlineD.form-controlimg-responsive類可以讓圖片支持響應(yīng)式布局，它的實(shí)現(xiàn)原理是（）A. 設(shè)置了max-width:100%;和height:au

4、to;B. 設(shè)置了max-width:100%;和height:100%;C. 設(shè)置了width:auto;和max-height:100%;6. 設(shè)置了width:auto;和height:auto;輸入框組想加上圖標(biāo)，可以實(shí)現(xiàn)對表單控件的擴(kuò)展的類是()A. .input-group-btnB.input-group-addon7. C.form-controlD.input-group-extra標(biāo)簽頁垂直方向堆疊排列，需要添加的類()nav-verticalB.nav-tabsC.nav-pillsD.nav-stacked可以把導(dǎo)航固定在頂部的類是()navbar-fixed-topn

5、avbar-fixed-bottomnavbar-static-topnavbar-inverse導(dǎo)航條在小屏幕會被折疊，實(shí)現(xiàn)顯示和折疊功能的按鈕需要加什么8. ()折疊按鈕加data-toggle='collapsed，折疊容器需要加collapsed類折疊按鈕加data-toggle='collapse'，折疊容器需要加collapse類折疊按鈕加data-toggle='scroll'，折疊容器需要加collapse類折疊按鈕加data-spy='scroll'，折疊容器需要加collapse類實(shí)現(xiàn)nav平鋪整行,應(yīng)該加哪個類（）9

6、. nav-centerB.nav-justifiedC.nav-leftD.nav-right模態(tài)框提供了哪些尺寸（）A. modal-xsmodal-smmodal-mdmodal-lgB. modal-smmodal-mdmodal-lgC. modal-xsmodal-sm10. modal-smmodal-lg如果你不需要模態(tài)框彈出時的動畫效果（淡入淡出效果）怎樣實(shí)現(xiàn)（）A. 刪掉.fade類即可B. 添加刪掉.fade類即可C. 去掉.active類即可11. 去掉.in類即可怎樣實(shí)現(xiàn)滾動監(jiān)聽事件（）A. 添加data-toggle=“scroll”B.添加data-target=

7、'scroll'C.添加data-spy=scroll'D.添加data-dismiss='scroll”關(guān)閉modal的按鈕應(yīng)該加什么屬性（）A. data-dismiss=modal'B.data-toggle=modal'12. C.data-spy=modal'D.data-hide='true'下列不屬于panel的三要素是()13. panel-headingB.panel-bodyC.panel-footerD.panel-content用JavaScript怎樣讓輪播圖從第二個圖片開始播放()A. $(&#

8、39;.carousel').carousel()B.$('.carousel').carousel(0)C.$('.carousel').carousel(1)D.$('.carousel').carousel(2)14. 使用collapse實(shí)現(xiàn)手風(fēng)琴，通過哪個屬性關(guān)聯(lián)整個面板組()A. data-parentB. data-toggleC. data-target15. href如何讓輪播圖在頁面切換時有動畫()A. 添加in類B. 添加fade類C. 添加active類16. 添加slide類關(guān)于輪播圖說法正確的是（）A. 輪播圖

9、的頁面切換索引從1開始B. 下一頁實(shí)現(xiàn)方式data-slide-to="prev”C. 可以使用carousel-caption類為圖片添加描述17. 上一頁實(shí)現(xiàn)方式data-slide-to="-1”對于tooltip的元素，data-placement的作用是（）A.工具提示條的顯示大小B.工具提示條的顯示位置C.工具提示條的顯示動畫D.工具提示條的顯示顏色彈出框元素：buttontype="button"class="btnbtn-lgbtn-danger"data-toggle="popover"id=”m

10、ypopover”title="thisismyPopoveelement"data-animation=”true”data-content="Andsomeamazingcontent."點(diǎn)我彈出/隱藏彈出框/button，對于title和data-content屬性的作用，錯誤的是（）A. title可以不支持html標(biāo)簽B. title是彈出框的標(biāo)題C. data-content是彈出框的內(nèi)容18. data-content可以支持html標(biāo)簽滾動監(jiān)聽哪個屬性可以設(shè)置滾動條距離頂端的位置距離（）19. A.data-offsetYB.data-o

11、ffsetC.data-spyD.data-dismiss標(biāo)簽頁加了fade給每個tab-pane使切換標(biāo)簽頁時有動畫，那么怎樣讓第一個默認(rèn)顯示出來（）A. 添加類activeB. 添加類showC. 添加類inD. 添加類fadeIn20. 怎樣養(yǎng)tooltips通過點(diǎn)擊事件彈出（）A.data-placement=”click”B.data-delay=”click”21. C.data-title=”click”D.data-trigger=”click”怎樣修改輪播圖的頁面切換的時間間隔（）22. A.data-intervalB.data-pauseC.data-wrapD.data

12、-time下列說法正確的是（）A. button組件能同時支持工具提示和控制模態(tài)框。B. 不要在同一個元素上同時使用多個插件的data屬性使用bootstrap插件不需要引用jQueryC. bootstrap插件不可以單個引入23. 怎樣只關(guān)閉警告框的data-API()A.$(document).off('.data-api')B.$(document).off('.alert-data-api')C.$(document).off('.data-api.alert')D.$(document).off('.alert.data-ap

13、i')A. 關(guān)于分頁組件說法錯誤的是()使用類pagination來實(shí)現(xiàn).pagination-lg、.pagination-sm類提供了額外可供選擇的尺寸。B. .disabled類不可用于翻頁中的鏈接previous類和類next可以表示上一頁、下一頁24. 下列哪個類起徽章的作用()A.page-headerB.jumbotronC.badgeD.thumbnail25. 怎樣為進(jìn)度條創(chuàng)建條紋效果()A. 添加類progress-bar-stripedB. 添加類progress-barC. 添加類progress-stripedD. 添加類progressBar-striped

14、26. 制作tab切換，要顯示的內(nèi)容要放在下方哪個容器里面()A.contentB.tab-groupC.tab-bodyD.tab-content二，多選題（針對以下題目，請選擇最符合題目要求的答案。針對每一道題目，所有答案都選對，則該題得分，漏選答案則該題得2分,選了錯誤答案則該題不得分。每題4分，共20分。27. 關(guān)于bootstrap的布局容器說法正確的有（）A. .container類用于固定寬度并支持響應(yīng)式布局的容器。B. .container-fluid類用于100%寬度，占據(jù)全部視口（viewport）的容器。C. .container和.container-fluid可以互相

15、嵌套28. 布局容器僅提供了.container和.container-fluid兩種容器如果想要繪制帶邊框的條紋狀的表格需要添加的類有（）A.table-condensedB. table-hoverC. table-bordered29. table-striped對丁下拉菜單說法正確的是（）1<d£v<>KbutOrnbtn-defAyJt.dropdoMii-toggle"type#"but:tofi"!<"dreirfswni'y1"<tt0-tcigieB'drepd>w

16、n'>卯Nii<&pancl*s£-"ci.ret"*</span></buttQn><ulclaii*"drcf>dcwnnenjroie-mtiu*aria-labslledby-"drcpdcHrfHfienu1"><11rolen.pres-entationcarelenff*Huite*"tabift4ex»u-l-href>ActIjmi</ak/11li.sr*l«*Hptce»*t1#*>

17、;Jj.Krriui.l:*.t#biMtw®Ra1*X千<11nsle*Hprts，tnt*tioni*>c*n&l<iiHwnuitt<，H拓機(jī)心k1"*i*eA. <lirale-riprigsentation"><«relrs"«nuitr«"tabindltM""»1"hrefi»"*">Scpar«ted打id*Jj2A.表示有四個下拉選項(xiàng)的下拉菜單B.<spanclass='caret></span可以去掉而不影響功能C可以加入pull-right使菜單右對齊可以加入dropdown-menu-right使菜單右對齊下列關(guān)于柵格系