[心得] 編譯Bootstrap與安裝less (Windows)

看板Ruby作者 (Toyota北區業務)時間10年前 (2014/01/19 11:48), 編輯推噓2(202)
留言4則, 3人參與, 最新討論串1/1
寫給新手,這是一篇保證Workable的安裝與設定腳本。 基本觀念:Bootstrap是用Less語法寫的;Less又是基於Node.js來開發。 因此,要能夠編譯Bootstrap,要先安裝Node.js。 以下是完整的安裝步驟,示範如何自定Bootstrap的Namespace,避開 CSS衝突。 範例是在Windows上操作,不過,在Linux上也是相同的程序,也可以Work。 1. Download Nodejs from http://nodejs.org/ 2. Install Nodejs 3. 退出;重新開啟 Command Line Prompt <== 這樣子 Path 才會包括 新安裝的 Node.js 目錄 4. 執行 C:\>npm install less <== Npm是Node Package Manager,執行 這行電腦會自動下載less並完成安裝 5. 下載 Bootstrap Source from http://getbootstrap.com/ 6. 解壓縮到指定目錄,例如:D:\bs 7. C:\>d: D:\>cd bs\bootstrap-3.0.3 D:\bs\bootstrap-3.0.3>Notepad myNamespace.less 8. 在Notepad裡輸入以下,並儲存 .bs { @import "less/bootstrap.less"; } 9. 編譯 D:\bs\bootstrap-3.0.3>lessc myNamespace.less > myBootstrap.css 10. OK搞定 -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 111.67.50.190

01/19 12:32, , 1F
其實 Bootstrap 現在有 SASS 版了
01/19 12:32, 1F

01/19 14:33, , 2F
其實我都下編譯好的css和js來用@@
01/19 14:33, 2F

01/19 16:52, , 3F
幫補充,less 去年開始有繼承語法
01/19 16:52, 3F

01/19 16:53, , 4F
客製bootstrap 變輕鬆了
01/19 16:53, 4F
文章代碼(AID): #1IsqiQwv (Ruby)