前端開發(fā)技術(shù)復(fù)習(xí)題庫附有答案

前端開發(fā)技術(shù)復(fù)習(xí)題庫1、bootstrap中，以下哪個類名無法設(shè)置文本的粗細(xì)（）[單選題]*A、font-weight-lightB、font-weight-boldC、font-weight-bolderD、text-wrap(正確答案)2、添加比常規(guī)尺寸更大的輸入框時(shí)，添加的類名為（），添加別常規(guī)尺寸更小的輸入框時(shí)，添加的類名為（C）[單選題]*A、form-sm，form-lgB、form-control-lg，form-control-smC、form-control-lg，form-control-sm(正確答案)D、form-lg，form-sm3、以下哪個是bootstrap的優(yōu)點(diǎn)（）[單選題]*A、響應(yīng)式布局B、移動設(shè)備優(yōu)先C、簡單易上手D、以上都對(正確答案)4、如果要實(shí)現(xiàn)手風(fēng)琴效果的折疊面板，那么需要為多個.collpase添加（）屬性。[單選題]*A、hrefB、targetC、data-parent(正確答案)D、parent5、使用卡片組排列卡片組件的類名是（），使用卡片陣列排列卡片組件的類名是（）[單選題]*A、card-group，.card-deck(正確答案)B、.card-deck，.card-deckC、card-group，card-groupD、.card-deck，card-group6、下面類名中，可以添加比常規(guī)加載動畫尺寸更小的加載動畫的是（）[單選題]*A、spinner-grow-smB、spinner-border-smC、AB都是(正確答案)D、AB都不是7、如果要為每個選項(xiàng)卡添加漸入漸出式效果，則應(yīng)該為每一個tab-pane添加類名（）。[單選題]*A、shadowB、animateC、fade(正確答案)D、fadeIn8、下列說法錯誤的是（）[單選題]*A、設(shè)置項(xiàng)目垂直對齊需要為每個項(xiàng)目添加類名justify-content-*(正確答案)B、設(shè)置項(xiàng)目垂直對齊需要為項(xiàng)目的容器.row添加類名align-items-*C、設(shè)置項(xiàng)目水平對齊需要為項(xiàng)目的父元素.row添加類名justify-content-*D、如果要將項(xiàng)目進(jìn)行換行時(shí)，可以新添加div.row實(shí)現(xiàn)9、在引用了bootstrap的前提下，下面代碼中所實(shí)現(xiàn)的項(xiàng)目的順序是（）

<divstyle=""class="d-flex">

<divclass="order-2">項(xiàng)目1</div>

<divclass="order-1">項(xiàng)目2</div>

<div>項(xiàng)目3</div>

</div>[單選題]*A、項(xiàng)目1、項(xiàng)目2、項(xiàng)目3B、項(xiàng)目1、項(xiàng)目3、項(xiàng)目2C、項(xiàng)目3、項(xiàng)目1、項(xiàng)目2D、項(xiàng)目3、項(xiàng)目2、項(xiàng)目1(正確答案)10、以下類名中，為彈性項(xiàng)目添加正向包裹的類名為（）。[單選題]*A、flex-wrap(正確答案)B、flex-nowrapC、flex-wrap-reverseD、都不是1、使網(wǎng)格布局時(shí)，如果要設(shè)置某個項(xiàng)目在超小屏幕中（屏幕寬度<576px）占據(jù)整行，而中等屏幕中（屏幕寬度≥768px）占據(jù)4列，則應(yīng)該為項(xiàng)目添加類名為____col-12col-md-4_____。[填空題]*空1答案：請?jiān)O(shè)置答案空2答案：請?jiān)O(shè)置答案2、添加選項(xiàng)卡時(shí)，通過為菜單項(xiàng)a標(biāo)簽的___href_____屬性實(shí)現(xiàn)菜單項(xiàng)與選項(xiàng)卡面板一一對應(yīng)。[填空題]*空1答案：請?jiān)O(shè)置答案空2答案：請?jiān)O(shè)置答案3、使用列表組時(shí)，列表組的容器類名為_____list-group_______，列表組中的項(xiàng)目的類名為_____list-group-item____。[填空題]*空1答案：請?jiān)O(shè)置答案空2答案：請?jiān)O(shè)置答案空3答案：請?jiān)O(shè)置答案空4答案：請?jiān)O(shè)置答案4、如果要添加旋轉(zhuǎn)的加載動畫，那么使用_____spinner-border_____類名即可[填空題]*空1答案：請?jiān)O(shè)置答案空2答案：請?jiān)O(shè)置答案5、bootstrap預(yù)設(shè)了小、常規(guī)尺寸、大三個尺寸的分頁組件，分別實(shí)用類名_pagination-sm___、___pagination__、__pagination-lg_來定義著三種尺寸的分頁組件。[填空題]*空1答案：請?jiān)O(shè)置答案空2答案：請?jiān)O(shè)置答案1、在引用了bootstrap的前提下，下面代碼中所實(shí)現(xiàn)的項(xiàng)目的順序是（）

