對于Bootstrap這個CSS框架夕吻，很多程序員持鄙視的態(tài)度，就如鄙視jQuery一般繁仁。誠然涉馅，就算不用這個框架，而是純手寫黄虱，或者借助JS框架的模板稚矿，一樣可以寫出一套頁面，至于頁面的精良程度捻浦、是否可二次開發(fā)晤揣、是否主流瀏覽器全兼容、是否可復(fù)用默勾、可擴展碉渡、那就看開發(fā)者的個人能力了——如果一些人拿著公司的高額薪水或者甲方的高額酬金，卻干著一錘子的買賣母剥，代碼不可復(fù)用滞诺，不可擴展，不可二次開發(fā)环疼，瀏覽器不全兼容习霹，他只是非常快速的胡七八湊了一套頁面炫隶，應(yīng)付到上線淋叶，然后瀟灑的鄙視一下Bootstrap，我只能對這種人說倆字：呵呵伪阶。
言歸正傳煞檩，定制Bootstrap的方法，從簡單到復(fù)雜栅贴，大致有下面這么幾種斟湃，前幾種方法雖然簡單，但有時候其實夠用了檐薯。另外凝赛，本文涉及的Bootstrap版本其實有點亂，因為v4版在Alpha階段坛缕，本文涉及的官網(wǎng)頁面都是v3的墓猎，所以，凡是說源代碼的場合赚楚，都是在講v4毙沾，凡是說官網(wǎng)頁面，都是針對v3宠页，因為我相信v4會在2016年內(nèi)或者2017年年第一季度正式發(fā)布搀军，這時候本文讀起來才是正常的∨蚶現(xiàn)在湊合看吧。
一罩句、從官網(wǎng)抄代碼
直接從官網(wǎng)文檔抄代碼片段，需要什么組件就copy什么組件的代碼敛摘，然后稍微修改一下HTML就完工。做出來的頁面，大約只是DEMO級的柿祈，或者是企業(yè)主頁站級的苫昌。
二、利用官網(wǎng)給組件做減法定制
這里假設(shè)你不懂Sass捕虽，所以你只能利用官網(wǎng)的Customize and download功能定制Bootstrap慨丐。這里定制又分成兩種：給組件做減法定制，和修改變量定制泄私。
先說給組件做減法定制房揭，就是給Common CSS、Components晌端、JavaScript components以及jQuery plugins做減法捅暴，頁面下方的變量一律保持默認。這種定制要求你清楚這些可定制項各自代表的涵義咧纠，這種定制的意義在于減小CSS文件和JS文件的字節(jié)數(shù)蓬痒。
再說修改變量定制，這其實還是需要你學(xué)習(xí)Sass才能看得懂這些變量的值漆羔。然而梧奢，你如果已經(jīng)掌握Sass，反而不用在官網(wǎng)頁面修改變量演痒，因為非常的低效亲轨，你只需看本文第五節(jié)。
三嫡霞、套用網(wǎng)上優(yōu)秀模板
直接套用互聯(lián)網(wǎng)上的優(yōu)秀模板瓶埋。當(dāng)你暫時沒有自己制作模板的能力的時候，上網(wǎng)尋找優(yōu)秀的模板是一個好主意诊沪，GitHub养筒、Google上搜索Bootstrap template有很多精品，down下來之后端姚，把區(qū)塊晕粪、組件挪挪位置搬搬家，就成了為自己所用的新頁面渐裸。
四巫湘、另創(chuàng)建CSS文件覆蓋Bootstrap或模板的CSS聲明
這種定制方式就是按部就班加載Bootstrap或模板的相關(guān)文件之后装悲，再加載你的另寫的CSS文件，這種開發(fā)方式已經(jīng)可以滿足架構(gòu)簡單的網(wǎng)站的開發(fā)了尚氛，甚至在你掌握了Sass之后诀诊，你依然可以仍采用這種方式開發(fā)網(wǎng)站，只不過明顯的缺陷就是另寫的CSS文件產(chǎn)生了更多的HTTP請求阅嘶，以及更多的文件加載属瓣，當(dāng)然不是大型網(wǎng)站應(yīng)該采用的方式。
五讯柔、利用Sass刪減組件以及修改變量值
使用Sass以及使用構(gòu)建工具Grunt的教程抡蛙，請另參考我的以構(gòu)建Bootstrap v4為例練習(xí)使用Grunt，這里假設(shè)你熟練掌握了Sass和Grunt魂迄，所以我只說刪減組件和修改變量值的過程粗截。
1、利用Sass刪減組件
刪減各種CSS組件：
scss\bootstrap.scss文件是Bootstrap的主文件捣炬，將希望刪減的組件用//注釋掉即可熊昌。刪減CSS組件配套的JS組件、刪減jQuery組件：官方推薦的是用Grunt來合并所有JS組件遥金，當(dāng)然前提是你需要學(xué)習(xí)掌握Grunt浴捆。如果你并不想學(xué)習(xí)Grunt，那么利用官網(wǎng)定制頁面來定制也是可以的稿械。
2选泻、利用Sass修改變量
1、我可以修改哪些變量美莫？
借助官網(wǎng)的Customize and download我們可以清晰的看到我們能修改哪些變量页眯。或者打開scss\_variables.scss也可以看到所有的變量厢呵。
2窝撵、根據(jù)變量名，我如何弄清變量指代的CSS屬性值襟铭？
方法一碌奉，從字面猜。沒錯寒砖，由于變量名并不對應(yīng)具體的類名或者元素名赐劣，而是比類名或者元素名更具體，所以猜是一個好主意哩都，比如@font-size-h6是什么意思魁兼？猜的話肯定是h6元素的字體大小，事實上也是這樣漠嵌。接著看咐汞，@font-size-h6的默認值是ceil((@font-size-base * 0.85))盖呼，也就是@font-size-base的值（14px）乘以0.85，得到11.9px化撕，再經(jīng)過ceil運算几晤，也就是向上取整計算，得到12px侯谁。假設(shè)你的項目中的h6元素的字體大小想改成跟@font-size-base的值（14px）一樣锌仅，那么就改成@font-size-base就算定制完了。
方法二墙贱，從Bootstrap源文件的customize.min.js文件里查找變量名。比如@breadcrumb-padding-vertical贱傀，假設(shè)你看不懂它代表的屬性值惨撇，那么可以在customize.min.js文件里查找一下，然后可以找到兩處府寒，第一處是.breadcrumb {padding: @breadcrumb-padding-vertical @breadcrumb-padding-horizontal;}魁衙，第二處是@breadcrumb-padding-vertical: 8px;，可見株搔，@breadcrumb-padding-vertical表示的就是.breadcrumb元素的上下內(nèi)間距剖淀，默認值為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文件拷貝所有內(nèi)容到本文件內(nèi)捌刮，然后就可以復(fù)寫變量的默認值了。
當(dāng)變量修改OK了舒岸，利用Grunt就可以生成生產(chǎn)環(huán)境需要的css和js文件了绅作。
六、自己寫模板
Bootstrap使用者的終極形態(tài)：能夠自己寫模板蛾派。
很多人看不起B(yǎng)ootstrap的主要原因俄认，就是用bs做出來的頁面一眼就能看出是利用bs制作的，所以洪乍，你需要達到的能力就是讓人看不出這是一套Bootstrap模板眯杏。
從優(yōu)秀的模板文件我們可以看出，模板項目可以分為下面幾個文件夾典尾，我的舉例僅供參考役拴，并不是標(biāo)準(zhǔn)。
boostrap - 存放bs源文件钾埂，其中dist文件夾內(nèi)的文件就是你先定制河闰、后編譯后的css和js文件科平，當(dāng)然你也可以選擇不定制，而是另寫CSS文件覆蓋bs的聲明姜性，雖然會加大幾K的體積瞪慧，但更好維護，而且?guī)譑的體積增加并不是大問題部念。
pages - 你的模板html弃酌，按頁面名稱分文件。
js - 你的模板js文件儡炼，按模塊分文件妓湘，可以有一個common文件夾放公共文件。
css - 你的模板css文件乌询，按模塊分文件榜贴，可以有一個common文件夾放公共文件。
img - 你的模板涉及的圖片妹田，按模塊分子文件夾唬党，可以有一個common文件夾放公共文件。
plugins - 存放第三方插件鬼佣、組件的文件夾驶拱，內(nèi)部按插件名、組件名給文件夾命名晶衷。
強調(diào)一下關(guān)于css的定制蓝纲，從上文可以看到，定制分為兩個部分房铭，一部分是修改bs自身的css變量值驻龟，另一部分是寫模板專用的css。從實踐來看缸匪，這兩種修改不要同時進行翁狐，可以先只寫模板專用的css，等做出一兩個頁面凌蔬，形成了自己模板統(tǒng)一的合理的風(fēng)格之后露懒，再總結(jié)出對bs的css變量的修改，然后再去改bs的css變量砂心。
css類的命名懈词，盡量按照BEM規(guī)范命名。
bs的js組件方面辩诞，盡量不要修改bs自身的js組件坎弯，只需要補充bs沒有的js組件，比如更華麗的焦點圖效果、更漂亮的手風(fēng)琴效果抠忘，等等撩炊。如果你認為一些bs的官方j(luò)s組件確實很不好用或是很丑，那么也沒必要加工它崎脉，而是可以直接另寫一個拧咳，官方的該組件就直接減掉即可。
我們自己寫模板可以從制作首頁開始囚灼，首頁從制作頂部導(dǎo)航開始骆膝，做出一個讓人無法看出這是用Bootstrap制作的導(dǎo)航，接下來可以是制作BANNER模塊灶体，以及BANNER下方的導(dǎo)航模塊阅签，然后是正文第一屏、第二屏蝎抽，直到頁腳模塊愉择。
比如首頁我們命名為index.html，頂部導(dǎo)航用header元素织中，然后內(nèi)部逐級構(gòu)建代碼。接著是nav元素衷戈，然后是#wrap元素狭吼，然后是footer元素，最后是#fixed元素（用于漂浮殖妇、彈出層等）刁笙，不再細說。
祝大家都能成功谦趣。
