Bootstrap筆試題

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

2、uot;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

3、-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. 下面可以實現(xiàn)列偏移的類是（ ）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-res

4、ponsive類可以讓圖片支持響應(yīng)式布局，它的實現(xiàn)原理是（）A.設(shè)置了 max-width: 100%;和 height: auto;B. 設(shè)置了 max-width: 100%; 和 height: 100%;C. 設(shè)置了width: auto; 和 max-height: 100%;D. 設(shè)置了width: auto; 和 height: auto;7 .輸入框組想加上圖標，可以實現(xiàn)對表單控件的擴展的類是（）A. .input-group-btnB. .input-group-addonC. form-controlD.input-group-extra8 . 標簽頁垂直方向堆疊排列 ,

5、需要添加的類（）A.nav-vertical B.nav-tabs C.nav-pillsD.nav-stacked9 . 可以把導(dǎo)航固定在頂部的類是（）A. navbar-fixed-topB. navbar-fixed-bottomC. navbar-static-topD. navbar-inverse10 . 導(dǎo)航條在小屏幕會被折疊， 實現(xiàn)顯示和折疊功能的按鈕需要加什么（）A. 折疊按鈕加 data-toggle= collapsed ，折疊容器需要加collapsed 類B. 折疊按鈕加data-toggle= collapse ， 折疊容器需要加 collapse類C. 折疊按鈕加

6、data-toggle= scroll ，折疊容器需要加 collapse類D. 折疊按鈕加 data-spy= scroll ，折疊容器需要加 collapse 類11 .實現(xiàn)nav平鋪整行，應(yīng)該加哪個類（）A. nav-center B. nav-justified C. nav-left D. nav-right12 .模態(tài)框提供了哪些尺寸（）A. modal-xs modal-sm modal-md modal-lgB. modal-sm modal-md modal-lgC. modal-xs modal-smD. modal-sm modal-lg13 .如果你不需要模態(tài)框彈出時的

7、動畫效果（淡入淡出效果）怎樣實 現(xiàn)（）A.刪掉.fade類即可B.添加刪掉.fade類即可C.去掉.active類即可D.去掉.in類即可)B.添加 data-target=' scroll'D.添力口 data-dismiss= scroll”14 .怎樣實現(xiàn)滾動監(jiān)聽事件（A.添力口 data-toggle= "scroll”C.添力口 data-spy=' scroll'15 .關(guān)閉modal的按鈕應(yīng)該加什么屬性（）A.data-dismiss=' modal'B.data-toggle=' modal 'C. da

8、ta-spy= modal'D. data-hide='true'16 .下列不屬于panel的三要素是()A.panel-heading B.panel-body C.panel-footer D. panel-content17 .用JavaScript怎樣讓輪播圖從第二個圖片開始播放()A. $('.carousel').carousel()B. $('.carousel').carousel(0)C. $('.carousel').carousel(1)D.$('.carousel').carous

9、el(2)18 .使用collapse實現(xiàn)手風(fēng)琴，通過哪個屬性關(guān)聯(lián)整個面板組()A. data-parentB. data-toggleC. data-targetD. href19 .如何讓輪播圖在頁面切換時有動畫()A.添加in類B.添力口 fade類C.添力口 active類D.添力口 slide類20 .關(guān)于輪播圖說法正確的是（）A.輪播圖的頁面切換索引從1開始B.下一頁實現(xiàn)方式 data-slide-to= "prev”C.可以使用carousel-caption類為圖片添加描述D.上一頁實現(xiàn)方式 data-slide-to= "-1”21 .對于tooltip的

10、元素，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

11、="And some amazing content.">點我彈出 / 隱藏彈出框</button> ,對于title和data-content屬性的作用，錯誤的是（）A. title可以不支持html標簽B. title是彈出框的標題C. data-content是彈出框的內(nèi)容D. data-content可以支持html標簽D. data-dismiss23 .滾動監(jiān)聽哪個屬性可以設(shè)置滾動條距離頂端的位置距離（）A. data-offsetY B. data-offset C.data-spy24 .標簽頁加了 fade給每個tab-pane使切換標簽

12、頁時有動畫，那么怎樣讓第一個默認顯示出來（）A.添加類activeB.添加類showC.添加類inD.添加類fadeIn25.怎樣養(yǎng)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-time27 .下列說法正確的是（）A.

13、 button組件能同時支持工具提示和控制模態(tài)框。B.不要在同一個元素上同時使用多個插件的data屬性C.使用bootstrap插件不需要引用jQueryD. bootstrap插件不可以單個引入28 .怎樣只關(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-api')29 .

14、關(guān)于分頁組件說法錯誤的是()A.使用類pagination來實現(xiàn)B一pagination-lg、.pagination-sm類提供了額外可供選擇的尺寸。C. .disabled類不可用于翻頁中的鏈接D. previous類和類next可以表示上一頁、下一頁30 .下列哪個類起徽章的作用()A.page-header B. jumbotron C. badge D. thumbnail31 .怎樣為進度條創(chuàng)建條紋效果()A.添力口類 progress-bar-stripedB.添力口類 progress-barC.添力口類 progress-stripedD.添力口類 progressBar-s

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

16、r和.container-fluid 可以互相嵌套D.布局容器僅提供了 .container和.container-fluid兩種容器34 .如果想要繪制帶邊框的條紋狀的表格需要添加的類有（）A. table-condensedB. table-hoverC.table-borderedD. table-striped35.對于下拉菜單說法正確的是（）<d£v <><buTt»n <.lg，Jb5 b*tn -default drc>pdMni - toggle" Typfii"buttsfi" id*

17、9;"介白 pEtwnHmu 廣- t4（g.le>'dQpd wn" >< pan rlassciretR></span></buttcni>< ul ciassw"drGpd&ffi -meru" roe»-meftu* aria -labellectb7-"dropdowrirtnu 1">< 11 rale "pre s-e ntat ion j ca rele "ffienuitM* tabifidiBx»

18、;li -1- href "fl- >Act/a ></li >«li. iPfhle-Hpi'tftt*t"*sfnyIt* f .廣 hef*" Art«tKer cti中立打< 11 H pr a tt n tat ion - > c * r&l*wHwnuitt* 工21 曲就等、廣 href »* >s»rtih 1 frf el» ”卡/+ x/1 外< li rale*h pr（E sc n tat ten > < * rel r "wnui t c-en tabiffitox"" "1" href *f >Scpisr «t cd c/ul>A.表示有四個下拉選項的下拉菜單B.<span class= 'caret' ></span可以去掉而不影響功能C可以加入pull-right使菜單右對齊D.可以加入dropdown-menu-right使菜單右對齊36 .下列關(guān)于