對于Bootstrap這個CSS框架，很多程序員持鄙視的態度，就如鄙視jQuery一般。誠然，就算不用這個框架，而是純手寫，或者借助JS框架的模板，一樣可以寫出一套頁面，至于頁面的精良程度、是否可二次開發、是否主流瀏覽器全兼容、是否可復用、可擴展、那就看開發者的個人能力了——如果一些人拿著公司的高額薪水或者甲方的高額酬金，卻干著一錘子的買賣，代碼不可復用，不可擴展，不可二次開發，瀏覽器不全兼容，他只是非常快速的胡七八湊了一套頁面，應付到上線，然后瀟灑的鄙視一下Bootstrap，我只能對這種人說倆字：呵呵。
言歸正傳，定制Bootstrap的方法，從簡單到復雜，大致有下面這么幾種，前幾種方法雖然簡單，但有時候其實夠用了。另外，本文涉及的Bootstrap版本其實有點亂，因為v4版在Alpha階段，本文涉及的官網頁面都是v3的，所以，凡是說源代碼的場合，都是在講v4，凡是說官網頁面，都是針對v3，因為我相信v4會在2016年內或者2017年年第一季度正式發布，這時候本文讀起來才是正常的。現在湊合看吧。
一、從官網抄代碼
直接從官網文檔抄代碼片段，需要什么組件就copy什么組件的代碼，然后稍微修改一下HTML就完工。做出來的頁面，大約只是DEMO級的，或者是企業主頁站級的。
二、利用官網給組件做減法定制
這里假設你不懂Sass，所以你只能利用官網的Customize and download功能定制Bootstrap。這里定制又分成兩種：給組件做減法定制，和修改變量定制。
先說給組件做減法定制，就是給Common CSS、Components、JavaScript components以及jQuery plugins做減法，頁面下方的變量一律保持默認。這種定制要求你清楚這些可定制項各自代表的涵義，這種定制的意義在于減小CSS文件和JS文件的字節數。
再說修改變量定制，這其實還是需要你學習Sass才能看得懂這些變量的值。然而，你如果已經掌握Sass，反而不用在官網頁面修改變量，因為非常的低效，你只需看本文第五節。
三、套用網上優秀模板
直接套用互聯網上的優秀模板。當你暫時沒有自己制作模板的能力的時候，上網尋找優秀的模板是一個好主意，GitHub、Google上搜索Bootstrap template有很多精品，down下來之后，把區塊、組件挪挪位置搬搬家，就成了為自己所用的新頁面。
四、另創建CSS文件覆蓋Bootstrap或模板的CSS聲明
這種定制方式就是按部就班加載Bootstrap或模板的相關文件之后，再加載你的另寫的CSS文件，這種開發方式已經可以滿足架構簡單的網站的開發了，甚至在你掌握了Sass之后，你依然可以仍采用這種方式開發網站，只不過明顯的缺陷就是另寫的CSS文件產生了更多的HTTP請求，以及更多的文件加載，當然不是大型網站應該采用的方式。
五、利用Sass刪減組件以及修改變量值
使用Sass以及使用構建工具Grunt的教程，請另參考我的以構建Bootstrap v4為例練習使用Grunt，這里假設你熟練掌握了Sass和Grunt，所以我只說刪減組件和修改變量值的過程。
1、利用Sass刪減組件
刪減各種CSS組件：
scss\bootstrap.scss文件是Bootstrap的主文件，將希望刪減的組件用//注釋掉即可。刪減CSS組件配套的JS組件、刪減jQuery組件：官方推薦的是用Grunt來合并所有JS組件，當然前提是你需要學習掌握Grunt。如果你并不想學習Grunt，那么利用官網定制頁面來定制也是可以的。
2、利用Sass修改變量
1、我可以修改哪些變量？
借助官網的Customize and download我們可以清晰的看到我們能修改哪些變量。或者打開scss\_variables.scss也可以看到所有的變量。
2、根據變量名，我如何弄清變量指代的CSS屬性值？
方法一，從字面猜。沒錯，由于變量名并不對應具體的類名或者元素名，而是比類名或者元素名更具體，所以猜是一個好主意，比如@font-size-h6是什么意思？猜的話肯定是h6元素的字體大小，事實上也是這樣。接著看，@font-size-h6的默認值是ceil((@font-size-base * 0.85))，也就是@font-size-base的值（14px）乘以0.85，得到11.9px，再經過ceil運算，也就是向上取整計算，得到12px。假設你的項目中的h6元素的字體大小想改成跟@font-size-base的值（14px）一樣，那么就改成@font-size-base就算定制完了。
方法二，從Bootstrap源文件的customize.min.js文件里查找變量名。比如@breadcrumb-padding-vertical，假設你看不懂它代表的屬性值，那么可以在customize.min.js文件里查找一下，然后可以找到兩處，第一處是.breadcrumb {padding: @breadcrumb-padding-vertical @breadcrumb-padding-horizontal;}，第二處是@breadcrumb-padding-vertical: 8px;，可見，@breadcrumb-padding-vertical表示的就是.breadcrumb元素的上下內間距，默認值為8px。改成你希望的值就算定制成功。
3、怎么利用Sass重置變量：
Bootstrap官方給的方案是修改scss\_custom.scss，看看官方的注釋：
Bootstrap overrides
Copy variables from_variables.scssto this file to override default values without modifying source files.
所以，從_variables.scss文件拷貝所有內容到本文件內，然后就可以復寫變量的默認值了。
當變量修改OK了，利用Grunt就可以生成生產環境需要的css和js文件了。
六、自己寫模板
Bootstrap使用者的終極形態：能夠自己寫模板。
很多人看不起Bootstrap的主要原因，就是用bs做出來的頁面一眼就能看出是利用bs制作的，所以，你需要達到的能力就是讓人看不出這是一套Bootstrap模板。
從優秀的模板文件我們可以看出，模板項目可以分為下面幾個文件夾，我的舉例僅供參考，并不是標準。
boostrap - 存放bs源文件，其中dist文件夾內的文件就是你先定制、后編譯后的css和js文件，當然你也可以選擇不定制，而是另寫CSS文件覆蓋bs的聲明，雖然會加大幾K的體積，但更好維護，而且幾K的體積增加并不是大問題。
pages - 你的模板html，按頁面名稱分文件。
js - 你的模板js文件，按模塊分文件，可以有一個common文件夾放公共文件。
css - 你的模板css文件，按模塊分文件，可以有一個common文件夾放公共文件。
img - 你的模板涉及的圖片，按模塊分子文件夾，可以有一個common文件夾放公共文件。
plugins - 存放第三方插件、組件的文件夾，內部按插件名、組件名給文件夾命名。
強調一下關于css的定制，從上文可以看到，定制分為兩個部分，一部分是修改bs自身的css變量值，另一部分是寫模板專用的css。從實踐來看，這兩種修改不要同時進行，可以先只寫模板專用的css，等做出一兩個頁面，形成了自己模板統一的合理的風格之后，再總結出對bs的css變量的修改，然后再去改bs的css變量。
css類的命名，盡量按照BEM規范命名。
bs的js組件方面，盡量不要修改bs自身的js組件，只需要補充bs沒有的js組件，比如更華麗的焦點圖效果、更漂亮的手風琴效果，等等。如果你認為一些bs的官方js組件確實很不好用或是很丑，那么也沒必要加工它，而是可以直接另寫一個，官方的該組件就直接減掉即可。
我們自己寫模板可以從制作首頁開始，首頁從制作頂部導航開始，做出一個讓人無法看出這是用Bootstrap制作的導航，接下來可以是制作BANNER模塊，以及BANNER下方的導航模塊，然后是正文第一屏、第二屏，直到頁腳模塊。
比如首頁我們命名為index.html，頂部導航用header元素，然后內部逐級構建代碼。接著是nav元素，然后是#wrap元素，然后是footer元素，最后是#fixed元素（用于漂浮、彈出層等），不再細說。
祝大家都能成功。
