Bootstrap - 面試問題

親愛的讀者，這些BOOTSTRAP 面試問題專為幫助您瞭解在BOOTSTRAP 語言面試中可能遇到的問題型別而設計。根據我的經驗，優秀的 interviewers 很少會在面試前計劃好要問哪些特定問題，通常問題會從該主題的一些基本概念開始，然後根據後續討論以及您的回答繼續提問。

什麼是 Twitter Bootstrap？

Bootstrap 是一款簡潔、直觀且功能強大的移動優先前端框架，可以加快並簡化 Web 開發。它使用 HTML、CSS 和 Javascript。

為什麼要使用 Bootstrap？

Bootstrap 可以用於：

移動優先方法 - 從 Bootstrap 3 開始，該框架在整個庫中都包含移動優先樣式，而不是在單獨的檔案中。
瀏覽器支援 - 它受所有主流瀏覽器支援。
易於上手 - 只要掌握 HTML 和 CSS 的知識，任何人都可以開始使用 Bootstrap。此外，Bootstrap 官方網站提供了良好的文件。
響應式設計 - Bootstrap 的響應式 CSS 可以適應桌面電腦、平板電腦和手機。
為開發人員構建介面提供了一個乾淨且統一的解決方案。
它包含美觀且功能強大的內建元件，這些元件易於自定義。
它還提供基於 Web 的自定義功能。
最棒的是，它是開源的。

Bootstrap 包含哪些內容？

Bootstrap 包含：

腳手架 - Bootstrap 提供了一個基本的結構，包括網格系統、連結樣式和背景。這將在Bootstrap 基本結構部分詳細介紹。
CSS - Bootstrap 帶有全域性 CSS 設定、使用可擴充套件類來設定樣式和增強基本 HTML 元素以及高階網格系統等功能。這將在Bootstrap 與 CSS部分詳細介紹。
元件 - Bootstrap 包含十幾個可重用的元件，用於提供圖示、下拉選單、導航、警報、氣泡提示等等。這將在佈局元件部分詳細介紹。
JavaScript 外掛 - Bootstrap 包含十幾個自定義 jQuery 外掛。您可以輕鬆地全部包含它們，也可以逐個包含。這將在Bootstrap 外掛部分詳細介紹。
自定義 - 您可以自定義 Bootstrap 的元件、LESS 變數和 jQuery 外掛以獲得您自己的版本。

什麼是 Bootstrap 中表格的上下文類？

上下文類允許您更改表格行或單個單元格的背景顏色。

序號	類和描述
1	.active 將懸停顏色應用於特定行或單元格
2	.success 表示成功或積極的操作
3	.warning 表示可能需要關注的警告
4	.danger 表示危險或潛在的負面操作

什麼是 Bootstrap 網格系統？

Bootstrap 包含一個響應式、移動優先的流體網格系統，隨著裝置或視口尺寸的增加，該系統會適當地擴充套件到 12 列。它包含用於輕鬆佈局選項的預定義類，以及用於生成更多語義佈局的功能強大的 mixin。

什麼是 Bootstrap 媒體查詢？

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

在 Bootstrap 中顯示一個基本的網格結構。

以下是 Bootstrap 網格的基本結構：

<div class = "container">
   <div class = "row">
      <div class = "col-*-*"></div>
      <div class = "col-*-*"></div>      
   </div>
   
   <div class = "row">...</div>
</div>
<div class = "container">....

什麼是偏移列？

偏移是用於更專業的佈局的有用功能。例如，它們可以用於將列推開以獲得更多間距。.col-xs = * 類不支援偏移，但可以透過使用空單元格輕鬆複製它們。

如何在 Bootstrap 中排序列？

您可以使用 .col-md-push-* 和 .col-md-pull-* 修飾符類輕鬆更改內建網格列的順序，其中 * 的範圍從 1 到 11。

如何使影像響應式？

Bootstrap 3 允許透過向 <img> 標記新增類 .img-responsive 來使影像響應式。此類將 max-width: 100%; 和 height: auto; 應用於影像，以便它可以很好地縮放至父元素。

解釋 Bootstrap 中的排版和連結。

Bootstrap 設定了基本的全域性顯示（背景）、排版和連結樣式：

基本全域性顯示 - 在 <body> 元素上設定 background-color: #fff;。
排版 - 使用 @font-family-base、@font-size-base 和 @line-height-base 屬性作為排版基礎
連結樣式 - 透過屬性 @link-color 設定全域性連結顏色，並且僅在 :hover 上應用連結下劃線。

什麼是 Bootstrap 中的 Normalize？

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

Normalize.css 是一種現代的、支援 HTML5 的 CSS 重置替代方案。它是一個小型 CSS 檔案，可以提高 HTML 元素預設樣式的跨瀏覽器一致性。

什麼是引導正文副本

