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

Bootstrap

維基百科,自由的百科全書
跳至導覽 跳至搜尋
Bootstrap
Boostrap logo.svg
原作者 Mark Otto, Jacob Thornton
開發者 Bootstrap Core Team
初始版本 2011年8月19日,​7年前​(2011-08-19
穩定版本
穩定版本
4.1.1
(2018年4月30日,​5個月前​(2018-04-30[1]
預覽版本
4.0.0-beta3
(2017年12月28日,​9個月前​(2017-12-28
程式語言 HTMLCSSLESSSassJavaScript
系統平台 排版引擎
類型 基於HTMLCSS的設計模板
授權條款 MIT授權條款(3.1.0版前為Apache授權條款 2.0)
網站 getbootstrap.com
原始碼庫 編輯維基數據連結

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

Bootstrap是GitHub上面被標記為「Starred」次數排名第二最多的專案。Starred次數超過124,000,而分支次數超過了47,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]

功能[編輯]

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

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

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

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

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

結構和功能[編輯]

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. ^ Otto, Mark; Thornton, Jacob. Bootstrap 4.1.1. 2018-01-18 [2018-01-18]. 
  2. ^ Search · stars:>1. GitHub. [8 Jan 2017]. 
  3. ^ Otto, Mark. Bootstrap in A List Apart No. 342. Mark Otto. 17 January 2012. 
  4. ^ Otto, Mark. Bootstrap from Twitter. Developer Blog. Twitter. 19 August 2011. 
  5. ^ About. Bootstrap. 
  6. ^ 6.0 6.1 Search · stars:>1. GitHub. [26 June 2015]. 
  7. ^ Otto, Mark. Bootstrap 3.3.0 released. Bootstrap Blog. [21 August 2015]. 
  8. ^ Otto, Mark. Bootstrap 4 alpha. Bootstrap Blog. [20 August 2015]. 
  9. ^ Supported browsers. Bootstrap. 
  10. ^ Bootstrap 4 alpha. Bootstrap. 
  11. ^ Bootstrap GitHub Repository. twbs/bootstrap. 

外部連結[編輯]