什麼是 Bootstrap?

如果您遇到正確的問題,Bootstrap 可以是一個很好的節省時間的解決方案。

網頁設計和開發的世界充滿了省時的軟件和快捷方式。您最近可能聽說過一種特別流行的開發框架?引導程序。

讓我們深入了解 Bootstrap 是什麼,它來自哪裡,它是為誰服務的,以及為什麼它可能(或可能不是)成為您下一個項目的好選擇。

什麼是 Bootstrap?

Bootstrap是一個開源 CSS 框架,軟件工程師可以在構建響應式網站時使用它來節省時間。憑藉其廣泛的可重用組件庫(CSS 以及 HTML 和 Javascript),成千上萬的前端開發人員依賴 Bootstrap 作為設計良好的表單、按鈕、排版和其他元素的快捷方式。

開發人員可以通過下載其預編譯文件、訪問其源代碼或通過包管理器安裝它來使用 Bootstrap。

Bootstrap 的簡史

最初,Bootstrap 是由兩名員工在 Twitter作為內部工具開發的。2010 年,Mark Otto(當時主要為twitter.com設計)和 Jacob Thornton(當時是一名平台工程師)看到了他們公司缺乏標準化、可重複設計模式的解決方案的必要性。他們合作開發了一個工具包,以簡化開發和設計過程,並在 Twitter 中大獲成功。

知道他們的解決方案對更大的工程社區同樣有幫助,馬克和雅各佈在 2011 年開源了這個項目——當時被稱為 Twitter Bootstrap。到第二年,它是Github 上最受歡迎的項目,成千上萬的開發人員採用優勢並幫助改進最終成為 Bootstrap 的東西。在過去十年中,Bootstrap 已經從最初的版本發展到當前版本 Bootstrap 5。

Bootstrap 的工作原理

Bootstrap 使用網格系統組織,該系統使用容器、行和列在網頁上佈置元素。作為響應式前端框架,Bootstrap 列會根據屏幕大小自動重新對齊。

同樣,Bootstrap 為開發人員處理圖像響應,根據最適合用戶設備的需要調整圖像大小。

Bootstrap 包括可重用的組件,設計人員和開發人員可以使用這些組件來避免在需要標準網站元素時編寫自定義代碼。排版、表格、下拉菜單、按鈕、分頁、警報、進度條、手風琴、導航菜單、模式和輪播只是 Bootstrap 捆綁的許多常用 UI 組件的幾個示例。

引導程序的好處

首先,開發人員喜歡 Bootstrap,因為它可以節省時間。通過模板化和標準化如此多在網站上反復出現的常見元素,Bootstrap 本質上允許開發人員簡單地複制粘貼代碼片段並為他們的網站和應用程序獲取乾淨、設計良好的組件。

但是,Bootstrap 也是可定制的。開發人員可以使用 CSS 變量定制其組件的外觀、感覺和功能,通過一些小的改動在他們的網站上創建一個獨特的設計,而不是一個一個地調整顏色、字體樣式、大小或其他屬性。

還有許多網站致力於在廣泛的用例中共享(和銷售)更全面的Bootstrap 設計模板和主題。這包括:

  • 登陸頁面
  • 網絡投資組合
  • 報告儀表板
  • 在線學習平台
  • 電子商務網站
  • 社交網絡接口
  • 數字雜誌

最後,Bootstrap 在 Github 上有一個活躍的開發者倡導者社區,不斷修改和添加到其開源代碼庫。這意味著框架在不斷改進,初學者通常可以在社區論壇或Bootstrap subreddit上從更有經驗的用戶那裡找到問題的答案。

Bootstrap 的缺點

綜上所述,Bootstrap 確實有一些限制,使其不太適合某些開發人員和設計人員:

  • 千篇一律的外觀:通過設計,Bootstrap 組件具有一致的視覺風格。這意味著如果沒有自定義應用獨特的外觀和感覺,Bootstrap 項目可以看起來非常相似。
  • 令人困惑的語言:Bootstrap 與任何新工具包一樣具有學習曲線,但一些用戶指出其特定語法是早期的痛點。教程和演練可以幫助初學者站穩腳跟,但通常需要一些實踐經驗才能牢牢掌握 Bootcamp 術語的來龍去脈。
  • 網站速度可能很慢:Bootstrap 庫包含非常大的 CSS 文件,可以減慢網站的加載時間——但大多數項目實際上並不需要默認包含的所有文件。因此,為了避免加載緩慢,開發人員必須自定義他們的 Bootstrap 庫下載以刪除不必要的文件,這確實需要一些額外的時間和技術知識。

Bootstrap 和 Webflow 相遇的地方

對於希望在構建前端項目時節省時間的 Web 開發人員來說,Bootstrap 是一個有用的工具——但如果您正在創建一個 Webflow 站點,則不需要了解或使用 Bootstrap 組件。

這是因為 Webflow 是一個無代碼解決方案,它提供了自己的完整設計和內容平台,帶有可定制的元素和样式管理器,因此沒有必要使用 Bootstrap 的模板化代碼片段。當然,如果您看到自己特別喜歡的設計,或者要將站點遷移到 Webflow,您可以在 Webflow 中重新創建 Bootstrap 組件的樣式。但 Webflow 的目的是讓您無需了解任何 CSS、Javascript 或 HTML 就可以構建漂亮、複雜的網站。

想了解更多?查看我們 Webflow 社區成員