跳至內容

Bootstrap

本頁使用了標題或全文手工轉換
維基百科，自由的百科全書
Bootstrap
原作者Mark Otto, Jacob Thornton
開發者Bootstrap Core Team
首次釋出2011年8月19日，​13年前​（2011-08-19）
目前版本
  • 5.3.3（2024年2月20日；穩定版本）[1]
編輯維基數據連結
原始碼庫
編輯維基數據連結
程式語言HTML、CSS、LESS、Sass 和 JavaScript
平台排版引擎
類型基於HTML和CSS的設計模板
特許條款MIT特許條款（3.1.0版前為Apache特許條款 2.0）
網站getbootstrap.com 編輯維基數據

Bootstrap是一組用於網站和網絡應用程式開發的開源前端（所謂「前端」，指的是展現給終端使用者的介面。與之對應的「後端」是在伺服器上面執行的代碼）框架，包括HTML、CSS及JavaScript的框架，提供字體排印、表單、按鈕、導航及其他各種元件及Javascript擴充套件，旨在使動態網頁和Web應用的開發更加容易。

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

起源

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

「我和幾個開發者一起設計建立一個新的內部使用的工具，然後我們發現有機會可以做更多的事。從那之後，我們發現我們設計的工具比別人設計的更強大。幾個月之後，我們做出了Bootstrap的原型，在公司內分享文件、設計和資源。」[3]

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

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

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

2021年5月5日，Bootstrap 5正式釋出。[9]

功能

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

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

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

從 4 版本開始，添加Sass和Flexbox（英語：CSS Flex Box Layout）的支援，更重要的是加入了utilities CSS 的新概念[11]。

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

Bootstrap是開源軟件，可以從GitHub上面找到[15]。開發者被鼓勵參與專案，並且對專案做出自己的貢獻。

結構和功能

Example of a webpage using Bootstrap framework
由Mozilla Firefox彩現的Bootstrap範例頁面

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 構建的，並作為他們自己的擴充框架，包含了豐富的新組件和外掛程式、文件以及構建工具。

參見

參考文獻

  1. ^ Release 5.3.3. 2024年2月20日 [2024年2月20日]. 
  2. ^ Search · stars:>1. GitHub. [8 Jan 2017]. （原始內容存檔於2015-12-12）. 
  3. ^ Otto, Mark. Bootstrap in A List Apart No. 342. Mark Otto. 17 January 2012 [2015-08-18]. （原始內容存檔於2020-05-12）. 
  4. ^ Otto, Mark. Bootstrap from Twitter. Developer Blog. Twitter. 19 August 2011 [2015-08-18]. （原始內容存檔於2017-02-23）. 
  5. ^ About. Bootstrap. [2015-08-18]. （原始內容存檔於2015-08-19）. 
  6. ^ 6.0 6.1 Search · stars:>1. GitHub. [26 June 2015]. （原始內容存檔於2015-12-12）. 
  7. ^ Otto, Mark. Bootstrap 3.3.0 released. Bootstrap Blog. [21 August 2015]. （原始內容存檔於2016-07-24）. 
  8. ^ Otto, Mark. Bootstrap 4 alpha. Bootstrap Blog. [20 August 2015]. （原始內容存檔於2015-08-21）. 
  9. ^ Otto, Mark. Bootstrap 5. Bootstrap Blog. [5 May 2021]. （原始內容存檔於2022-05-20）. 
  10. ^ Supported browsers. Bootstrap. [2015-08-18]. （原始內容存檔於2015-08-18）. 
  11. ^ Bootstrap 4 alpha. Bootstrap. [2016-05-23]. （原始內容存檔於2015-08-21）. 
  12. ^ Browsers and devices. Bootstrap. [2023-07-01]. （原始內容存檔於2023-07-22）. 
  13. ^ Bootstrap 5 JavaScript. Bootstrap. [2022-11-22]. （原始內容存檔於2023-10-20）. 
  14. ^ Bootstrap 5 Accessibility. Bootstrap. [2022-11-22]. （原始內容存檔於2023-10-05）. 
  15. ^ Bootstrap GitHub Repository. twbs/bootstrap. [2016-05-23]. （原始內容存檔於2016-07-04）. 

外部連結

取自 "https://zh.wikipedia.org/w/index.php?title=Bootstrap&oldid=79694362"