什麼是Bootstrap？Bootstrap開發框架入門知識

Bootstrap是一個免費的開源Web開發框架。它旨在通過為模板設計提供一組語法來簡化響應式、移動優先網站的Web開發過程。

換句話說，Bootstrap幫助Web開發人員更快地構建網站，因為他們不需要擔心基本的命令和功能。它由HTML、CSS和基於JS的指令碼組成，用於各種與網頁設計相關的功能和元件。

本文將介紹使用Bootstrap的好處並解釋它使用的不同檔案型別。到最後，您將知道Bootstrap是否可以使您的工作流程受益。

Bootstrap的基本功能
為什麼要使用Bootstrap？
為什麼你不應該使用Bootstrap
3個Bootstrap的主檔案
如何在Web開發中使用Bootstrap

Bootstrap的基本功能

Bootstrap官網

Bootstrap的主要目標是建立響應式、移動優先的網站。它確保網站的所有介面元素在所有螢幕尺寸上都能以最佳方式工作。

Bootstrap有兩種變體——預編譯和基於原始碼版本。經驗豐富的開發人員更喜歡後者，因為它可以讓他們自定義樣式以適應他們的專案。

例如，Bootstrap的“原始碼”版本允許您訪問Sass埠。這意味著它建立了一個匯入Bootstrap的自定義樣式表，允許您根據需要修改和擴充套件該工具。

您還可以使用包管理器安裝Bootstrap，這是一種管理和更新框架、庫和資產的工具。

一些最受歡迎的包管理器包括npm、Composer和Bower。Npm管理伺服器端的依賴，而Composer專注於前端。如果您從事基於PHP的專案，請考慮改用Bower。

由於其受歡迎程度，出現了越來越多的Bootstrap社羣。這些是Web開發人員和Web設計人員分享知識和討論最新版本的Bootstrap補丁的好地方。

為什麼要使用Bootstrap？

Bootstrap的一些介面元件包括導航欄、網格系統、影象輪播和按鈕。

如果您仍然不確定Bootstrap是否值得一試，這裡是使用它與其他Web開發框架相比的優勢。

使用方便

首先，Bootstrap易於學習。由於其受歡迎程度，有大量教程和線上論壇可幫助您入門。

Bootstrap在Web開發人員和Web設計人員中如此受歡迎的原因之一是它具有簡單的檔案結構。它的檔案經過編譯以便於訪問，並且只需要HTML、CSS和JS的基本知識即可修改它們。

您還可以將流行內容管理系統的主題用作學習工具。例如，大多數WordPress主題都是使用Bootstrap開發的，任何初學者Web開發人員都可以訪問。

為了增加網站的頁面載入時間，Bootstrap會縮小CSS和JavaScript檔案。此外，Bootstrap保持網站和開發人員之間語法的一致性，非常適合基於團隊的專案。

響應式網格

Bootstrap帶有一個預定義的網格系統，使您免於從頭開始建立一個網格系統。網格系統由行和列組成，讓您可以在現有的網格中建立網格，而不是在CSS檔案中輸入媒體查詢。

此外，Bootstrap的網格系統使資料輸入過程更加直接。它包含大量媒體查詢，允許您根據您的Web專案需求定義每個列的自定義斷點。

預設設定通常綽綽有餘。建立網格後，您只需向容器中新增內容。

Bootstrap網格系統有兩個容器類來更好地適應桌面和移動專案——一個固定容器（.container）和一個流體容器（.container-fluid）。

第一個容器類提供了一個固定寬度的容器，而後者提供了一個全寬容器，能夠將您的專案調整為所有螢幕尺寸。

瀏覽器相容性

通過不同的瀏覽器訪問您的網站有助於降低跳出率並在搜尋結果中排名更高。Bootstrap通過與最新版本的流行瀏覽器相容來滿足這一要求。

儘管不支援WebKit和Gecko等鮮為人知的瀏覽器，但帶有Bootstrap的網站也應該在它們上正常執行。但是，小螢幕上的模式和下拉選單可能存在限制。

