Bootstrap - 模擬測試

本節提供與Bootstrap框架相關的各種模擬測試。您可以將這些模擬測試樣本下載到本地計算機，並在方便時離線解答。每個模擬測試都附帶答案，以便您可以驗證最終分數並進行自我評估。

Bootstrap 模擬測試一

題 1 - 關於 Bootstrap，以下哪項說法正確？

A - Bootstrap 是一個簡潔、直觀且功能強大的移動優先前端框架，可以加快並簡化 Web 開發。

B - 它使用 HTML、CSS 和 Javascript。

C - Bootstrap 由 Mark Otto 和 Jacob Thornton 在 Twitter 開發。

D - 以上都正確。

答案：D

解釋

以上所有選項都正確。

題 2 - 關於 Bootstrap，以下哪項說法正確？

A - Bootstrap 的響應式 CSS 可以適應桌面電腦、平板電腦和移動裝置。

B - 為開發者構建介面提供了一種簡潔統一的解決方案。

C - 它包含美觀且功能強大的內建元件，易於定製。

D - 以上都正確。

答案：D

解釋

以上所有選項都正確。

題 3 - 以下哪項是 Bootstrap 移動優先策略的一部分？

A - 內容：確定最重要的內容。

B - 佈局：先為較小的寬度設計。基礎 CSS 首先針對移動裝置；媒體查詢針對平板電腦和桌面電腦。

C - 漸進增強：隨著螢幕尺寸的增加新增元素。

D - 以上都正確。

答案：D

解釋

以上所有選項都正確。

題 4 - 關於 Bootstrap 網格系統，以下哪項說法正確？

A - 行必須放在 .container 類中才能實現正確的對齊和填充。

B - 使用行建立水平的列組。

C - 內容應放在列中，並且只有列可以作為行的直接子元素。

D - 以上都正確。

答案：D

解釋

以上所有選項都正確。

題 5 - 關於 Bootstrap 網格系統，以下哪項說法正確？

A - 提供了預定義的網格類，例如 .row 和 .col-xs-4，可以快速建立網格佈局。LESS 混合器也可以用於更語義化的佈局。

B - 列透過填充建立間距（列內容之間的間隙）。該填充在行的第一列和最後一列中透過 .rows 上的負邊距進行抵消。

C - 網格列是透過指定要跨越的十二個可用列中的數量來建立的。例如，三個相等的列將使用三個 .col-xs-4。

D - 以上都正確。

答案：D

解釋

以上所有選項都正確。

題 6 - 關於 Bootstrap 媒體查詢，以下哪項說法正確？

A - 媒體查詢是一個非常花哨的術語，指的是“條件 CSS 規則”。

B - 它只是根據規定的某些條件應用一些 CSS。如果滿足這些條件，則應用樣式。

C - 以上都正確。

D - 以上都不正確。

答案：C

解釋

以上兩個選項都正確。

題 7 - 關於 Bootstrap 媒體查詢，以下哪項說法正確？

A - 媒體查詢有兩個部分：裝置規範和尺寸規則。

B - Bootstrap 中的媒體查詢允許您根據視口大小移動、顯示和隱藏內容。

C - 以上都正確。

D - 以上都不正確。

答案：C

解釋

以上兩個選項都正確。

題 8 - 關於 Bootstrap 移動優先策略，以下哪項說法正確？

A - 您需要將視口元標記新增到元素中，以確保在移動裝置上正確渲染和觸控縮放。

B - width 屬性控制裝置的寬度。將其設定為 device-width 將確保它在各種裝置（移動裝置、桌面電腦、平板電腦……）上正確渲染。

C - initial-scale=1.0 確保載入時，您的網頁將以 1:1 的比例渲染，並且不會應用任何縮放。

D - 以上都正確。

答案：D

解釋

以上所有選項都正確。

題 9 - 關於 Bootstrap 響應式圖片，以下哪項說法正確？

A - Bootstrap 3 允許您透過向 <.img> 標記新增類 ..img-responsive 來使圖片具有響應性。

B - ..img-responsive 類將 max-width: 100%; 和 height: auto; 應用於影像，以便它可以很好地縮放為父元素。

C - 以上都正確。

D - 以上都不正確。

答案：C

解釋

以上兩個選項都正確。

題 10 - 關於 Bootstrap 跨瀏覽器一致性，以下哪項說法正確？

A - Bootstrap 使用 Normalize 來建立跨瀏覽器一致性。

B - Normalize.css 是現代的、支援 HTML5 的 CSS 重置替代方案。

C - Normalize.css 是一個小的 CSS 檔案，它在 HTML 元素的預設樣式中提供了更好的跨瀏覽器一致性。

