Bootstrap教學-自訂選項,只下載所需Grid system(網格)系統

梅問題-Bootstrap教學-自訂並下載Grid system(網格)系統
  現在所有的專案都脫離不了Bootstrap,除了內建已整合了許多特效外,再來就是它的Grid system網格系統,真的很方便且好用,所有的版面的邏輯控制Bootstrap都已設定好,因此只要在HTML中,加入適當的標籤與類別名稱,網頁立即就支援RWD自適應,同時它的結構也相當容易理解方便,再加上名稱也很易懂,因此上手後幾乎離不開它的Grid,所以今天若只需要它的Grid時,不需其它特效的話,這時只需透過線上的自訂功能,就能只下載它的Grid系統,同時還可自訂區塊間距,因此有在使用Bootstrap的朋友們,若只要它的Grid網格系統的話,現在就一塊來看看,如何只下載它的Grid網格系統與自訂區塊間距吧!

Step1
進入Bootstrap官網後,點上方的Customize
梅問題-Bootstrap教學-自訂並下載Grid system(網格)系統
Step2
接著向下拉,將下方所有的勾都取消,只保留一個Grid System選項。
梅問題-Bootstrap教學-自訂並下載Grid system(網格)系統
Step3
再向下拉,若不需要它內建的特效時,再將下方的所有選項勾取消掉。
梅問題-Bootstrap教學-自訂並下載Grid system(網格)系統
Step4
接著在下方的Grid System中,可設定區塊的間距,預設是左右各15px,因此若不要用這麼大的話,也可自行修改。
梅問題-Bootstrap教學-自訂並下載Grid system(網格)系統
Step5
都設定好後,拉到最下方,就會看到Download鈕,點一下就會進行編譯與下載了。
梅問題-Bootstrap教學-自訂並下載Grid system(網格)系統
Step6
下載回來解壓縮後,可看到純Grid System的網格系統只有13KB,相當的小巧。
梅問題-Bootstrap教學-自訂並下載Grid system(網格)系統
Step7
這時將它載入,寫法當然與之前完全一樣。
梅問題-Bootstrap教學-自訂並下載Grid system(網格)系統
Step8
哈!這樣就能只單純的使用Bootstrap的網格系統啦!
梅問題-Bootstrap教學-自訂並下載Grid system(網格)系統

相關文章

「W3layouts」上千個免費可商用RWD自適應版型下載

「W3layouts」上千個免費可商用RWD自適應版型下載

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用

「Mobirise」不懂網頁語法,拖拉就可完成精美、酷炫的RWD網頁工具

「Mobirise」不懂網頁語法,拖拉就可完成精美、酷炫的RWD網頁工具





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 1 梅留言

  • 第1梅
    popcorn 說道:

    請問間距一設定就整個網站都一樣的間距了嗎?

    回應:
    是的