Bootstrap Less 使用方法

在使用Bootstrap為樣式框架的專案上,如果要改樣式:

1.自己新建一個css (什麼custom.css..之類的),按照css引入順序去覆蓋原本bootstrap.css。

2.自訂less,公司這次的專案當中研究的方法,紀錄一下:

1.下載bootstrap source code 版本

幾個檔案的小說明:

bootstrap.less : 用來引用其他檔案,最後就是要編譯這個。

variables.less 和 mixins.less : 其他檔案都依賴這兩個。

utilities.less : 最後引用,可以把想要覆蓋的項目寫到這個檔案。

2.安裝好less

打開terminal (我自己習慣用git bash),而且我先前裝了node.js,所以也有npm

輸入指令 : npm install -g less 安裝less

3. 建立幾個自訂檔案

custom-variables.less : 這就是要設定自訂樣式的檔案

custom-other.less: 包含無法通過修改變量的樣式

custom-bootstrap.less : 新生成的核心檔案,要把這個編譯成css,以下是要寫在這檔案內的內容。(注意順序)

@import "../bootstrap/less/bootstrap.less";

@import "custom-variables.less";

@import "custom-other.less";

@import "../bootstrap/less/utilities.less";

4. 編譯custom-bootstrap.less

指令 : lessc custom-bootstrap.less > custom-bootstrap.css

生成custom-bootstrap.css,就可以拿來用在網頁當中,取代原來的bootstrap.css。


之前想錯的地方: 以為專案一開始就得使用source code版的bootstrap框架,半路才要使用應該要用什麼的方法,思來想去,就是想多了, 另外還跑去看了grunt ,很多教學文都會提到的,熟練 grunt 框架應該也能方便很多吧,不過在此時先使用上面的方法。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容