本文主要針對對Bootstrap有所了解，或者使用過Bootstrap的讀者提供參考。
官方提供了個性化定制功能 ,可以選擇自己需要的組件，插件，自己設置不同模塊的less變量，最后從官網下載到一份編譯后的個性化bootsrap。
如果是比較復雜的項目，雖然官網開放的變量上百個，但還是不能滿足業務需求，這時候就需要下載源碼修改less文件，bootstrap是通過less預編譯的。
less介紹
less是一種動態樣式語言。LESS 將 CSS 賦予了動態語言的特性，如 變量， 繼承， 運算， 函數.
使用less可以這樣寫css：
@base: #f938ab;
.box-shadow(@style, @c) when (iscolor(@c)) {
box-shadow: @style @c;
-webkit-box-shadow: @style @c;
-moz-box-shadow: @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
.box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
color: saturate(@base, 5%);
border-color: lighten(@base, 30%);
div { .box-shadow(0 0 5px, 30%) }
}
less文件需要編譯器才能轉化為css文件。體驗less編譯可以在在線less編譯器中編寫less語句，然后編譯成css文件。gulp使用gulp-less實現編譯。
變量
變量允許我們單獨定義一系列通用的樣式，然后在需要的時候去調用。所以在做全局樣式調整的時候我們可能只需要修改幾行代碼就可以了。例如：
// LESS
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
編譯之后的css文件：
/* 生成的 CSS */
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}
混合
混合可以將一個定義好的class A輕松的引入到另一個class B中，從而簡單實現class B繼承class A中的所有屬性。我們還可以帶參數地調用，就像使用函數一樣。
// LESS
.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
編譯后的css文件
* 生成的 CSS */
#header {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#footer {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
嵌套規則
我們可以在一個選擇器中嵌套另一個選擇器來實現繼承，這樣很大程度減少了代碼量，并且代碼看起來更加的清晰。
// LESS
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
編譯后的css文件：
/* 生成的 CSS */
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}
函數 & 運算
運算提供了加，減，乘，除操作；我們可以做屬性值和顏色的運算，這樣就可以實現屬性值之間的復雜關系。LESS中的函數一一映射了JavaScript代碼，如果你愿意的話可以操作屬性值。
// LESS
@the-border: 1px;
@base-color: #111;
@red: #842210;
#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}
#footer {
color: @base-color + #003300;
border-color: desaturate(@red, 10%);
}
編譯后的css文件：
/* 生成的 CSS */
#header {
color: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color: #7d2717;
}
bootstrap源碼
Bootstrap 插件全部依賴 jQuery
請注意，Bootstrap 的所有 JavaScript 插件都依賴 jQuery，因此 jQuery 必須在 Bootstrap 之前引入，就像在基本模版中所展示的一樣。在 bower.json 文件中 列出了 Bootstrap 所支持的 jQuery 版本。
下載源碼
bootsrap源碼托管于github，可以通過git命令克隆倉庫：
git clone https://github.com/twbs/bootstrap.git
還可以通過包管理工具bower安裝：
bower install bootsrap
運行次命令后，bower會下載最新版的bootsrap源碼包到項目中。
源碼解讀
Bootstrap 源碼包含了預先編譯的 CSS、JavaScript 和圖標字體文件，并且還有 LESS、JavaScript 和文檔的源碼。具體來說，主要文件組織結構如下
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
less/、js/ 和 fonts/ 目錄分別包含了 CSS、JS 和字體圖標的源碼。dist/ 目錄包含了編譯后的bootsrap的css文件。docs/ 包含了所有文檔的源碼文件，examples/ 目錄是 Bootstrap 官方提供的實例工程。除了這些，其他文件還包含 Bootstrap 安裝包的定義文件、許可證文件和編譯腳本等。
bootstrap/less目錄下的文件均為.less文件，是bootsrap樣式的主要代碼，不同的文件根據功能及性質命名。
bootstrap.less:
這個是核心文件。它用來引入其他文件，最終由你來編譯它。reset.less:
初始化文件，始終是最先引入的文件。utilities.less
這個文件總是最后引入，你可以把想要覆蓋的類寫到這里。
模塊化修改
為了讓修改的內容和原始文件分離開，需要引進模塊的方式，這樣的好處是如果bootstrap升級的時候，也不影響自定義后的樣式文件。由于less文件可以相互引入，因此很容易實現了模塊化
在bootsrap文件外邊平級創建一個custom文件夾，并創建以下文件
custom-variables.less:
我從Bootstrap源碼中復制了一份variables.less并在這份拷貝中修改變量。custom-other.less:
這個文件中包含了那些無法定義成變量的自定義內容。custom-bootstrap.less
這是新的「核心」文件。我們將把它編譯成CSS。與原始的 LESS文件一樣，它使用下面的命令來引入上面那兩個自定義文件：
@import "../bootstrap/less/bootstrap.less";
@import "custom-variables.less";
@import "custom-other.less";
@import "../bootstrap/less/utilities.less";
這樣等bootsrap版本升級的時候也能輕松實現升級。
可視化修改
最后提供兩個可視化修改bootsrap變量的網站
bootswatchr 通過修改變量值實現。
stylebootstrap 通過組件化組織內容。
參考資料：
http://www.bootcss.com/p/lesscss/#docs
http://www.w3cplus.com/css/customizing-bootstrap.html
Thomas Park 《Customizing Bootstrap》
