bootstrap3.x內less資料夾的檔案內容及功能分析
寫於 2016.01.10
Bootstrap的大名想必所有前端開發者都聽過，在此不再贅述，想要深入的瞭解可以到這兒：www.bootcss.com/
首先談談為什麼要寫這篇文章。在公司最近的專案中，被要求使用bootstrap進行樣式的重構，然而我們又有自己的一套UIkit，樣式的覆蓋如果直接寫在css中是非常痛苦的一件事，開發成本巨大。因為如此，萌生了改寫bootstrap原始碼的想法。然而改原始碼並非一件易事。市面上關於bootstrap的資料有很多，但是基本上都是在介紹它的優點以及使用方法，鮮有對其檔案目錄或者原始碼進行分析，想要定製它首先需要一個準確的切入點。在研究了一輪其less檔案的目錄結構以後，我似乎找到了這個關鍵的切入點，遂寫一篇分享，希望可以對bootstrap的使用者有一定的啟發。（嫌麻煩的同學可以直接在ofollow,noindex">pikock.github.io/bootstrap-m… （貌似需要翻牆）進行視覺化自定義，但是這個專案對應的bootstrap版本只到3.1，如果要使用最新版本（v3.3.5）的同學可能得考慮一下了。）
檔案目錄
這一大堆檔案裡面，我們開啟less資料夾，可以看到
這裡面就是整個bootstrap的樣式檔案目錄了，首先我們找到關鍵的4個檔案，它們分別是
bootstrap.less 複製程式碼
variables.less 複製程式碼
utilities.less 複製程式碼
mixins資料夾 複製程式碼
下面分析各個檔案的作用。
bootstrap.less
bootstrap主檔案，把所有的元件樣式都放在一起了，編譯出來後就是bootstrap.css
檔案了。它長這樣：
不用再詳細說明了吧，很直觀，學過less的都懂……
variables.less
變數定義檔案，裡面定義了一大堆的變數，也就是各種顏色啊，大小啊，邊距啊等等之類的東西，上面貼的那個[pikock.github.io/bootstrap-m… ][6]其實修改的就是這裡面的內容，而我們自定義bootstrap樣式的操作主要也是在這裡面進行。
嗯，很直觀。
utilities.less
公共定義檔案，也可以理解為公用的“動作”，因為它裡面定義了諸如“左浮動”，“右浮動”之類的動作，任何html標籤只要加上定義在此檔案裡面動作，就可以產生相應的效果。
比方說我想定義一個動作，能夠讓元素的z-index為某一個值，我只需要在裡面寫上
.high-index{
z-index: 200;
}
.low-index{
z-index: 0;
}
複製程式碼
然後在html標籤裡面直接使用class="high-index"
即可。
mixins資料夾
裡面的檔案結構是這樣的
button.less
看一下里面的內容
less
資料夾裡面的button.less
/minxins/button.less
所定義的樣式。如果我們想要加一個“大圓角按鈕”的樣式，我們可以在/minxins/button.less
裡面這樣去定義：
.button-circle(){
border-radius: 1000px;
}
複製程式碼
然後在/less/button.less
裡面加上這麼一句：
.btn-circle{
.buttom-circle();
}
複製程式碼
就可以了。以後只需要在html標籤加入這個class就可以使用我們自己定義的.btn-circle
效果，如<button class="btn-circle"></button>