Bootstrap影象系統

Bootstrap使用其預定義的HTML和CSS規則處理影象顯示和響應。

新增.img-responsive類將根據使用者的螢幕尺寸自動調整影象大小。這將有利於您網站的效能，因為減小影象大小是網站優化過程的一部分。

Bootstrap還提供了額外的類，如.img-circle和.img-rounded，這有助於修改影象的形狀。

Bootstrap文件

Bootstrap為想要第一次學習使用這個框架的開發人員提供了文件。您可以在Bootstrap文件頁面上找到以下幾個主題：

內容‒ 涵蓋預編譯的Bootstrap原始碼。
瀏覽器和裝置‒ 列出所有受支援的Web和移動瀏覽器以及基於移動的元件。
JavaScript ‒ 分解基於jQuery構建的各種JS外掛。
主題– 解釋內建Sass變數以便於自定義。
工具‒ 教你如何使用Bootstrap的npm指令碼進行各種操作。
可訪問性‒ 涵蓋Bootstrap在結構標記、元件、顏色對比、內容可見性和過渡效果方面的功能和限制。

該文件還包括基本實踐的程式碼示例。您甚至可以為您的專案複製和修改程式碼示例，從而節省您從頭開始編寫程式碼的時間。

為什麼你不應該使用Bootstrap

儘管有優勢，但Bootstrap有一定的侷限性，不適合特定型別的專案。

由於Bootstrap具有一致的視覺風格，它需要大量的自定義和樣式覆蓋以使一個專案與另一個專案不同。否則，使用此框架構建的所有網站都將具有相同的導航、結構和設計元件，使它們看起來不專業。

擁有大量功能意味著包含大型檔案。如果您不小心，在您的專案中使用Bootstrap會減慢網站的載入時間並加重您的伺服器的負擔。為避免此問題，請確保僅新增您需要的類並使用檔案的縮小版本。

雖然Bootstrap與最新版本的流行瀏覽器相容，但舊版本並非如此。這意味著您網站的外觀將完全取決於使用者在更新瀏覽器時的努力程度。

另一個缺點是Bootstrap樣式相對笨重。這會導致不必要的HTML輸出，浪費中央處理器資源。

雖然它很容易使用，但Bootstrap一開始有一點學習曲線。學習可用的類和元件需要時間，這對於沒有技術知識的人來說可能很複雜。

3個Bootstrap的主檔案

Bootstrap包含一組在三個主要檔案中編譯的語法——Bootstrap.css、Bootstrap.js和Glyphicons。請記住，Bootstrap需要一個名為jQuery的JS庫來執行JS外掛和元件。

以下是管理網站使用者介面和功能的三個主要框架檔案。

Bootstrap.css

Bootstrap.css是一個CSS框架，用於安排和管理網站的佈局。HTML處理網頁的內容和結構，而CSS處理佈局本身。出於這個原因，兩個結構需要共存在一起才能執行特定的操作。

Bootstrap.css及其功能可幫助開發人員根據需要在儘可能多的頁面上建立統一的外觀。因此，Web 開發人員不必花費數小時進行手動編輯。

無需從頭開始編碼，您只需要將網頁引用到CSS檔案。任何必要的更改都可以單獨在該檔案中完成。

CSS函式不僅限於文字樣式，因為您可以使用它們來格式化網站中的其他方面，例如表格和影象佈局。

由於CSS有很多宣告和選擇器，因此記住所有這些可能需要一些時間。請參閱我們的CSS備忘單以簡化您的學習過程。

Bootstrap.js

該檔案是Bootstrap的核心部分。它由負責網站互動性的JavaScript檔案組成。

為了節省多次編寫JavaScript語法的時間，開發人員傾向於使用jQuery——一個流行的開源跨平臺JavaScript庫。

下面是幾個jQuery可以做的例子：

