前 25 名 Bootstrap 面試問題和答案 [針對應屆生和有經驗者]

如果您是一名移動 Web 開發人員，您可能已經聽說過 Bootstrap 及其在構建快速、響應迅速且設計美觀的 UI 方面的重要性。 提供直觀靈活的用戶界面和用戶體驗 (UI/UX) 是當今每個企業的首要任務。 Bootstrap 可以幫助您做到這一點！

由於企業熱衷於為各種屏幕尺寸的設備開發可調節的前端設計，因此今天熟練使用 Bootstrap 是值得的。

因此，如果您正在開始技術職業或正在尋找更高的職位，這裡有一些最常見的 Bootstrap 面試問題和答案，可幫助您找到理想的工作。 所以，事不宜遲，讓我們開始吧！

前 25 個 Bootstrap 面試問題和答案

問題一：什麼是引導程序？

Bootstrap 是一個響應迅速且易於使用的前端框架，用於使用 HTML、CSS 和 JS 創建 Web 應用程序。 為了用戶的利益，它具有快速直觀的佈局。 Bootstrap 允許用戶使用現有的設計模板為移動應用程序構建清晰和美觀的用戶界面。 它的功能包括下拉菜單、按鈕、表單、字形圖標和警報選項卡，僅舉幾例。

問題 2：Bootstrap 的關鍵組件是什麼？

Bootstrap 加載了許多組件，為出色的用戶體驗讓路。 其中包括交互功能，如彈出窗口、下拉菜單、導航欄、按鈕、表單、警報等。

以下是 Bootstrap 的關鍵組件：

1. JS 插件：這是 JS 和 jQuery 插件所在的地方
2. 自定義：用於自定義框架
3. CSS：包括 CSS 文件
4. 腳手架：包含網格系統、背景樣式等

問題 3：是什麼讓 Bootstrap 成為移動和 Web 開發的有效選擇？

Bootstrap 快速且易於使用的佈局允許更快地開發移動和 Web 應用程序。 包含的設計模板具有高度響應性，可自動調整自己以適應不同的屏幕尺寸，而不會影響網頁的本質。

問題 4：Bootstrap 的各種功能是什麼？

以下是 Bootstrap 的一些功能：

– 它是一個免費的開源平台； 允許開發人員為其改進做出貢獻。

– Bootstrap 快速、響應迅速且非常易於使用

- 兼容所有瀏覽器

– Bootstrap 有豐富的設計和模板庫可供選擇

問題 5：什麼是 Glyphicons？

Bootstrap 中的字形圖標是字體格式的圖標，用於表示警告、刪除、縮放、編輯等操作。單個類中包含大約 200 個此類圖標。

使用這些字形圖標的語法是：

<p><span class = “glyphicons glyphicon-pencil”></span></p>

問題 6：解釋 Bootstrap 中的下拉菜單和按鈕組。

下拉菜單是一個動態切換菜單，其中包含其下的鏈接項目列表。 它是網站中最簡潔的設計元素之一。

使用這些下拉菜單的語法是：

<div class= “dropdown”><!– 使用 .dropdown-menu 類在此列出您的列表 –></div>

按鈕組是以相鄰方式放置的一系列按鈕。 這個 Bootstrap 組件要求首先定義具有 .btn-group 類的劃分元素。 之後，按鈕元素使用.btn 類嵌套。

語法如下：

<div class="btn-group"><button class="btn">正確</button></div>

<div class="btn-group"><button class="btn">錯誤</button></div>

使用上述兩個組件，您可以創建一個名為 Button Dropdown 的新組件，該組件使您能夠使用按鈕元素觸發下拉菜單。

句法：

<button class = “btn-default dropdown-toggle”><!- 下拉組件放在這裡 –></button>

問題 7：什麼是輸入組？

輸入組是表單控件類的擴展，它允許您在輸入字段的一側添加文本字符串或包含按鈕。

.input-group 類和 .input-group-addon 類一起用於實現輸入組。

句法：

<div 類=”輸入組”>

<span class=”input-group-addon” id=”basic-addon1″>@</span>

<input type=”text” class=”form-control” placeholder=”Username” aria- describeby=”basic-addon1″>

</div>

問題 8：與 Bootstrap 的進度條一起使用的四個上下文類是什麼。

以下是與 Bootstrap 的進度條一起使用的四個上下文類：

1. 進步-成功
2. 進度信息
3. 進度警告
4. 進度危險

問題 9：Bootstrap 中有多少種不同的按鈕樣式？ 這些是什麼？

有 7 種不同的樣式可以使用 Bootstrap 按鈕。 它們如下：

1. .btn 信息
2. .btn-警告
3. .btn-危險
4. .btn-成功
5. .btn 鏈接
6. .btn-primary
7. .btn-默認

問題 10：解釋引導警報。

引導警報用於創建假定警報消息。 這樣做主要是為了設置消息的樣式，以便它們對用戶來說更明顯。

以下是警報中的四個類：

1. .alert-成功
2. .alert 信息
3. .alert-警告
4. .alert-危險。

問題 11：如何在 Bootstrap 中創建垂直或基本表單？