要為段落新增一些強調，請新增類 = "lead"。這將為您提供更大的字型大小、更輕的權重和更高的行高

解釋 Bootstrap 支援的列表型別。

Bootstrap 支援有序列表、無序列表和定義列表。

有序列表 - 有序列表是按某種順序排列的列表，並在前面加上數字。
無序列表 - 無序列表是沒有特定順序的列表，傳統上使用專案符號進行樣式設定。如果您不希望專案符號出現，則可以使用類 .list-unstyled 刪除樣式。您還可以使用類 .list-inline 將所有列表項放在一行上。
定義列表 - 在這種型別的列表中，每個列表項都可以包含 <dt> 和 <dd> 元素。<dt> 代表 定義術語，就像字典一樣，這是要定義的術語（或短語）。隨後，<dd> 是 <dt> 的定義。
您可以使用類 dl-horizontal 使 <dl> 中的術語和描述並排排列。

什麼是 Glyphicons？

Glyphicons 是可以在 Web 專案中使用的圖示字型。Glyphicons Halflings 不是免費的，需要許可，但是其建立者已將其免費提供給 Bootstrap 專案。

如何使用 Glyphicons？

要使用圖示，只需在程式碼中的任何位置使用以下程式碼即可。在圖示和文字之間留一個空格以進行適當的填充。

<span class = "glyphicon glyphicon-search"></span>

什麼是過渡外掛？

過渡外掛提供簡單的過渡效果，例如滑動或淡入模態框。

什麼是模態框外掛？

模態框是疊加在其父視窗上的子視窗。通常，目的是顯示來自單獨來源的內容，這些內容可以在不離開父視窗的情況下進行互動。子視窗可以提供資訊、互動或更多功能。

如何使用下拉選單外掛？

您可以切換下拉選單外掛的隱藏內容：

透過資料屬性 - 向連結或按鈕新增 data-toggle = "dropdown" 以切換下拉選單，如下所示：

<div class = "dropdown">
   <a data-toggle = "dropdown" href = "#">Dropdown trigger</a>
   <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
    ...
   </ul>
</div>

如果您需要保持連結完整（如果瀏覽器未啟用 JavaScript 則很有用），請使用 data-target 屬性而不是 href="#"：

<div class = "dropdown">
   <a id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html">
      Dropdown 
    
      <span class = "caret"></span>
   </a>
    
   <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
      ...
   </ul>
	
</div>

透過 JavaScript − 要透過 JavaScript 呼叫下拉切換，請使用以下方法 −

$('.dropdown-toggle').dropdown()

什麼是 Bootstrap 輪播圖？

Bootstrap 輪播圖是一種靈活且響應式的新增滑塊到網站的方法。除了響應式之外，其內容也足夠靈活，可以包含影像、iframe、影片或任何您可能想要的內容。

什麼是按鈕組？

按鈕組允許將多個按鈕堆疊在一行上。當您需要將對齊按鈕之類的專案放在一起時，這很有用。

哪個類用於基本的按鈕組？

.btn-group 類用於基本的按鈕組。將一系列帶有 .btn 類的按鈕包裝在 .btn-group 中。

哪個類用於繪製按鈕工具欄？

.btn-toolbar 有助於將一組 <div class = "btn-group"> 組合到 <div class = "btn-toolbar"> 中，以建立更復雜的元件。

哪些類可以應用於按鈕組，而不是調整每個按鈕的大小？

.btn-group-lg、.btn-group-sm、.btn-group-xs 類可以應用於按鈕組，而不是調整每個按鈕的大小。

哪個類可以使一組按鈕垂直堆疊而不是水平排列？

.btn-group-vertical 類可以使一組按鈕垂直堆疊而不是水平排列。

什麼是輸入組？

輸入組是擴充套件的表單控制元件。使用輸入組，您可以輕鬆地在基於文字的輸入前面和後面新增文字或按鈕。

透過向輸入欄位新增字首和字尾內容，您可以向用戶的輸入新增常用元素。例如，您可以新增美元符號、Twitter 使用者名稱的 @ 符號，或任何其他可能適合您的應用程式介面的內容。

要在 .form-control 前或後新增元素 −

將其包裝在一個帶有 .input-group 類的 <div> 中。
下一步，在同一個 <div> 中，將額外的內容放在帶有 .input-group-addon 類的 <span> 內。
現在將此 <span> 放在 <input> 元素之前或之後。

如何建立選項卡式導航選單？

要建立選項卡式導航選單 −

從一個帶有 .nav 基本類的基本無序列表開始。
新增 .nav-tabs 類。

如何建立藥丸式導航選單？

要建立藥丸式導航選單 −

從一個帶有 .nav 基本類的基本無序列表開始。
新增 .nav-pills 類。

如何建立垂直藥丸式導航選單？

您可以使用 .nav-stacked 類以及 .nav、.nav-pills 類將藥丸垂直堆疊。

