使用 Bootstrap 加速應用程序開發

Bootstrap 是最好和最常用的 HTML/CSS/JS 前端框架之一。 幾乎所有製作過一兩個網站的 Web 開發人員都聽說過這個流行的框架。 它提供了許多現成的組件和資源，Bootstrap 可以顯著加快您的應用程序開發。

每個優秀的開發人員都關心在他們的開發過程中節省每一秒。 高效意味著更快的部署——我們部署得越早、越頻繁，我們的最終用戶就會越快獲得更好的產品。 因此，花幾個小時或幾天來計劃流程和策略不僅可以為我們節省幾分鐘，而且可以節省很多小時。

在過去的 4 年裡，我個人在 90% 的項目中一直在使用這個框架。 在本文中，我想與您分享一些技巧，這些技巧可以幫助您加快應用程序開發速度，而不會錯過 Bootstrap 的一些出色功能。

了解引導程序

儘管它是一個非常容易上手的框架，但不要被它乍一看的簡單性所迷惑。 在匆忙進入一個項目之前，花時間玩這個框架，了解它的基礎設施和令人興奮的組件的關鍵部分。 這將有助於避免 10 個最常見的引導錯誤。

花一個小時閱讀 Bootstrap 網站上的文檔或從 Toptal 博客上的一篇精彩文章中了解更多信息，什麼是 Bootstrap？ 關於什麼、為什麼和如何做的簡短教程。 而且，scotch.io 上的精彩文章 Bootstrap 3 Tips and Tricks You Might Not Know。

如果您發現閱讀文檔是一項無聊的任務，而您寧願閱讀一些代碼，那麼最好的起點是 Bootstrap 的網站。 打開您的網絡檢查器，掃描網站的源代碼，並檢查每個代碼塊及其元素。 這可能是掌握基礎知識的最好和最快的方法之一。

深入研究頁面結構並了解佈局是如何構建的。

 <div class="container"> <div class="row"> ... </div> </div>

