iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 27
0
自我挑戰組

30天的切版日記系列 第 27

Day 27 : Bootstrap Less 使用方法

  • 分享至 

  • xImage
  •  

在使用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

建立幾個自訂檔案
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";

編譯custom-bootstrap.less
指令 : lessc custom-bootstrap.less > custom-bootstrap.css
生成custom-bootstrap.css,就可以拿來用在網頁當中,取代原來的bootstrap.css。

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


上一篇
Day 26 : bootstrap tab hash(瓶#間)
下一篇
Day 28 : css 的 link 和 @import
系列文
30天的切版日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言