什麼是 Bootstrap 導航欄？

導航欄是 Bootstrap 網站的突出功能之一。導航欄是響應式的“元”元件，充當應用程式或網站的導航標題。導航欄在移動檢視中摺疊，並在可用的視口寬度增加時變為水平。從本質上講，導航欄包括網站名稱和基本導航的樣式。

如何在 Bootstrap 中建立導航欄？

要建立預設導航欄 −

將 .navbar、.navbar-default 類新增到 <nav> 標籤中。
將 role = "navigation" 新增到上述元素中，以幫助提高可訪問性。
將標題類 .navbar-header 新增到 <div> 元素中。包含一個帶有 navbar-brand 類的 <a> 元素。這將使文字稍微增大。
要嚮導航欄新增連結，只需新增一個帶有 .nav、.navbar-nav 類的無序列表即可。

什麼是 Bootstrap 麵包屑？

麵包屑是顯示網站基於層次結構的資訊的好方法。對於部落格，麵包屑可以顯示釋出日期、類別或標籤。它們指示當前頁面在導航層次結構中的位置。

Bootstrap 中的麵包屑只是一個帶有 .breadcrumb 類的無序列表。分隔符由 CSS（bootstrap.min.css）自動新增。

哪個類用於基本的分頁？

.pagination 類用於在頁面上新增分頁。

如何自定義分頁的連結？

您可以使用 .disabled 為不可點選的連結自定義連結，並使用 .active 指示當前頁面。

什麼是 Bootstrap 標籤？

Bootstrap 標籤非常適合為頁面提供計數、提示或其他標記。使用 .label 類顯示標籤。

什麼是 Bootstrap 徽章？

徽章類似於標籤；主要區別在於角更圓潤。徽章主要用於突出顯示新專案或未讀專案。要使用徽章，只需將 <span class = "badge"> 新增到連結、Bootstrap 導航等。

什麼是 Bootstrap 縱橫標題？

顧名思義，此元件可以選擇性地增加標題的大小，併為登陸頁面內容新增大量邊距。要使用縱橫標題 −

建立一個帶有 .jumbotron 類的容器 <div>。
除了更大的 <h1> 之外，字型粗細減小到 200px。

什麼是 Bootstrap 頁面標題？

頁面標題是一個很好的小功能，可以在頁面上的標題周圍新增適當的間距。這在網頁上特別有用，在網頁上您可能有多個帖子標題，並且需要一種方法來區分它們。要使用頁面標題，請將標題包裝在一個帶有 .page-header 類的 <div> 中。

如何使用 Bootstrap 建立縮圖？

要使用 Bootstrap 建立縮圖 −

在影像周圍新增一個帶有 .thumbnail 類的 <a> 標籤。
這會新增 4 畫素的填充和灰色邊框。
懸停時，動畫輝光會勾勒出影像。

如何使用 Bootstrap 自定義縮圖？

可以將任何型別的 HTML 內容（如標題、段落或按鈕）新增到縮圖中。請按照以下步驟操作 −

將具有 .thumbnail 類的 <a> 標籤更改為 <div>。
在該 <div> 內，您可以新增任何需要的內容。由於這是一個 <div>，因此我們可以使用基於跨度的預設命名約定進行大小調整。
如果要對多個影像進行分組，請將它們放在一個無序列表中，每個列表項都將浮動到左側。

什麼是 Bootstrap 警報？

Bootstrap 警報提供了一種為使用者樣式化訊息的方法。它們為典型使用者操作提供上下文反饋訊息。

您可以向警報中新增一個可選的關閉圖示。

如何建立 Bootstrap 警報？

您可以透過建立一個包裝器 <div> 並新增 .alert 類和四個上下文類之一（例如，.alert-success、.alert-info、.alert-warning、.alert-danger）來新增基本警報。

如何建立 Bootstrap 可關閉警報？

要構建可關閉警報 −

透過建立一個包裝器 <div> 並新增 .alert 類和四個上下文類之一（例如，.alert-success、.alert-info、.alert-warning、.alert-danger）來新增基本警報。
還將可選的 .alert-dismissable 新增到上述 <div> 類中。
新增一個關閉按鈕。
使用帶有 data-dismiss = "alert" 資料屬性的 <button> 元素。

如何使用 Bootstrap 建立進度條？

要建立基本進度條 −

新增一個帶有 .progress 類的 <div>。
接下來，在上述 <div> 內，新增一個帶有 .progress-bar 類的空 <div>。
新增一個 style 屬性，其中寬度以百分比表示。例如，style = "60%"; 表示進度條處於 60%。

如何使用 Bootstrap 建立替代進度條？

要建立具有不同樣式的進度條 −