<divstyle=""class="d-flex">

<divclass="order-2">項(xiàng)目1</div>

<divclass="order-1">項(xiàng)目2</div>

<div>項(xiàng)目3</div>

</div>[單選題]*A、項(xiàng)目1、項(xiàng)目2、項(xiàng)目3B、項(xiàng)目1、項(xiàng)目3、項(xiàng)目2C、項(xiàng)目3、項(xiàng)目1、項(xiàng)目2D、項(xiàng)目3、項(xiàng)目2、項(xiàng)目1(正確答案)2、如果要添加內(nèi)聯(lián)式表單，則添加的類名為（）[單選題]*A、d-inlineB、input-inlineC、form-inline(正確答案)D、form-control3、如果為輪播組件添加圖片指示器，實(shí)現(xiàn)圖片與指示器的一一對應(yīng)，那么該指示器的容器的類名為（）[單選題]*A、carouselB、carousel-innerC、carousel-itemD、carousel-indicators(正確答案)4、要為警告框添加關(guān)閉按鈕，那么需要為該按鈕添加（）屬性，才可以做到關(guān)閉按鈕能正確的響應(yīng)事件。[單選題]*A、close()B、closeC、alert(“close”)(正確答案)D、ABC都不對5、如果要添加白綠相間條紋狀的進(jìn)度條動畫，那么為.progress-bar添加類名為（）[單選題]*A、progress-bar-stripedB、bg-successC、progress-bar-animatedD、ABC都需要(正確答案)6、、如果要為按鈕填充顏色為藍(lán)色，則使用的類名為（）,如果要將按鈕的輪廓設(shè)置為藍(lán)色，則使用的類名為（）。[單選題]*A、btn-blue,border-blueB、btn-primary,btn-outline-primary(正確答案)C、btn-outline-primary,btn-primaryD、border-blue,btn-blue7、以下哪個類名用于設(shè)置文本的顏色（）[單選題]*A、border-dangerB、table-dangerC、bg-dangerD、text-danger(正確答案)8、如果要為徽章添加鏈接效果，那么可以使用（）標(biāo)簽來添加徽章。[單選題]*A、buttonB、a(正確答案)C、inputD、span9、定義模態(tài)框時(shí)，模態(tài)框的主體內(nèi)容應(yīng)放置在（）中[單選題]*A、modalB、modal-body(正確答案)C、modal-titleD、modal-head10、切換模態(tài)框的狀態(tài)，使用的方法是（）[單選題]*A、modal(“show”)B、modal(“hide”)C、modal(“toggle”)(正確答案)D、modal(“dispose”)1、定義popover工具時(shí)，使用_____title______屬性可以定義它的頁眉。[填空題]*空1答案：請?jiān)O(shè)置答案空2答案：請?jiān)O(shè)置答案2、要設(shè)置元素在小型瀏覽器的屏幕上向左浮動，而中等或中等以上屏幕中向右浮動，那么使用的類名為___float-sm-leftfloat-md-right__。[填空題]*3、如果要禁用某個按鈕，則應(yīng)該為該按鈕添加屬性________。[填空題]*4、使用列表組時(shí)，列表組的容器類名為__list-group，列表組中的項(xiàng)目的類名為_list-group-item_。[填空題]*_________________________________5、使用網(wǎng)格布局時(shí)，如果在一行中，添加了6個項(xiàng)目，且為每個項(xiàng)目添加了類名col，則每個項(xiàng)目的寬度占據(jù)___2____列。[填空題]*空1答案：請?jiān)O(shè)置答案空2答案：請?jiān)O(shè)置答案1.使用bootstrap4中的網(wǎng)格布局時(shí)，一行中的項(xiàng)目不可以是（）個。[單選題]*A、7B、12C、15(正確答案)D、12、設(shè)置導(dǎo)航菜單的居中對齊，使用的類名是（）[單選題]*A、nav-centerB、align-content-centerC、justify-content-center(正確答案)D、align-items-center3、定義tooitlp工具時(shí)，（）屬性用于定義該工具的彈出方向。[單選題]*A、toopitle-direationB、data-titleC、data-placement(正確答案)D、data-offset4、設(shè)置元素顯示為塊級元素的類名為（）[單選題]*A、d-block(正確答案)B、d-flexC、d-inlineD、d-none5、添加列表組里的項(xiàng)目時(shí)，可以使用（）類名實(shí)現(xiàn)。[單選題]*A、listB、list-groupC、input-groupD、list-group-item(正確答案)6、如果要添加內(nèi)聯(lián)式表單，則添加的類名為（）[單選題]*A、d-inlineB、input-inlineC、form-inline(正確答案)D、form-control7、清除元素的浮動使用的類名有（）[單選題]*A、float-leftB、float-rightC、float-noneD、clearfix(正確答案)8、如果要添加旋轉(zhuǎn)加載動畫，那么使用的類名為（）[單選題]*A、spinner-border(正確答案)B、spinner-animationC、spinner-growD、ABC都不對9、使用折疊面板時(shí)，如果使用超鏈接來定義折疊面板的“開關(guān)”那么通過（）屬性實(shí)現(xiàn)“開關(guān)”與面板的對應(yīng)。[單選題]*A、href(正確答案)B、targetC、data-hrefD、data-target10、popover工具中的主體內(nèi)容應(yīng)該使用（）屬性來定義。[單選題]*A、popover-bodyB、data-content(正確答案)C、data-bodyD、data-popover1、使用bootstrap將按鈕組垂直排列，則使用的類名為_btn-group-vertical_。[填空題]*_________________________________2、實(shí)現(xiàn)切換折疊面板的狀態(tài)，使用的方法是__collapse(“toggle”)_。[填空題]*_________________________________3、定義卡片組件時(shí)，卡片組件的主體內(nèi)容設(shè)置類名為__Card-body__。[填空題]*_________________________________4、設(shè)置元素的定位方式為絕對定位時(shí)類名為_position-absolute_，相對定位時(shí)的類名為_position-relative_。[填空題]*_________________________________5、折疊面板的容器所使用的類名為__collapse__。[填空題]*_________________________________1、如果要為按鈕填充顏色為藍(lán)色，則使用的類名為（）,如果要將按鈕的輪廓設(shè)置為藍(lán)色，則使用的類名為（）。[單選題]*A、btn-blue,border-blueB、btn-primary,btn-outline-primary(正確答案)C、btn-outline-primary,btn-primaryD、border-blue,btn-blue2、下面代碼要在一行中添加三個項(xiàng)目，項(xiàng)目寬度分別占據(jù)3列、4列、3列，且第二個項(xiàng)目與第三個項(xiàng)目分別向右偏移一列，空白處的代碼應(yīng)該是（）

