Bootstrap

Bootstrap是一組用於網站和網路應用程式開發的開源前端框架，包括HTML、CSS及JavaScript的框架，提供字體排印、表單、按鈕、導航及其他各種元件及Javascript擴充套件，旨在使動態網頁和Web應用的開發更加容易。

Bootstrap是GitHub上面被標記為「Starred」次數排名第四多的項目。Starred次數超過133,000，而分支次數超過了65,000次。

## 起源

Bootstrap原名Twitter Blueprint，由Twitter的Mark Otto和Jacob Thornton編寫，本意是製作一套可以保持一致性的工具和框架。在Bootstrap之前，開發界面需要使用不同的代碼庫，這樣很容易導致不一致的問題，從而增加了維護的負擔。Twitter開發者Mark Otto說：

經過一個小組幾個月之後的努力，Twitter的許多開發者把它當作Hack Week（在Twitter開發者中流行的類似於黑客松的一星期）的一部分，開始參與開發。大家把Twitter Blueprint改名為Bootstrap，並且在2011年8月19日將其作為開源項目發布。此後項目繼續由Mark Otto、Jacob Thornton和一個核心開發小組維護，此外還有眾多來自社區的貢獻者。

在2012年1月31日，Bootstrap 2發布。這一版增加了十二列網格布局和響應式組件，並且對許多組件進行了修改。Bootstrap 3於2013年8月19日發布，開始將行動裝置優先作為方針，並且開始使用扁平化設計。

2015年4月23日，Mark Otto宣布正在開發Bootstrap 4。Bootstrap 4的第一個alpha版本部署在2015年8月19日。

2021年5月5日，Bootstrap 5正式發布。

## 功能

Bootstrap與最新版的Google Chrome、Firefox、Internet Explorer、Opera和Safari瀏覽器兼容，儘管有些瀏覽器並不是支持所有作業系統。

從2.0版本開始，Bootstrap支持響應式網頁設計（RWD）。頁面布局可以根據顯示網頁的設備（桌面、平板電腦、手機）來進行動態調整。

從3.0版本開始，Bootstrap將行動裝置優先作為設計方針，更加強調了響應式設計。

從 4 版本開始，添加Sass和CSS Flex Box Layout的支持，更重要的是加入了utilities CSS 的新概念。

從 5 版本開始，不支援IE，脫離了jQuery的依賴，大大提升原生 JavaScript 及各前端框架的支援，並更加完善了無障礙的相關輔助。

Bootstrap是開源軟體，可以從GitHub上面找到。開發者被鼓勵參與項目，並且對項目做出自己的貢獻。

## 結構和功能

<image>

Bootstrap採用模塊化設計，並且用LESS樣式表語言來實現各種組件和工具。一個名為bootstrap.less的文件包括了這些組件和工具，開發者可以修改這個文件，自行決定項目需要哪些組件。

通過一個基本配置文件可以進行有限的定製，此外也可以進行更加深入的定製。

LESS語言支持變量、函數、運算符、組合選擇器和一個叫做Mixin（混入）的功能。

從Bootstrap 2.0開始，Bootstrap文檔包括一個叫做「自定義」的特別選項，開發者可以根據自己的實際需要來選擇包含的組件和效果，然後生成和下載已經編譯好的包。

網格系統和響應式設計以1170像素寬為基準。此外開發者也可以自定義基準。這兩種情況下，Bootstrap都能提供四種變體：手機豎屏、手機橫屏和平板電腦、PC低解析度、高解析度，每個變體都會自動調整網格寬度。

### CSS

Bootstrap對一系列HTML組件的基本樣式進行了定義，並且為文本、表格和表單元素設計了一套獨特的、現代化的樣式。

### 可重用組件

除了基本HTML元素，Bootstrap還包括了其他常用的界面元素，例如帶有高級功能的按鈕（例如按鈕組合、帶有下拉菜單選項的按鈕、導航欄、水平和垂直標籤組、導航、分頁等等）、標籤、高級排版、縮略圖、警告信息、進度條等。

這些組件都使用CSS的類實現。在頁面中需要將其對應到特定的HTML元素上面。

### JavaScript組件

通過jQuery，Bootstrap加入了一些JavaScript組件。它們提供了例如對話框、工具提示、輪播等功能。此外還增強了一些使用者界面元素的功能，例如輸入框的自動完成。Bootstrap 2.0支持以下JavaScript插件：Modal（模態對話框）、Dropdown（下拉菜單）、Scrollspy（滾動監聽）、Tab（標籤頁）、Tooltip（工具提示）、Popover（浮動提示）、Alert（警告）、Button（按鈕）、Collapse（摺疊）、Carousel（輪播）、Typeahead（輸入提示）、Affix（附加導航）。

### Sass和Less支持

Sass 和Less都是CSS預處理器，它們允許開發者使用變量、嵌套、混入等高級功能來更輕鬆地編寫和維護CSS代碼。Sass 代表語法很棒的樣式表。Sass 是 CSS 的擴展，完全兼容所有版本的 CSS，並減少了CSS 的重複，從而節省了時間。Sass 由 Hampton Catlin 設計，由 Natalie Weizenbaum 於 2006 年開發。Less代表精簡樣式表。Less 只對 CSS 語言做了一些方便的補充，因此它是較為容易學習的。

Bootstrap提供了基於Sass和Less的源文件，使開發者能夠使用這些預處理器。使用Sass或Less，開發者可以修改變量、覆蓋默認樣式、添加自定義組件和樣式，以滿足特定項目的需求。這種支持使得Bootstrap更加靈活，開發者可以根據項目的要求自定義Bootstrap的樣式。

## Bootstrap 圖標庫

Bootstrap v5第一次擁有自己的開源 SVG 圖標庫，旨在與 Bootstrap 組件配合使用，但它們也可以使用到任何項目中。這些圖標是 SVG 格式的，因此它們可以被快速輕鬆地縮放、可以通過多種方式使用、並且可以使用 CSS 設置樣式。

## 官方主題

官方 Bootstrap 主題市場提供了許多高級主題，讓 Bootstrap 提升到了一個新的水平。這些主題是基於 Bootstrap 構建的，並作為他們自己的擴展框架，包含了豐富的新組件和插件、文檔以及構建工具。

## 外部連結

- Bootstrap官方網站 - 包括文檔和下載
- Bootstrap繁體中文網站 - 由陳傳興維護，包括Bootstrap3網站的繁體中文翻譯版本，以及相關的框架
- -Bootstrap5繁體中文網站(由六角學院翻譯)
- Bootstrap簡體中文網站 - 由社區維護，包括Bootstrap網站的簡體中文翻譯版本，以及相關的框架
- Bootstrap Blog - 由開發者Mark Otto維護的官方日誌
- Bootstrap文檔手冊實例網 - Bootstrap查找文檔和GitHub實例
- Bootstrap 使用者界面套件 - Bootstrap響應式頁面模板，布局，組件和小部件，可快速構建網頁。

## 基本資料

- 平台：排版引擎
- 發行日期：2011年8月19日
- 作者：Mark Otto, Jacob Thornton
- 開發者： Bootstrap Core Team
- 程式語言：HTML、CSS、LESS、Sass 和 JavaScript
- 類型：基於HTML和CSS的設計模板
- 許可協議：MIT許可證（3.1.0版前為Apache許可證 2.0）