1、 如果讓一個元素在pc端顯示而在手機端隱藏,下列選項正確的是(b)。
A、 visible-xs-8 hidden-md
B、 visible-md-8 hidden-xs
C、 visible-md-8 hidden-sm
D、 visible-sm-8 hidden-md
詳解:
a、 超小屏幕(<768px)顯示,中屏(>=992px)隱藏,所以錯誤
b、 中屏(>=992px)顯示,超小屏幕(<768px)隱藏,所以正確
c、 中屏(>=992px)顯示,小屏幕(>=768px)隱藏,所以錯誤
d、 小屏幕(>=768px)顯示,中屏(>=992px)隱藏,所以錯誤
2、 在bootstrap中,下列的類(c)可以使一個元素在打印使隱藏。
A、visible-print-block
B、 visible-print-inline
C、 hidden-print
D、 print-hidden
詳解:
a、 瀏覽器:隱藏。打印機:可見。
b、 瀏覽器:隱藏。打印機:可見。
c、 瀏覽器:可見。打印機:隱藏。
d、 Bootstrap的打印類裏面沒有這個類。
3、 在bootstrap中,柵格系統的標準用法(c)是錯誤的。
A、<div class="container"><div class="row"></div></div>
B、 <div class="row"><div class="col-md-1"></div></div>
C、 <div class="row"><div class="container"></div></div>
D、 <div class="col-md-1"><div class="row"></div></div>
詳解:
a、 .row的行必須包含在.container的容器中,所以正確。
b、 在.row的行中可以添加.column的列,所以正確
c、 .row的行必須包含在.container的容器中,所以錯誤。
d、 在.column的列中可以嵌套.row的行,所以正確。
4、 下列(d)不是正確的輔助類。
A、.text-muted。灰色
B、 .text-danger。
C、 .tex-success。
D、 .text-title。
詳解:正確的輔助類有:
a、 text-muted/text-primary/text-success/text-info/text-warning/text-danger
b、 text-muted/text-primary/text-success/text-info/text-warning/text-danger
c、 text-muted/text-primary/text-success/text-info/text-warning/text-danger
d、 text-muted/text-primary/text-success/text-info/text-warning/text-danger
5、 在bootstrap中,關於彈性佈局的屬性錯誤的是(d)。
A、flex
B、 flex-direction
C、 justify-content
D、 flex-container
詳解:
a、 flex:伸縮性
b、 flex-direction:伸縮流動性
c、 justify-content:主軸對齊
d、 flex-wrap:伸縮換行,不是flex-container,沒有這個方法
6、 在bootstrap中,關於flex-direction屬性值錯誤的是(a)。
A、col
B、 row
C、 row-reverse
D、 column-reverse
詳解:
a、 應該是:column(元素從上到下排列)。所以錯誤。
b、 row:默認值,元素從左到右排列。正確。
c、 row-reverse:元素從右到左排列。正確。
d、 column-reverse:元素從下到上排列。正確。
7、 在bootstrap中,關於flex-wrap屬性值錯誤的是(b)。
A、nowrap
B、colwrap
C、wrap
D、wrap-reverse
詳解:
a、nowrap:默認值,伸縮容器單行顯示,伸縮項目不會換行。所以正確
b、沒有這個屬性值,所以錯誤。
c、wrap:伸縮容器多行顯示,伸縮項目會換行。所以顯示正確。
d、wrap-reverse:伸縮容器多行顯示,伸縮項目會換行,且顛倒行順序。正確。
8、 在bootstrap中,關於justify-content屬性值錯誤的是(c)。
A、flex-start
B、flex-end
C、middle
D、space-between
詳解:
a、flex-start:向一行的起始位置靠齊,所以正確。
b、flex-end:向一行的結束位置靠齊,所以正確。
c、應該是center:向一行的中間位置靠齊,所以錯誤。
d、space-between:平均分佈在行內,第一個伸縮項目在一行的最開始。最後一個伸縮項目在一行的最終點,所以正確。
9、 在bootstrap中,關於align-items屬性值錯誤的是(d)。
A、flex-start
B、flex-end
C、center
D、underline
詳解:
a、flex-start:在側軸起點的外邊距緊靠該行在側軸起始邊,所以正確。
b、flex-end:在側軸終點邊的外邊距緊靠該行在側軸終點邊,所以正確。
c、center:外邊距盒在該行的側軸上居中放置,所以正確。
d、應該是baseline:根據第一行文字的基線對齊,所以錯誤。
10、 在bootstrap中,(b)不是媒體查詢類型的值。
A、all
B、speed
C、handheld
D、print
詳解:
a、所有設備,所以正確。
b、不是媒體查詢類型的值,所以錯誤。
c、便攜設備,所以正確。
d、打印用紙或打印預覽視圖,所以正確。
11、 在bootstrap中,()不是媒體特性的屬性。
A、device-width
B、width
C、background
D、orientation
詳解:
a、device-width:設置屏幕的輸出寬度,所以正確。
b、width:渲染界面的寬度,所以正確。
c、應該是color:設置每種色彩的字節數,所以錯誤。
d、orientation:設置是是橫屏或者豎屏,所以正確。
12、 在bootstrap中,(c)是錯誤的媒體查詢的寫法。
A、@media all and (min-width:1024px) { };
B、@media all and (min-width:640px) and (max-width:1023px) { };
C、@media all and (min-width:320px) or (max-width:639px) { };
D、@media screen and (min-width:320px) and (max-width:639px) { };
詳解:
a、屏幕分辨率大於1024px,所以正確。
b、屏幕介於640px和1023px之間,所以正確。
c、Bootstrap的媒體查詢中沒有or關鍵詞,所以錯誤。
d、屏幕介於320px和639px之間,所以正確。
13、 在bootstrap中,(b)不屬於柵格系統的實現原理。
A、自定義容器的大小。平均分爲12份
B、基於JavaScript開發的組件
C、結合媒體查詢
D、調整內外邊距
詳解:
a) 可以自定義,分了12份。俗稱12柵格系統,所以正確。
b) 基於jQuery開發的組件,所以錯誤。
c) 是實現流式佈局的關鍵所在,所以正確。
d) Margin-left/margin-right: 15px;所以正確。
14、 在bootstrap中,關於響應式柵格系統(a)的描述是錯誤的。
A、.col-sx-:超小屏幕(<768px)。
B、.col-sm-:小屏幕、平板(>=768px)。
C、.col-md-:中等屏幕(>=992px)。
D、.col-lg-:大屏幕(>=1200px)。
詳解:
a) col-xs-:超小屏幕,所以錯誤。
b) small,所以正確。
c) middle,所以正確。
d) large,所以正確。
15、 在bootstrap中,以下的(b)不是文本對其的方式。
A、.text-left
B、.text-middle
C、.text-right
D、text-justify
詳解:
a) 左對齊用text-left,所以正確
b) 居中用text-center,所以錯誤
c) 右對齊用text-right,所以正確
d) 兩端對齊用text-justify,所以正確
16、 在bootstrap中,下列(c)不屬於驗證提示狀態的類。
A、.has-warning
B、.has-error
C、.has-danger
D、.has-success
詳情:
a) .has-warning:警告(黃色)。所以正確。
b) .has-error:錯誤(紅色)。所以正確。
c) 驗證提示狀態沒有這個類。所以錯誤。
d) .has-success:成功(綠色)。所以正確。
17、 在bootstrap中,(d)不屬於媒體查詢的關鍵詞。
A、and
B、not
C、only
D、or
詳解:
a) and:同時滿足這兩者時生效,到達限定範圍,所以正確。
b) not:排除某種指定的媒體類型,即排除符合表達式的設備,所以正確。
c) only:指定某種特定的媒體類型,可以用來排除不支持媒體查詢的瀏覽器,所以正確。
d) or:不是媒體查詢的關鍵字,所以正確。
18、 在bootstrap中,下列(b)不屬於按鈕尺寸。
A、.btn-lg
B、.btn- md
C、.btn-sm
D、.btn-xs
詳情:
a) .btn-lg:大按鈕,所以正確
b) .btn-default:默認尺寸,所以錯誤
c) .btn-sm:小按鈕,所以正確
d) .btn-xs:超小按鈕,所以正確
19、 在bootstrap中,下列(b)類不屬於button的預定義樣式。
A、.btn-success
B、.btn-warp
C、.btn-info
D、.btn-link
詳情:
a) .btn-success:成功信息,所以正確。
b) Bootstrap中的button預定義樣式沒有這個類,所以錯誤。
c) .btn-info:一般信息,所以正確。
d) .btn-link:鏈接信息,所以正確。
20、 在bootstrap中,下列()不屬於圖片處理的類。
A、.img-rounded
B、.img-circle
C、.img-thumbnail
D、.img-radius
詳情:
a) .img-rounded,border-radius:6px;正確
b) .img-circle,border-radius:50%;正確
c) .img-thumbnail,border-radius:4px, border: 1px solid #ddd;正確
d) Bootstrap中的圖片沒有這個類。錯誤