第一篇博,希望支持。
近期在開發一個項目,項目前端定位於bootstrap,遂花了少許時間研究了bootstrap,將其整理整理,與眾人共享。
bootstrap官方的定制,功能還算完善,但是基於web的,隨便刷新下網頁之前弄得就白費了。同樣類似的也有很多其他定制的網站,形式功能大同小異。
果斷放棄了web端的定制了,下面是bootstrap源碼,bootstrap是基於less預處理語言開發完成的,但是為了便利sass用戶,移植了sass版本。
less和sass的區別,大家可以去了解了解。
本文以less為例,好的,下載less源碼。
解壓源碼包。
目錄結構如下。
docs-bootstrap文檔,里面有bootstrap的一些實例。
fonts-字體文件,圖標文件。
js-bootstrap 各個插件封裝的js。
dist-發行包。
好的,我們今天要講的就是less的定制了。
打開less目錄,目錄結構如下。
列舉幾個重要的less文件。
varibles.less-bootstrap所有的變量。
themes.less-bootstrap主題。
bootstarp.less-引入所有其他less文件,最后編譯這個文件即可形成最終的css。
mixins.less-引入mixins文件夾里面的less文件(mixins文件里文件基於組件分文件,里面寫的是所有組件的less函數,主目錄下組件less引用函數都在mixins下對應的文件里)
其他less文件是對應於bootstrap官網的組件,多看看,定制起來就得心應手了。
好的,到這里,之前沒深入研究過less的是不是該去研究研究less的基本語法和編譯呢?
less官網:http://www.lesscss.net/features/
有過其他編程經驗的開發者學起來應該不難,花點時間都可以熟練掌握。
接下來得編譯這些less文件了,在線編譯的網站很多,但是沒有本地編譯贊。同樣本地編譯的軟件很多,這里以頂頂大名的kola為例。
官方下載地址:http://koala-app.com/index-zh.html
編輯less文件后,使用koala編譯bootstrap文件,kola的使用過程可以百度下。
編譯后的文件,這就是我們最終要的文件了。引入項目開發即可。
下一篇:less基本語法,敬請期待。