歷史
Bootstrap是由Twitter的馬克·奧托和雅各布·桑頓開發的。Bootstrap是2011年8月在GitHub上發布的開源產品。
最近，我有很多空閑時間。今天，我將介紹壹個前端“風格”框架-bootstrap。
首先，Bootstrap的整體架構
為什麽我在簡介中稱Bootstrap為前端風格框架？也許這個標題不是很準確，但我認為這個標題可以使壹些初學者更快地理解和了解Bootstrap是什麽。我不喜歡用壹些高大上的詞匯來加深對某個知識點的理解，而是更喜歡用壹些大家都容易理解的詞匯來描述知識點。雖然這種描述可能有點不準確，但我認為這沒什麽大不了的，因為這種描述確實可以讓初學者更快地理解這些知識。因為我在學習知識點的時候有這樣的困惑，壹些知識的官方文檔說是高大上，其實只是以前的東西，然後包裝起來讓開發更容易更快。因此，我在這裏與Bootstrap框架分享相同的內容。而內容的組織也是為了初學者更好的掌握。因為我剛開始接觸的時候是個初學者。我認為這種組織可以更快更好地理解知識。
對於Bootstrap，首先要介紹的是它的整體架構——它是由什麽組成的？我相信通過查看下面的圖片，您可以快速了解Bootstrap具體由什麽組成。
從上圖可以清楚地看到，Bootstrap主要由以下幾部分組成:
12網格系統——即把屏幕分成12列。
使用行來組織元素（每行包括12列），然後將內容放在列中。
列偏移量由col-md-offset-*控制。
基本布局組件-Bootstrap提供了各種基本布局組件。如排版、代碼、表格、按鈕、表格等。
Jquery——Bootstrap所有JavaScript插件都依賴Jquery。如果您想使用這些JS插件，則必須參考Jquery庫。這就是為什麽除了Bootstrap的JS文件和CSS文件之外，我們還需要參考Jquery庫的原因。它們是依賴關系。
CSS組件-Bootstrap為我們預先實現了許多CSS組件。例如下拉框、按鈕組、導航等。也就是說，Bootstrap內容幫助我們定義了許多CSS樣式，您可以直接將這些樣式應用於之前的下拉框和其他元素。
——JavaScript插件Bootstrap也為我們實現了壹些JS插件。我們可以使用它提供的插件來完成壹些常用功能，並且不需要重新編寫JS代碼來實現提示框和模態窗口等效果。
響應式設計——這是壹種設計理念。響應式意味著它會根據屏幕大小自動調整頁面，這樣前端頁面就可以在不同大小的屏幕上表現良好。
Bootstrap由以上部分組成。上面已經對每個組件進行了簡要介紹，下面的內容無非是通過壹些示例對每個組件進行詳細介紹。
二、12網格系統
Bootstrap為更好的布局定義了12網格系統。每個前端框架首先要定義的是布局系統。在Bootstrap中，頁面布局是使用行和列創建的。其布局有幾個原則:
行必須包含在。集裝箱（固定寬度）或。容器-液體（100%寬度）。
每行包含12列。
在每壹列中放置內容。
在bootstrap的網格系統中，瀏覽器根據寬度分為四種類型。這些值是:自動（100%）、750像素、970像素、1170像素。
對應的款式有超小型（xs）、小型（sm）、中型屏幕（md）和大型（lg）。
這是通過媒體查詢定義最小寬度來實現。所以Bootstrap做出來的網頁兼容大的不兼容小的！
在Bootstrap框架中，屏幕尺寸的邊界值已經被預先定義，並且其邊界值通過媒體查詢來定義。其定義如下:
/*超小屏幕（手機，不到768 px）*/
/*沒有與媒體查詢相關的代碼，因為這是Bootstrap中的默認值（記住Bootstrap是移動設備的優先級嗎？) */
/*小屏幕（平板顯示器，768像素或更高）*/
@media（最小寬度:@ screen-sm-min ）{...}
/*中等屏幕（桌面顯示器，992像素或更高）*/
@media（最小寬度:@ screen-MD-min ）{...}
/*大屏幕（大型桌面顯示器，大於或等於1200 px）*/
@media（最小寬度:@ screen-LG-min ）{...}
事實上，在Win8應用程序開發中也使用了媒體查詢來實現響應式應用程序。因此，如果妳將來聽到響應式系統，不要覺得很深刻。事實上，它是為我們定義媒體查詢的框架。如果它超過了媒體查詢中定義的最小寬度，並且對應於某種類型的屏幕，通過這種方式，您可以縮小不同屏幕之間的元素大小以適應屏幕。但是Bootstrap提出的概念是移動設備優先，所以Bootstrap設計的頁面只能兼容大的，不能兼容小的。
三、基本布局組件
基本布局組件是為Bootstrap框架內的壹些基本布局標簽定義壹些統壹的樣式。如表格、按鈕、表單等。讓我們來看壹個表格示例:
& lt！DOCTYPE html & gt
& lthtml & gt
& lthead & gt
& ltmeta charset =“utf-8“& gt；
& ltmeta？/jquery/1.11.2/jquery . min . js“& gt；& lt/script & gt；
& lt！-包括所有編譯的插件（如下），或根據需要包括單個文件-& gt；
& lt給srwww.cdccgs.com寫劇本？/bootstrap/3 . 3 . 4/js/bootstrap . min . js“& gt；& lt/script & gt；
& lt/body & gt；
& lt/html & gt；
對於按鈕和表單的示例代碼，我不會在此發布。您可以通過以下鏈接查看運行效果和源代碼。您也可以通過最終下載文件下載本主題的所有源代碼。
第四，CSS組件
CSS組件類似於基本布局組件，即Bootstrap為壹些標簽定義了壹些現有的樣式，這些樣式的效果非常漂亮，因此每個公司或開發人員都不需要編寫另壹種樣式，從而加快了開發效率。讓我們在這裏直接看壹個導航的例子。說白了，用多了自然就習慣了。