bootstrap 3.2 修改 Media queries breakpoints

1. 打開  /bootstrap/less/variables.less

2. Ctrl + F  ， 輸入  screen

3 . 修改

• @screen-xs  :   320px;
• @screen-sm :   768px;
• @screen-md :   1024px;
• @screen-lg    :   1200px;

4. 存檔

5.  開啟 nodejs 命令介面

6  輸入：  grunt dist         (做編譯)

bootstrap source 使用 與 編譯

bootstrap 下載 source檔，較方便修改，在更改 less檔後，可經由grunt編譯產生結果。

1.需要先安裝 nodejs


2. 下載 bootstrap source版本

• bootstrap有提供壓縮好的版本，與原始碼版。
• 壓縮版可以直接使用，修改是直接改動css.
• source版，可以藉由改動less在使用grunt編譯至dist夾產生壓縮結果。
• 直接改css對沒學過less的人比較直覺，但改動地方多容易不同步。
• source可改less，因為有變數等功能關係，改動較少就能達到效果。

3. 安裝 grunt

• 開啟 nodejs 命令介面。  (open  nodejs command line)
• 輸入：  npm install -g grunt-cli   //將會安裝grunt 於全域環境

4. 安裝 bootstrap 所需模組

• 進入boostrap根目錄下。     \bootstrap\
• 輸入：  npm install   ，npm 將會依照  package.json設定來安裝模組套件於區域環境。

5. 編譯 less並將css與javascript壓縮

• 在bootstrap根目錄下輸入：  grunt dist 

Note：

• nodejs 在找尋模組會先從專案夾中的區域模組夾中找尋，找不到才會去全域模組資料夾找模組。