以下是在 Bootstrap 中創建垂直基本表單的步驟：

第 1 步：向父 <form> 元素添加一個角色表單。

第 2 步：使用 class.form-group 在 <div> 中添加標籤和控件

第 3 步：將 .form-control 類添加到每​​個文本 URL <input>、所有 <textarea> 以及 <select> 元素。

問題 12：Bootstrap 中的分頁是什麼？

正如標籤所示，分頁允許您將網站的內容拆分為不同的頁面以簡化導航。

句法：

<ul class = “pagination”><!——列表元素放在這裡 –></ul>

問題 13：什麼是 Bootstrap 容器？

引導容器本質上是一個添加 HTML 代碼的容器。 然後，此容器站點將成為可以添加內容的頁面的一部分。 這使您的 UI 更快、響應更快。

另請閱讀 Bootstrap 與 Material UI

問題 14：列出 Bootstrap 的任意三個組件。

1. 導航欄：就像您網站上的導航標題

語法：<nav class = “navbar”><!—為你的導航 DOM 元素編碼 –></nav>

2. Jumbotron：表現得像一個視口； 可以假設全屏專注於關鍵內容

語法：<div class = “jumbotron”><!—在此處將您的內容寫入 DOM 元素 –></div>

3. 進度條：顯示反饋，突出顯示操作的進度

語法：<div class=”progress-bar” role=”progressbar” aria-valuenow=”60″ aria-valuemin=”0″ aria-valuemax=”100″ style=”width: 60%;”>

問題 15：Bootstrap 中有哪兩種佈局？

1. 流體佈局
2. 固定佈局

問題 16：什麼是流體佈局？

當設計中需要使用屏幕的總寬度時，Fluid Layout 是一個有用的功能。 當您選擇此選項時，佈局會根據瀏覽器大小自行調整。

問題17：什麼是固定佈局？

固定佈局與流體佈局不同，它不會根據瀏覽器的大小自行調整。 但是，它在 940 像素時仍然快速且響應迅速。

問題 18：Bootstrap 中的 Modal Plugin 是什麼？

作為一個層放置在父窗口之上的繼承窗口稱為模態窗口。 此窗口通過使其功能化來增加用戶體驗的價值。 用於創建模態窗口的插件稱為模態插件。

問題 19：Bootstrap 折疊元素是什麼？

您可以在沒有 JavaScript 代碼的情況下折疊任何 Bootstrap 元素。 這可以通過將 data-toggle= ”collapse” 添加到控制器元素來完成。 還包含數據目標以使其控制折疊元素。

要使用此引導功能，請使用 .collapse(options)。

問題 20：定義一個 Bootstrap 井？

Bootstrap well 類似於 Bootstrap 容器，可以幫助內容在頁面上看起來更加隱蔽和乾淨。 它也可以通過添加 .well 類來包裝內容。

問題 21：Bootstrap 中的 Carousel 插件是什麼。

Carousel 插件允許您在網頁上創建滑塊。 滑塊允許將大塊內容嵌入頁面上的小空間。

您可以使用的一些輪播插件是：

.carousel（選項）

.carousel('暫停')

.carousel（循環'）

.carousel('prev')

.carousel('下一個')

問題 22：解釋以下代碼的輸出。

<div 類=“進度”>

<div class=”progress-bar progress-bar-success” style=”width: 65%”>

<span class=”sr-only”>75% 成功完成</span>

</div>

<div class=”progress-bar progress-bar-warning” style=”width: 20%”>

<span class=”sr-only”>30% 完成並出現警告</span>

</div>

<div class=”progress-bar progress-bar-danger” style=”width: 15%”>

<span class=”sr-only”>15% 未完成</span>

</div>

</div>

答：上述代碼的輸出將在進度條上顯示全寬和完全填充的結果。 這是因為當 Bootstrap 放置在同一個進度父元素中時，會將多個條形圖堆積成一個條形圖。 此外，總進度條總和為 100%。

問題23：說明Bootstrap中用於代碼顯示的代碼？

答：有兩種代碼用於代碼顯示。 他們是：

1. <code> 標籤
2. <pre> 標籤

問題 24：解釋 Bootstrap 中的 Normalize。

Bootstrap normalize 是 Bootstrap 上的一項功能，使用它可以使用一個小的 CSS 文件來提高跨瀏覽器的一致性。

問題25：Bootstrap中自定義分頁鏈接的方法是什麼？

使用 .disabled 表示不可點擊的鏈接，使用 .active 引用當前頁面。

結帳： Bootstrap 與 Material UI

從世界頂級大學在線學習軟件課程。 獲得行政 PG 課程、高級證書課程或碩士課程，以加快您的職業生涯。

結論

我們希望這些問題和答案能幫助您重新了解 Bootstrap 的知識。 祝你面試順利！

如果您有興趣了解有關全棧軟件開發的更多信息，請查看 upGrad 和 IIIT-B 的全棧軟件開發執行 PG 計劃，該計劃專為工作專業人士設計，提供 500 多個小時的嚴格培訓、9 個以上的項目和任務、IIIT-B 校友身份、實用的實踐頂點項目和頂級公司的工作協助。