新增一個帶有 .progress 類的 <div>。
接下來，在上述 <div> 內，新增一個帶有 .progress-bar 類和 progress-bar-* 類的空 <div>，其中 * 可以是 success、info、warning、danger。
新增一個 style 屬性，其中寬度以百分比表示。例如，style = "60%"; 表示進度條處於 60%。

如何使用 Bootstrap 建立條紋進度條？

要建立條紋進度條 −

新增一個帶有 .progress 和 .progress-striped 類的 <div>。
接下來，在上述 <div> 內，新增一個帶有 .progress-bar 類和 progress-bar-* 類的空 <div>，其中 * 可以是 success、info、warning、danger。
新增一個 style 屬性，其中寬度以百分比表示。例如，style = "60%"; 表示進度條處於 60%。

如何使用 Bootstrap 建立動畫進度條？

要建立動畫進度條 −

新增一個帶有 .progress 和 .progress-striped 類的 <div>。還將 .active 類新增到 .progress-striped 中。
接下來，在上述 <div> 內，新增一個帶有 .progress-bar 類的空 <div>。
新增一個 style 屬性，其中寬度以百分比表示。例如，style = "60%"; 表示進度條處於 60%。

如何使用 Bootstrap 建立堆疊進度條？

您甚至可以堆疊多個進度條。將多個進度條放在同一個 .progress 中以堆疊它們。

什麼是 Bootstrap 媒體物件？

這些是用於構建各種型別的元件（如部落格評論、推文等）的抽象物件樣式，這些元件在文字內容旁邊具有左對齊或右對齊的影像。媒體物件的目標是使開發這些資訊塊的程式碼大大縮短。

媒體物件（輕量級標記、易於擴充套件）的目標是透過對一些簡單標記應用類來實現的。

Bootstrap 中 .media 類的作用是什麼？

此類允許將媒體物件（影像、影片和音訊）浮動到內容塊的左側或右側。

Bootstrap 中 .media-list 類的作用是什麼？

如果您正在準備一個列表，其中專案將是無序列表的一部分，請使用一個類。這對於評論執行緒或文章列表很有用。

什麼是 Bootstrap 面板？

面板元件用於將您的 DOM 元件放在一個框中。要獲得基本面板，只需將 .panel 類新增到 <div> 元素中。還將 .panel-default 類新增到此元素中。

如何建立帶有標題的 Bootstrap 面板？

有兩種方法可以新增面板標題 −

使用 .panel-heading 類可以輕鬆地向面板新增標題容器。
使用任何帶有 .panel-title 類的 <h1>-<h6> 來新增預先設定樣式的標題。

如何建立帶有頁尾的 Bootstrap 面板？

您可以透過將按鈕或輔助文字包裝在一個包含 .panel-footer 類的 <div> 中來向面板新增頁尾。

有哪些上下文類可用於為面板設定樣式？

使用上下文狀態類，例如 panel-primary、panel-success、panel-info、panel-warning、panel-danger，使面板在特定上下文中更有意義。

您可以在 Bootstrap 面板中放置表格嗎？

是的！要在面板內獲得無邊框表格，請在面板內使用類 .table。假設有一個包含 .panel-body 的 <div>，我們會在表格頂部新增額外的邊框以進行分隔。如果沒有包含 .panel-body 的 <div>，則元件將從面板標題無縫切換到表格。

你能在 Bootstrap 面板中放置一個列表組嗎？

是的！你可以在任何面板中包含列表組。透過在 <div> 元素中新增類 .panel 來建立一個面板。同時，向此元素新增類 .panel-default。現在，在這個面板中包含你的列表組。

什麼是 Bootstrap 井？

井是一個 <div> 中的容器，它使內容看起來像是下沉或在頁面上具有內嵌效果。要建立井，只需將想要顯示在井中的內容用包含類 .well 的 <div> 包裹起來。

什麼是 Scrollspy 外掛？

Scrollspy（自動更新導航）外掛允許你根據滾動位置定位頁面的各個部分。在其基本實現中，當你滾動時，可以根據滾動位置在導航欄中新增 .active 類。

什麼是 Affix 外掛？

Affix 外掛允許 <div> 固定在頁面上的某個位置。你也可以使用此外掛切換其固定狀態的開啟和關閉。一個常見的示例是社交圖示。它們將從某個位置開始，但當頁面到達某個標記時，<div> 將被鎖定到位，並停止隨頁面其餘部分一起滾動。

接下來是什麼？

接下來，你可以回顧一下你之前完成的與該主題相關的作業，並確保你能夠自信地談論它們。如果你是一個新人，面試官不會期望你回答非常複雜的問題，而是要確保你的基礎概念非常紮實。

其次，如果你無法回答一些問題，其實並不重要，重要的是你回答的任何問題，都必須充滿自信地回答。所以在面試時要保持自信。我們在 tutorialspoint 祝你面試順利，並祝你未來一切順利。乾杯 :-)

列印頁面