bootstrap3.x內less資料夾的檔案內容及功能分析

jrainlau發表於2016-01-10
boot

寫於 2016.01.10

Bootstrap的大名想必所有前端開發者都聽過，在此不再贅述，想要深入的瞭解可以到這兒： www.bootcss.com/

首先談談為什麼要寫這篇文章。在公司最近的專案中，被要求使用bootstrap進行樣式的重構，然而我們又有自己的一套UIkit，樣式的覆蓋如果直接寫在css中是非常痛苦的一件事，開發成本巨大。因為如此，萌生了改寫bootstrap原始碼的想法。然而改原始碼並非一件易事。市面上關於bootstrap的資料有很多，但是基本上都是在介紹它的優點以及使用方法，鮮有對其檔案目錄或者原始碼進行分析，想要定製它首先需要一個準確的切入點。在研究了一輪其less檔案的目錄結構以後，我似乎找到了這個關鍵的切入點，遂寫一篇分享，希望可以對bootstrap的使用者有一定的啟發。（嫌麻煩的同學可以直接在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>

總結

經過以上分析，相信大家已經明白bootstrap的less資料夾裡面不同檔案的作用，可以愉快地對自己的bootstrap進行自定義啦！不過由於bootstrap4.0已經投入到scss的陣營，所以在4.0裡面需要自己去判斷了，不過其基本邏輯應該變動不大，需要具體情況具體分析。

Thanks for reading, see ya next time!

相關文章