<divclass="container">

<divclass="col-3"><imgsrc="images/img1.jpg"class="img-fluid"></div>

<divclass="________offset-1"><imgsrc="images/img2.jpg"class="img-fluid"></div>

<divclass="col-3________"><imgsrc="images/img3.jpg"class="img-fluid"></div>

</div>[單選題]*A、offset-1,col-3B、offset-2,col-4C、col-4,offset-1(正確答案)D、col-3,offset-33、添加prompt組件時(shí)，通過（）參數(shù)定義輸入框的類型。[單選題]*A、inputOptionsB、valueC、localeD、inputType(正確答案)4、添加prompt()組件時(shí)，設(shè)置該組件的垂直居中對齊方式的屬性為（）[單選題]*A、VerticalB、centerVertical(正確答案)D、horizontalD、centerhorizontal5、下面代碼可以顯示元素上、左、右邊框的是（）[單選題]*A、<divclass="borderborder-bottom-0border-info"></div>B、<divclass="border-topborder-leftborder-rightborder-info"></div>C、AB都可以(正確答案)D、AB都不可以6、使用媒體對象時(shí)，要實(shí)現(xiàn)媒體對象中，媒體內(nèi)容與文字部分的對齊，可使用類名（）[單選題]*A、justify-content-*B、align-items-*C、align-self-*(正確答案)D、align-content-*7、bootstrap中，以下哪個類名無法設(shè)置文本的粗細(xì)（）[單選題]*A、font-weight-lightB、font-weight-boldC、font-weight-bolderD、text-wrap(正確答案)8、以下哪個類名可以定義同一主軸上的項(xiàng)目的寬度相等（）[單選題]*A、flex-fill(正確答案)B、justify-content-centerC、align-items-centerD、align-self-center9、定義加載動畫的位置時(shí)，可以使用以下哪種方式（）[單選題]*A、通過mr-auto或者ml-autoC、通過float-left或float-right來設(shè)置位置B、通過text-left、text-cnter、text-right來設(shè)置位置D、ABC都對(正確答案)10、浮動排列卡片組件時(shí)，使用的類名是（）[單選題]*A、card-floatB、floatC、card-column(正確答案)D、column1、bootstrap中設(shè)置彈性項(xiàng)目向左自動浮動使用的類名為__ml-auto___，向右自動浮動設(shè)置的類名為__mr-auto___。[填空題]*空1答案：請?jiān)O(shè)置答案空2答案：請?jiān)O(shè)置答案2、如果要將元素顯示為圓形，可以使用類名______rounded-circle______。[填空題]*空1答案：請?jiān)O(shè)置答案空2答案：請?jiān)O(shè)置答案3、實(shí)現(xiàn)卡片內(nèi)的內(nèi)容水平排列的方法是_彈性布局或網(wǎng)格布局_。[填空題]*_________________________________4、如果要將卡片頂部的圖像設(shè)置為卡片的背景，那么需要為該圖像添加類名為_card-img-overlay__。[填空題]*_________________________________5、使用日期選擇器時(shí)，設(shè)置日期選擇器的格式所使用的參數(shù)為_____format____。[填空題]*空1答案：請?jiān)O(shè)置答案空2答案：請?jiān)O(shè)置答案一、選擇題1、使用bootstrap4中的網(wǎng)格布局時(shí)，為保證項(xiàng)目不發(fā)生換行，一行最多可分為（）列。[單選題]*A、6B、9C、12(正確答案)D、152、使用bootstrap將文本框禁用，則使用的類名為（）。[單選題]*A、activeB、activedC、disableD、disabled(正確答案)3、如果要為每個選項(xiàng)卡添加漸入漸出式效果，則應(yīng)該為每一個tab-pane添加類名（）。[單選題]*A、shadowB、animateC、fade(正確答案)D、fadeIn4、下面代碼所實(shí)現(xiàn)的功能，說法正確的是（）

