Bootstrap源碼分析系列之總體架構

做爲一名合格的前端工程師，你確定據說過Bootstarp框架。確實能夠說Bootstrap框架是最流行的前端框架之一。但是也有人說Bootstrap是給後端和前端小白用的，我認爲只要學習它能給咱們前端技能帶來提高，那麼咱們就有必要研究一下它。Bootstrap框架雖然也提供了javascript插件，但總感受不夠用。Bootrtrap更多的則是被用做css框架。以前我也用過幾回Bootstrap，感受確實很快，很方便，用的次數多了就越想弄清楚它究竟是怎麼回事？它好在哪裏？

在Bootstrap官網點擊下載咱們能夠看到有用於生產環境中的Bootstrap和Bootstrap源碼以及Sass，咱們知道Bootstrap 的源碼是基於最流行的 CSS 預處理腳本 - Less 和 Sass 開發的。今天咱們就來學習一下以Less開發的Bootstrap。若是不熟悉Less語法的朋友能夠先在Less官網學習下，在下載的bootstrap-3.3.0\less文件夾中打開bootstrap.less，咱們能夠看到源碼的總體架構

// Core variables and mixins
//定義變量，方便後面調用
@import "variables.less";               
//定義混合 這相似定義函數或者宏，在mixins文件夾中可看到所定義的函數
@import "mixins.less";                  

// Reset and dependencies
//標準化css，這是一個專門將不一樣瀏覽器的默認css特性設置爲統一效果的css庫，編譯後對應源碼爲8~190行
@import "normalize.less";               
//打印樣式，編譯後對應源碼爲192~266行
@import "print.less";                   
//圖標樣式，編譯後對應源碼爲267~885行
@import "glyphicons.less";              

// Core CSS  核心CSS
//腳手架，至關於全局樣式，編譯後對應源碼爲886~989行
@import "scaffolding.less";             
//排版樣式，編譯後對應源碼爲990~1335行
@import "type.less";                    
//代碼樣式，編譯後對應源碼爲1336~1389行
@import "code.less";                    
//柵格系統，這是Bootstrap支持響應式的重點，編譯後對應源碼爲1390~2056行
@import "grid.less";                    
//表格樣式，編譯後對應源碼爲2057~2296行
@import "tables.less";                  
//表單樣式，編譯後對應源碼爲2297~2781行
@import "forms.less";                   
//按鈕樣式，編譯後對應源碼爲2782~3171行
@import "buttons.less";                 

// Components  組件
//組件中摺疊和隱藏動畫，編譯後對應源碼爲2782~3171行
@import "component-animations.less";    
//下拉菜單及下三角符號，編譯後對應源碼爲3209~3348行
@import "dropdowns.less";               
//按鈕組，編譯後對應源碼爲3349~3520行
@import "button-groups.less";           
//輸入框組，編譯後對應源碼爲3521~3674行
@import "input-groups.less";            
//導航，編譯後對應源碼爲3675~3868行
@import "navs.less";                    
//導航條，編譯後對應源碼爲3869~4393行
@import "navbar.less";                  
//麪包屑，編譯後對應源碼爲4394~4411行
@import "breadcrumbs.less";             
//默認分頁，編譯後對應源碼爲4412~4504行
@import "pagination.less";              
//翻頁，編譯後對應源碼爲4505~4542行
@import "pager.less";                   
//標籤，編譯後對應源碼爲4543~4609行
@import "labels.less";                  
//徽章，編譯後對應源碼爲4610~4648行
@import "badges.less";                  
//巨幕，編譯後對應源碼爲4649~4686行
@import "jumbotron.less";               
//縮略圖，編譯後對應源碼爲4687~4712行
@import "thumbnails.less";              
//警告框，編譯後對應源碼爲4713~4787行
@import "alerts.less";                  
//進度條，編譯後對應源碼爲4788~4881行
@import "progress-bars.less";           
//媒體對象，編譯後對應源碼爲4882~4915行
@import "media.less";                   
//列表組，編譯後對應源碼爲4916~5091行
@import "list-group.less";              
//面板，編譯後對應源碼爲5092~5426行
@import "panels.less";                  
//具備響應式特性的嵌入內容，編譯後對應源碼爲5427~5452行
@import "responsive-embed.less";        
//well效果，編譯後對應源碼爲5453~5474行
@import "wells.less";                   
//關閉按鈕圖標，編譯後對應源碼爲5475~5499行
@import "close.less";                   

// Components w/ JavaScript
//模態框，編譯後對應源碼爲5500~5622行
@import "modals.less";                  
//工具提示，編譯後對應源碼爲5623~5720行
@import "tooltip.less";                 
//彈出框，編譯後對應源碼爲5721~5841行
@import "popovers.less";                
//輪播，編譯後對應源碼爲5842~6063行
@import "carousel.less";                

// Utility classes
//實用工具類，編譯後對應源碼爲6064~6147行
@import "utilities.less";               
//響應式工具類，編譯後對應源碼爲6148~6357行
@import "responsive-utilities.less";

這些Less文件進過編譯後造成了完整的Bootstrap框架。在Bootstrap官網最後咱們能夠定製本身的Bootstrap，可根據項目的須要自行選擇不一樣的Less文件。
在《深刻理解Bootstrap》一書中以圖表的形式歸納了Bootstrap總體架構，圖片以下：

在接下來的文章中，將對Bootstrap框架中一些經常使用的樣式及組件進行分析，通過本身梳理一遍對Bootstrap更加了解了。

下一篇：Bootstrap源碼分析系列之初始化和依賴項