D - 以上都正確。

答案：D

解釋

以上所有選項都正確。

題 11 - 以下哪個類將表格樣式化為一個不錯的基本表格，只有一些輕微的填充和水平分隔線？

答案：A

解釋

如果您想要一個不錯的基本表格樣式，只有一些輕微的填充和水平分隔線，請向任何表格新增 .table 的基礎類。

題 12 - 以下哪個類將表格樣式化為一個不錯的基本表格，並在行上帶有條紋？

答案：B

解釋

透過新增 .table-striped 類，您將在 <tbody> 內的行上獲得條紋。

題 13 - 以下哪個類將表格樣式化為帶有圍繞每個元素的邊框和整個表格周圍的圓角的表格？

答案：C

解釋

透過新增 .table-bordered 類，您將獲得圍繞每個元素的邊框和整個表格周圍的圓角。

題 14 - 以下哪個類在游標懸停在行上時，會在行上新增淺灰色背景？

答案：D

解釋

透過新增 .table-hover 類，在游標懸停在行上時，將向行新增淺灰色背景。

題 15 - 以下哪個類將懸停顏色應用於表格的特定行或單元格？

答案：A

解釋

.active − 將懸停顏色應用於特定行或單元格。

題 16 - 以下哪個類表示成功或積極的操作？

答案：B

解釋

.success − 表示成功或積極的操作。

題 17 - 以下哪個類表示可能需要關注的警告？

答案：C

解釋

.warning − 表示可能需要關注的警告。

題 18 - 以下哪個類表示危險或潛在的負面操作？

答案：D

解釋

.danger − 表示危險或潛在的負面操作。

題 19 - 以下哪個類可用於建立響應式表格？

A - .table-responsive

B - .responsive

C - .active

D - .table

答案：A

解釋

透過將任何 .table 包裹在 .table-responsive 類中，您將使表格在小型裝置（小於 768 畫素）上水平滾動。在寬度大於 768 畫素的任何裝置上檢視時，您將不會看到這些表格的任何區別。

Q 20 - Bootstrap表單的預設佈局是以下哪一項？

答案：A

解釋

垂直或基本表單：Bootstrap自帶的基本表單結構。

Q 21 - 要使表單內聯顯示，需要向表單標籤新增以下哪個類？

答案：B

解釋

要建立一個所有元素都內聯顯示、左對齊且標籤位於旁邊的表單，請向<form>標籤新增.form-inline類。

Q 22 - 要使表單水平顯示，需要向表單標籤新增以下哪個類？

答案：B

解釋

要建立使用水平佈局的表單，請向父元素新增.form-horizontal類。

Q 23 - 關於Bootstrap幫助文字，以下哪一項是正確的？

A - Bootstrap表單控制元件可以包含一個與輸入項一起顯示的塊級幫助文字。

B - 要新增一個全寬的內容塊，請在<input>之後使用.help-block。

C - 以上都正確。

D - 以上都不是。

答案：C

解釋

以上兩個選項都正確。

Q 24 - 以下哪個Bootstrap按鈕樣式可以建立預設/標準按鈕？

答案：A

解釋

.btn − 預設/標準按鈕。

Q 25 - 以下哪個Bootstrap按鈕樣式可以提供額外的視覺權重，並在按鈕組中標識主要操作？

答案：B

解釋

.btn-primary − 提供額外的視覺權重，並在按鈕組中標識主要操作。

答案表

題號	答案
1	D
2	D
3	D
4	D
5	D
6	B
7	B
8	D
9	B
10	D
11	A
12	A
13	B
14	D
15	A
16	A
17	B
18	D
19	A
20	A
21	A
22	A
23	B
24	A
25	A

下載

bootstrap_questions_answers.htm

列印頁面

題號	答案
1	D
2	D
3	D
4	D
5	D
6	B
7	B
8	D
9	B
10	D
11	A
12	A
13	B
14	D
15	A
16	A
17	B
18	D
19	A
20	A
21	A
22	A
23	B
24	A
25	A

題號	答案
1	D
2	D
3	D
4	D
5	D
6	B
7	B
8	D
9	B
10	D
11	A
12	A
13	B
14	D
15	A
16	A
17	B
18	D
19	A
20	A
21	A
22	A
23	B
24	A
25	A

題號	答案
1	D
2	D
3	D
4	D
5	D
6	B
7	B
8	D
9	B
10	D
11	A
12	A
13	B
14	D
15	A
16	A
17	B
18	D
19	A
20	A
21	A
22	A
23	B
24	A
25	A