bootbox.confirm("確定要關(guān)機(jī)嗎?",function(result){

if(result){

bootbox.alert("即將關(guān)機(jī)")

}

else{

bootbox.alert("已取消")

}

})[單選題]*A、單擊確認(rèn)按鈕顯示即將關(guān)機(jī)會話框，單擊取消按鈕顯示已取消會話框。(正確答案)B、單擊確認(rèn)和取消按鈕都顯示即將關(guān)機(jī)會話框C、單擊關(guān)機(jī)和取消按鈕都顯示已取消會話框D、單擊取消按鈕顯示即將關(guān)機(jī)會話框，單擊確認(rèn)按鈕顯示已取消會話框。5、下面哪行代碼，可以不能實(shí)現(xiàn)設(shè)置顏色選擇器的默認(rèn)顏色為紅色。（）[單選題]*A、$("#color").colorpicker({"color":"#ff0000"})B、$("#color").colorpicker({"color":"red"})C、$("#color").colorpicker({"color":"rgb(255,0,0)"})D、$("#color").colorpicker("#168130")(正確答案)6、添加分頁時(shí)，需要為分頁內(nèi)的每一項(xiàng)添加類名（）。[單選題]*A、pageB、pagination(正確答案)C、itemD、breadcrumb7、下面代碼要在一行中添加三個項(xiàng)目，項(xiàng)目寬度分別占據(jù)3列、4列、3列，且第二個項(xiàng)目與第三個項(xiàng)目分別向右偏移一列，空白處的代碼應(yīng)該是（）

<divclass="container">

<divclass="row">

<divclass="col-3"><imgsrc="images/img1.jpg"class="img-fluid"></div>

<divclass="______offset-1"><imgsrc="images/img2.jpg"class=