本頁使用了標題或全文手工轉換

Bootstrap

維基百科,自由的百科全書
跳至導覽 跳至搜尋
Bootstrap
Bootstrap logo.svg
原作者Mark Otto, Jacob Thornton
開發者Bootstrap Core Team
初始版本2011年8月19日,​9年前​(2011-08-19
穩定版本
4.5.0
(2020年5月12日,​6個月前​(2020-05-12
原始碼庫 編輯維基數據鏈結
程式語言HTMLCSSLESSSassJavaScript
系統平台排版引擎
類型基於HTMLCSS的設計模板
授權條款MIT授權條款(3.1.0版前為Apache授權條款 2.0)
網站官方網站 在維基數據上編輯此內容

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

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

起源[編輯]

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

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

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

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

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

Bootstrap 5 Alpha於2020年6月16日正式釋出,[8]。Bootstrap 5 Alpha版本的首次使用案例僅在正式首映後幾天出現,其中最著名的包 - MDB 5-用於Bootstrap 5的Material Design UI Kit [9]

功能[編輯]

Bootstrap與最新版的Google ChromeFirefoxInternet ExplorerOperaSafari瀏覽器相容,儘管有些瀏覽器並不是支援所有作業系統。[10]

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

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

4.0 alpha版本添加SassFlexbox英語CSS Flex Box Layout的支援[11]

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

結構和功能[編輯]

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(附加導航).

參見[編輯]

參考文獻[編輯]

  1. ^ Search · stars:>1. GitHub. [8 Jan 2017]. 
  2. ^ Otto, Mark. Bootstrap in A List Apart No. 342. Mark Otto. 17 January 2012. 
  3. ^ Otto, Mark. Bootstrap from Twitter. Developer Blog. Twitter. 19 August 2011 [2015-08-18]. (原始內容存檔於2017-02-23). 
  4. ^ About. Bootstrap. [2015-08-18]. (原始內容存檔於2015-08-19). 
  5. ^ 5.0 5.1 Search · stars:>1. GitHub. [26 June 2015]. 
  6. ^ Otto, Mark. Bootstrap 3.3.0 released. Bootstrap Blog. [21 August 2015]. (原始內容存檔於2016-07-24). 
  7. ^ Otto, Mark. Bootstrap 4 alpha. Bootstrap Blog. [20 August 2015]. (原始內容存檔於2015-08-21). 
  8. ^ Bootstrap 5 Alpha. Developer Blog. June 22, 2020 [2020-07-24]. (原始內容存檔於2020-07-18). 
  9. ^ Bootstrap 5 Material Design. MDBootstrap.com. June 22, 2020 [2020-07-24]. (原始內容存檔於2020-07-22). 
  10. ^ Supported browsers. Bootstrap. [2015-08-18]. (原始內容存檔於2015-08-18). 
  11. ^ Bootstrap 4 alpha. Bootstrap. [2016-05-23]. (原始內容存檔於2015-08-21). 
  12. ^ Bootstrap GitHub Repository. twbs/bootstrap. [2016-05-23]. (原始內容存檔於2016-07-04). 

外部連結[編輯]