Bootstrap
此條目過於依賴第一手來源。 (2018年5月16日) |
Bootstrap是一組用於網站和網路應用程式開發的開源前端(所謂「前端」,指的是展現給終端使用者的介面。與之對應的「後端」是在伺服器上面執行的代碼)框架,包括HTML、CSS及JavaScript的框架,提供字體排印、表單、按鈕、導航及其他各種元件及Javascript擴充套件,旨在使動態網頁和Web應用的開發更加容易。
![]() | |
原作者 | Mark Otto, Jacob Thornton |
---|---|
開發者 | Bootstrap Core Team |
首次釋出 | 2011年8月19日 |
目前版本 |
|
原始碼庫 | |
程式語言 | HTML、CSS、LESS、Sass 和 JavaScript |
平台 | 排版引擎 |
類型 | 基於HTML和CSS的設計模板 |
授權條款 | MIT授權條款(3.1.0版前為Apache授權條款 2.0) |
網站 | getbootstrap![]() |
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的支援,更重要的是加入了utilities CSS 的新概念[11]。
從 5 版本開始,不支援IE[12],脫離了jQuery的依賴,大大提升原生 JavaScript 及各前端框架的支援,並更加完善了無障礙的相關輔助[13][14]。
Bootstrap是開源軟體,可以從GitHub上面找到[15]。開發者被鼓勵參與專案,並且對專案做出自己的貢獻。
結構和功能
編輯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 構建的,並作為他們自己的擴充框架,包含了豐富的新組件和外掛程式、文件以及構建工具。
參見
編輯參考文獻
編輯- ^ Release 5.3.3. 2024年2月20日 [2024年2月20日].
- ^ Search · stars:>1. GitHub. [8 Jan 2017]. (原始內容存檔於2015-12-12).
- ^ Otto, Mark. Bootstrap in A List Apart No. 342. Mark Otto. 17 January 2012 [2015-08-18]. (原始內容存檔於2020-05-12).
- ^ Otto, Mark. Bootstrap from Twitter. Developer Blog. Twitter. 19 August 2011 [2015-08-18]. (原始內容存檔於2017-02-23).
- ^ About. Bootstrap. [2015-08-18]. (原始內容存檔於2015-08-19).
- ^ 6.0 6.1 Search · stars:>1. GitHub. [26 June 2015]. (原始內容存檔於2015-12-12).
- ^ Otto, Mark. Bootstrap 3.3.0 released. Bootstrap Blog. [21 August 2015]. (原始內容存檔於2016-07-24).
- ^ Otto, Mark. Bootstrap 4 alpha. Bootstrap Blog. [20 August 2015]. (原始內容存檔於2015-08-21).
- ^ Otto, Mark. Bootstrap 5. Bootstrap Blog. [5 May 2021]. (原始內容存檔於2022-05-20).
- ^ Supported browsers. Bootstrap. [2015-08-18]. (原始內容存檔於2015-08-18).
- ^ Bootstrap 4 alpha. Bootstrap. [2016-05-23]. (原始內容存檔於2015-08-21).
- ^ Browsers and devices. Bootstrap. [2023-07-01]. (原始內容存檔於2023-07-22).
- ^ Bootstrap 5 JavaScript. Bootstrap. [2022-11-22]. (原始內容存檔於2023-10-20).
- ^ Bootstrap 5 Accessibility. Bootstrap. [2022-11-22]. (原始內容存檔於2023-10-05).
- ^ Bootstrap GitHub Repository. twbs/bootstrap. [2016-05-23]. (原始內容存檔於2016-07-04).
外部連結
編輯- Bootstrap官方網站(頁面存檔備份,存於網際網路檔案館)(英文) - 包括文件和下載
- Bootstrap繁體中文網站(繁體中文) - 由陳傳興維護,包括Bootstrap3網站的繁體中文翻譯版本,以及相關的框架
- [1] (頁面存檔備份,存於網際網路檔案館)-Bootstrap5繁體中文網站(由六角學院翻譯)
- Bootstrap簡體中文網站(頁面存檔備份,存於網際網路檔案館)(簡體中文) - 由社群維護,包括Bootstrap網站的簡體中文翻譯版本,以及相關的框架
- Bootstrap Blog(頁面存檔備份,存於網際網路檔案館) - 由開發者Mark Otto維護的官方紀錄檔
- Bootstrap文件手冊實例網(頁面存檔備份,存於網際網路檔案館) - Bootstrap尋找文件和GitHub實例
- Bootstrap 使用者介面套件(頁面存檔備份,存於網際網路檔案館)(英文) - Bootstrap回應式頁面模板,布局,組件和小部件,可快速構建網頁。