… 調整瀏覽器窗口大小或使用 Chrome 的 Viewport Resizer 了解有關媒體查詢實用程序的更多信息。

 /* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... } /* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... } /* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... }

 @media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @media (min-width: @screen-lg-min) { ... }

…以及如何以及何時使用它們，熟悉列類以獲得最佳響應式設計結果。

 <div class="row"> <div class="col-sm-7 col-md-9 col-xs-6">Left column</div> <div class="col-sm-5 col-md-3 col-xs-6">Right column</div> </div>

看看 W3Schools，您會在其中找到所有 CSS 類、組件和 JavaScript 插件的完整 Bootstrap 參考——所有這些都帶有“自己嘗試”示例：

• Bootstrap 的網格系統解釋：Bootstrap 中的網格
• 基本 CSS 類：排版、按鈕、表單和表單元素、助手類、圖像、表格
• 單個組件：字形圖標、下拉菜單、導航。

檢查源代碼並嘗試熟悉盡可能多的類名。 了解他們的用例——方法、時間和原因。 這將幫助您在編寫 HTML 和样式化 UI 元素時更快地前進。 了解有關這些組件的更多信息將幫助您避免使用大量不必要的重複代碼使樣式表變得臃腫。 通過使用和重用現有組件來保持精簡和乾淨，而不是創建太多與框架中已經存在的組件相同的新組件。

在由多個開發人員組成的團隊中工作時，這一點尤其重要。 確保在將新設計轉換為代碼時，每次都一遍又一遍地編寫大量重複的代碼，為同一個案例創建太多樣式。 使用 UI 樣式指南保持 UI 開發的一致性和有據可查的文檔還可以為高效的團隊合作增加一些紐帶。 此外，您會發現在向您的應用程序添加新功能或頁面時，您會減少挫折感。 我參與了十幾個大項目，相比之下，我見過許多框架被黑掉的案例，每次添加新的 CSS 代碼都會破壞其他頁面上的 UI。 瀏覽所有站點並修復這些類型的錯誤會變得非常累人。 不僅如此，還要考慮花費在額外的開發人員時間和 QA 幫助上的成本和所有資金。

7個最常見的浪費時間的造型錯誤

1. 居中文本或 div 時

如果您需要將 div 和/或內容居中，您可以使用以下類之一：

使用文本中心

<p class="text-center">I am centered text</p>

… 或中心塊

<div class="center-block">I am centered text</div>

不是.center或<center>

2.更改字體大小時

如果您需要更小或更大的字體，可以使用以下類之一：

 <p class="lead">I'm bigger paragraph text.</p>

 <p class="small">I'm smaller paragraph text.</p>

如果您需要更大或更小的標題，請不要忘記.h1 、 .h2 、 .h3 、 .h4 、 .h5 、 .h6 、 .small 。 像這樣使用它：

 <h1 class="h2">Smaller Title with .h2</h1>

 <h3 class="h1">Bigger Title with .h1</h3>

 <h4 class="small">Smaller Title with .small</h4>

3. 清除浮動或強制元素自清除其子項時

無需創建 .clear 之類的類，您始終可以使用 Bootstrap 的.clearfix來代替。

 <div class="clearfix">...</div>

4.殺.row類邊距時

只需使用 .clearfix 而不是定義自己的樣式（或更糟糕的是，使用內聯樣式）：

 <div class="clearfix">...</div>

5.取消樣式或內聯無序列表和其他元素時

刪除列表項的默認列表樣式和左邊距。 這僅適用於直接子列表項。 如果您需要對嵌套列表應用相同的內容，您還需要在這些列表上添加類名。

 <ul class="list-unstyled"> <li>...</li> </ul> <ul class="list-inline"> <li>...</li> </ul>

同樣，對於復選框或單選按鈕，我們有.checkbox-inline和.radio-inline 。

並且您始終可以將.form-inline添加到您的表單（不一定是<form> ）以用於左對齊和內聯塊控件。

6. 調整按鈕大小時

喜歡更大或更小的按鈕？ 添加.btn-lg 、 .btn-sm或.btn-xs以獲得其他尺寸。

7. 左右浮動對齊項目時

使用類將元素向左或向右浮動。 !important包括在內以避免特異性問題。 類也可以用作任何 CSS 預處理器的 mixin。

使用.pull-right 、 .pull-left 、 .text-right 、 .text-left代替.right 、 .left 、 .left-float 、 .right-float 。

 <div class="pull-left">...</div> <div class="pull-right">...</div>

使用文本對齊類輕鬆將文本重新對齊到組件。

 <p class="text-left">Left aligned text.</p> <p class="text-right">Right aligned text.</p>

不要直接自定義框架核心文件

在處理大型項目時，我發現有效使用框架的最佳方式是構建它，而不是直接自定義其核心文件。 這個概念類似於您可能用於項目的其他平台和庫。

雖然，如果您正在構建一個小型站點並且有一個可能不需要太多更改或更新的設計模型，您可能會發現根據您的需要自定義框架是一個更好的選擇。 例如，您可能想直接在框架文件中刪除所有不需要的東西，或者您可以轉到 Bootstrap 的站點自定義部分，在那裡您可以輕鬆配置所有組件、變量和 jQuery 插件以獲得您的非常自己的版本。 在這種情況下，您可能會加快站點開發並縮短樣式或處理覆蓋的時間。

但是，如果您開始或在一個有多個開發人員或更多開發人員的大型站點上工作 - 最好將事情分開並井井有條。 將框架文件移出主自定義 CSS 文件夾並將其保存在非編輯非版本文件夾中，並使用 Grunt 或 Gulp 插件 grunt-uncss 或 gulp-uncss 刪除未使用的 CSS。 保持它獨立的另一種方法是通過 CDN 提供服務。 將框架的代碼分開且保持不變，可以在將其升級到最新版本時為您提供更好、更快的選擇。 它還有助於最大程度地減少一些可伸縮性和样式問題，或者在通過快速持續的 UI 更改進行添加時減慢速度。

利用像 Yeoman 或 Slush 這樣的腳手架工具，以及像 Bower、Python 的 pip、Node 的 NPM 或 Ruby Gems 這樣的包管理器，因為它們所做的遠不止將文件添加到應用程序的路徑。 我真的很欣賞 Bower 的強大功能——它絕對可以做的不僅僅是下載一兩個文件。 使用包管理器是一個好主意，因為您的項目的複雜性很可能會增加，並且第三方插件的數量以及您如何維護它們將變得瘋狂且耗時。 Bower 將幫助您跟踪每個插件及其依賴項，包括與 Bootstrap 相關的任何內容。

利用可用的引導資源進行應用程序開發

Bootstrap 的流行帶來了大量有用的資源：文章、教程、第三方插件和擴展、模板、主題構建器等等。 因此，無論您是在尋找靈感還是代碼片段，您都將擁有加快進度所需的一切。

你會認為有這麼多可用資源，每個人都會利用它並通過他們的項目使用它，但不管你信不信——事實並非如此。 一些開發人員通過跳過一些很棒的代碼片段或資源來浪費他們的時間並減緩項目進度。 雖然您不應該只是盲目地複制和粘貼，但您必須了解好的部分並將它們用於您的編碼風格和技術需求。 尋找和整理好的資源並能夠有效利用它的能力也是一種技能，需要多年的經驗和知識。

您將在下面找到開始使用的有用資源列表：

模板、主題和插件

Bootstrap 創建者的官方主題：themes.getbootstrap.com。

具有高級 Bootstrap 主題和模板的市場：wrapbootstrap.com、themeforest.net、creativemarket.com/themes/bootstrap。

免費引導主題和模板：startbootstrap.com、www.bootstrapzero.com、shapebootstrap.net/free-templates。

“The Big Badass List” - 319 個有用的 Bootstrap 資源​​列表：bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources/

AngularJS

由 AngularUI 團隊用純 AngularJS 編寫的 BootstrapUI。

反應JS

React-Bootstrap 是一個可重用的前端組件庫。 您將通過 Facebook 的 React.js 框架獲得 Twitter Bootstrap 的外觀和感覺，但代碼更簡潔。

姜戈

Bootstrap 3 與 Django 的集成：https://github.com/dyve/django-bootstrap3

傑基爾

Jekyll-Bootstrap 是基於 Jekyll 的博客的完整博客支架。

WordPress

具有現代前端開發工作流程的 WordPress 入門主題 Sage。 基於 HTML5 Boilerplate、gulp、Bower 和 Bootstrap。

材料設計

Bootstrap 的 Material Design 是 Bootstrap 3 的一個主題，它可以讓你在你最喜歡的前端框架中使用新的 Google Material Design。

結論

Bootstrap 是最好的可用框架之一，它為您提供許多出色的工具和資源，以加速和加快您的應用程序開發過程。

在設計和編寫出色的 UI 時，它可以為您節省數小時/數天的工作。 每個組件和插件都通過實時示例和代碼塊進行了詳盡的記錄，以便於使用和定制。 許多開發人員強烈推薦它，並且在原型設計和生產中都非常受歡迎。 它是製作適合移動設備的響應式網站的非常好的工具。 Bootstrap 為許多類型的項目提供了一個很好的起點，可以選擇將其交給設計師並說“讓這個看起來很漂亮！” 他們不需要破解代碼。 最重要的是，它允許您先開發結構，然後再處理字體、顏色和花哨的樣式。 花時間研究它可以做什麼，並聰明地了解如何以最佳方式使用它，以便您可以更快地到達您想要的地方。