Bootstrap定制(一)less入門及編譯


第一篇博,希望支持。

 

近期在開發一個項目,項目前端定位於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基本語法,敬請期待。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM