雨冰NOTE: LayoutIt! 視覺化Bootstrap 線上編輯器

提到了快速使用Bootstrap的方法 (下載必須檔案，放入相應的位置)

但就一般情況，剛接觸Bootstrap是不知道他內件哪些類別及樣式，

只能照著原廠的文件去查相應的資料套用

因此有人開發了一款名叫 Layoutit! 的Bootstrap現上編輯器，

可以從畫面直接用拖曳的方式，安排各元件在畫面上的位置，

layout好後即可匯出，匯出可以下載到完整Bootstrap所必需的基本元件(即不需要再去Bootstrap官網取得)

下面直接來做一個範例:

假設現在我們的目標要做一個登入畫面

step 1.

按Clear將預設的歡迎資訊清除

step 2.
設定隔線系統 (GRID SYSTEM)
在Bootstrap中，將一個Container(最底層就是網頁畫面)劃分為12等份

在左側的GRID SYSTEM欄位中，可以自訂要幾等分(數字合要為12，以空白隔開)

這個跟自適應的機制有關，如果畫面為(6 6) 就表示將畫面分為2個相同大小的區域，

在螢幕視窗變小的情況下，網頁畫面會變成上下兩部分(水平6 6 "擠"下去變成垂直6 6)

在此範例中，為方便只需一等分(12)就好

step 3.
以拖易方式加入適當的原件
(這裡只拉一個form)

step 4.

匯出

點選上面的Download，若沒登入也可以匯出

選擇 Download .zip (包含所有Bootstrap必須檔案，以後若要製作其他畫面就匯出.html就好)

step 5.
解壓縮後開起src目錄，看到下列檔案
index.html即是剛剛layout的網頁文件，其他三個資料夾則是Bootstrap必備的原件

step 6.
以index.html內容為基礎，修改成我們想要的欄位、名稱，即可得到想要的成果

相比之下，若未套用Bootstrap樣式，相同的欄位看起來像這樣:

簡單套用樣式，就可以得到好看的畫面效果
大大降低網頁視覺開發的麻煩
特別是沒有這方面概念的工程師

文中登入畫面的範例檔:
example file

雨冰NOTE