為了提高開發(fā)效率，減少不必要的勞動(dòng)，前段時(shí)間我學(xué)習(xí)了下 bootstrap，這個(gè) UI 框架我早已有所耳聞，github star 數(shù)能排到第二，所以起初我相信它不會(huì)讓我失望。便刷了套視頻教程，又照著文檔把每個(gè)樣例認(rèn)真捋了捋，下面說說我對其的學(xué)習(xí)、使用感受。

學(xué)習(xí)過程很繁瑣，它令我討厭的第一點(diǎn)就是太多的類和嵌套，類多我勉強(qiáng)可以理解，因?yàn)橐攵ㄖ?css 樣式只有不斷定義類這一種途徑，但各種無用的標(biāo)簽嵌套我就看不出到底有何意義了，它完全可以不用加這么多無用的標(biāo)簽，我覺的一個(gè) html 文檔的標(biāo)簽結(jié)構(gòu)應(yīng)盡量與頁面實(shí)際渲染出來的各元素嵌套關(guān)系保持一致，這是寫好一個(gè)頁面的基本素養(yǎng)，而 bootstrap 繁瑣的標(biāo)簽結(jié)構(gòu)完全破壞了這一原則。

其次是它的 css?組件和 js 組件，這里我要說，首先它們很多，然后它們的標(biāo)簽結(jié)構(gòu)炒雞復(fù)雜，第一眼看到基本是暈的，當(dāng)時(shí)理清每個(gè)標(biāo)簽的意義著實(shí)浪費(fèi)了我很長時(shí)間，然而等我學(xué)完后仔細(xì)一想，發(fā)現(xiàn)真正有用的其實(shí)也沒幾個(gè) ……

第二點(diǎn)是柵格系統(tǒng)，起初在學(xué)習(xí)階段我覺得它還是很不錯(cuò)的，每行分為十二列，而只要你愿意，每列又可以再細(xì)分為十二列，這很靈活，搭配上 bootstrap 預(yù)定義的媒體查詢類，可以非常靈活快速的創(chuàng)建響應(yīng)式頁面，但直到今天（沒錯(cuò)，就是今天才實(shí)際應(yīng)用）我用它真正切圖時(shí)，才發(fā)現(xiàn)它操蛋的地方。

在我開始切圖的第一步——做導(dǎo)航欄時(shí)遇到了第一個(gè)問題，bootstrap 默認(rèn)給每列加了 15px 的左右內(nèi)邊距，而且這個(gè)內(nèi)邊距還覆蓋不了（關(guān)于這點(diǎn)比較迷，因?yàn)槲业臉邮奖硎窃谧詈笠氲模?，除非我?!important，但?!important 眾所周知一般不要加，一是書寫麻煩，二是會(huì)導(dǎo)致后續(xù)樣式無法覆蓋。網(wǎng)上查的解決方法要么是改源碼要么是用 -15px 的 margin 抵消掉，后者會(huì)帶來新的問題，柵格布局的列偏移就是用 margin 實(shí)現(xiàn)的，設(shè)置 -15px 的 margin 會(huì)與列偏移沖突，二者只能選其一，所以只能改源碼，我只好利用 ctrl+f and ctrl+h 大法將源碼的左右內(nèi)邊距替換為?0px。可是接著我又發(fā)現(xiàn)柵格布局的容器 container 默認(rèn)有個(gè)最大寬度 970px，但我并不想要這個(gè)寬度，我想要的是自適應(yīng) 100%，該寬度同樣是覆蓋不了的，由于 pc、移動(dòng)端導(dǎo)航欄都是寬度?100%，所以我就用 !important 解決了這個(gè)問題。

第二步我開始做側(cè)欄，然后我便又發(fā)現(xiàn) container 的第二個(gè)坑——默認(rèn)居中，而且又是無法覆蓋，這時(shí)我心態(tài)已經(jīng)崩了，用它一共也沒寫幾行代碼，坑倒是一步一遇，直接扔掉?bootstrap 只用 sass?寫了。

做個(gè)總結(jié)，上面我描述了第一次正式使用?bootstrap 切圖時(shí)遇到的坑以及表達(dá)了準(zhǔn)備棄坑的想法，但它真的一無是處嗎？其實(shí)后來想想，還是有那么幾點(diǎn)可以用的，不至于完全扔掉，這里我列出目前覺得它還能用的幾點(diǎn)。

第一，前面也說過，預(yù)定義媒體查詢類，即?.visible-*-*、.hidden-* 這兩系列類，可以方便的控制元素在不同屏幕下的顯示，用于創(chuàng)建響應(yīng)式頁面，這個(gè)始終是不錯(cuò)的。

第二，字體圖標(biāo)，即 Glyphicons 系列圖標(biāo)，提供了常用的字體圖標(biāo)，用起來蠻方便。

第三，部分組件，比如按鈕、表格、警告框、徽章、進(jìn)度條，js 組件里的模態(tài)框和彈出框、滾動(dòng)監(jiān)聽、標(biāo)簽頁、工具提示，這些還是不錯(cuò)的，用起來不算太麻煩。

目前我能想到的就這三點(diǎn)還比較好，可以用一用，其它的就不知道了，歡迎有想法的朋友在評論區(qū)補(bǔ)充。

最后聲明一下，雖然它有用，但我還是說它坑的原因是它包含了太多無用的東西，它害學(xué)習(xí)者（比如我）在學(xué)習(xí)時(shí)花了很多時(shí)間去學(xué)沒用的東西，然而真正能用到的卻只有一小部分，這事想想我就覺得難受。

哦，還有一件事，這篇文章是我在睡前花半個(gè)多小時(shí)，抱著吐糟的心情寫的，有些部分可能言辭不當(dāng)，見諒。