執行AJAX請求，例如動態地從另一個位置減去資料。
使用JavaScript外掛集合建立小工具。
使用CSS屬性建立自定義動畫。
為網站內容新增動態。

雖然帶有CSS屬性和HTML元素的Bootstrap可以正常執行，但它需要jQuery來建立響應式設計。否則，您只能使用樣式表語言的裸露的、靜態的部分。

因此，每個軟體工程師都應該瞭解jQuery，因為它是Web開發的重要組成部分。

Glyphicons

圖示是網站前端不可或缺的一部分，因為它們通常在使用者介面中顯示操作和資料。

Bootstrap使用稱為Glyphicons的圖示，其中包括Glyphicons Halflings集。雖然設計是基本的，但它們執行其基本功能，並且可以免費使用。

如果您想找到更時尚的圖示，Glyphicons為特定領域的網站銷售各種高階套裝。

您還可以在Flaticon、GlyphSearch和Icons8等各種網站上免費下載單個和特定主題的圖示。

要更改Glyphicons的大小，您需要使用CSS font-size屬性覆蓋預設樣式。

如何在Web開發中使用Bootstrap

為了更好地瞭解如何使用載入程式，請看下面的示例。

<head>

<title>Bootstrap 101 Template</title>

</head>

<body>

<h1>Hello, world!</h1>

</body>

</html>

<html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Bootstrap 101 Template</title> <link href="css/bootstrap.min.css" rel="stylesheet" /> </head> <body> <h1>Hello, world!</h1> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>

<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> 
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

我們將更詳細地解釋其中的一些行。

meta charset="utf-8"

meta charset="utf-8"

說明用於編寫網站的字符集。在這種情況下，UTF-8指的是Unicode。

meta http-equiv="X-UA-Compatible"

meta http-equiv="X-UA-Compatible"

確定應呈現頁面的Internet Explorer版本。使用Edge模式，它被設定為使用可用的最高模式。

meta name="viewport"

meta name="viewport"

確保頁面與視口大小的比例為1:1。

link href="css/bootstrap.min.css" rel="stylesheet"

link href="css/bootstrap.min.css" rel="stylesheet"

這是我們新增Bootstrap核心CSS的地方。

src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"

src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"

通過Google CDN載入jQuery。最好通過HTTP從CDN載入它，因為檔案可以快取一年。

src="js/bootstrap.min.js

src="js/bootstrap.min.js

新增Bootstrap核心JavaScript。此語法必須低於jQuery語法才能正常執行。新增過程可以通過Google的URL或手動下載來完成。

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

Bootstrap提供了一個JavaScript包來簡化這個過程。但是，bootstrap.bundle.js和bootstrap.bundle.min.js包含Popper而不是jQuery。Popper是一個定位引擎，用於計算元素的定位。

<a class="navbar-brand" href="#">Navbar</a>

</button>

<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>

<a class="nav-item nav-link" href="#">Features</a>

<a class="nav-item nav-link" href="#">Pricing</a>

<a class="nav-item nav-link disabled" href="#">Disabled</a>

</div>

</nav>

<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav"> <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-item nav-link" href="#">Features</a> <a class="nav-item nav-link" href="#">Pricing</a> <a class="nav-item nav-link disabled" href="#">Disabled</a> </div> </div> </nav>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
  </div>
</nav>

如何使用Bootstrap導航欄導航連結建立站點選單的示例。

小結

Bootstrap是一個免費的前端框架，在當今的開發人員中很受歡迎，尤其是那些在網頁設計領域工作的人。它易於使用，併為開發人員節省了大量手動編寫HTML、CSS和JavaScript程式碼的時間。

Bootstrap框架足夠靈活和健壯，足以滿足前端網站開發的幾乎所有需求。它的最佳功能是設計模板，使網頁在所有螢幕尺寸上都能以最佳方式工作。

儘管有一點學習曲線，但它提供了大量資源來幫助您入門。一些最好的學習平臺包括Bootstrap文件頁面和以IT為中心的論壇，如Stack Overflow。

Bootstrap 開源框架