網頁設計, 網頁資源

Bootstrap Studio 全視覺化Bootatrap編輯器,並支援手動修改HTML、CSS、JS檔

梅干2018/05/15
梅問題-Bootstrap Studio 全視覺化Bootatrap編輯器,並支援手動修改HTML、CSS、JS檔
  Bootstrap一直以來是目前相當主流的RWD框架,而它的好用只要用過就回不去了,尤其是它的網格系統,就足足可少寫上千行的CSS設定,再加上內建就有許多常見的網頁特效可套用,像是導覽列、廣告輪播、手風琴選單、滾動固定....等,且在套用時,完全無需撰寫任何的Javascript,就可將這些特效應用於網頁中,讓設計師更可將心思放在網頁的視覺設計。
  為了讓開發更快速,因此梅干先前也分享了幾款的Bootstrap的視覺化設計工具,讓許多網頁設計師,透過拖拉的方式,就可快速的打造出RWD的網頁,而每一套各有優缺點,而梅干最近發現一套,既可拖拉,又可手動的修改HTML、CSS、JS,甚至在匯出後,原始碼也相當的乾淨與單純,都可再透過其它的編輯器,再進行修改,因此現在就一塊來看看Bootstrap Studio吧!
Bootstrap Studo
軟體名稱:Bootstrap Studo
支援平台:Win、MAC、Liunx
軟體性質:付費(無試用版)
下載網址:https://bootstrapstudio.io/

Step1
當安裝完畢,啟用後點下方的按鈕,建立專案。
梅問題-Bootstrap Studio 全視覺化Bootatrap編輯器,並支援手動修改HTML、CSS、JS檔
Step2
接著再選擇Bootstrap的版本,以及樣版。
梅問題-Bootstrap Studio 全視覺化Bootatrap編輯器,並支援手動修改HTML、CSS、JS檔
Step3
選擇好後,就會進入Bootstrap Studo編輯畫面,而它的界面相當的簡易單純,就四大區塊。
梅問題-Bootstrap Studio 全視覺化Bootatrap編輯器,並支援手動修改HTML、CSS、JS檔
Step4
左上角是所有Bootstrapd元件清單,當滑鼠滑到元件上方,就可即時預覽縮圖。
梅問題-Bootstrap Studio 全視覺化Bootatrap編輯器,並支援手動修改HTML、CSS、JS檔
Step5
再拖曳到中間的工作視窗中,再點剛所拖曳的元件,上方就會出現編輯圖示,進行微調。
梅問題-Bootstrap Studio 全視覺化Bootatrap編輯器,並支援手動修改HTML、CSS、JS檔
Step6
當要改變排序時,只需拖曳十字符號,就可改變區塊順序。
梅問題-Bootstrap Studio 全視覺化Bootatrap編輯器,並支援手動修改HTML、CSS、JS檔
Step7
而Bootstrap Sudio最棒的一點,就是可將元件轉成自訂HTML。
梅問題-Bootstrap Studio 全視覺化Bootatrap編輯器,並支援手動修改HTML、CSS、JS檔
Step8
接著就可改變它的HTML原始碼,這一點相當的方便,但在轉完後,左的樹狀結構,就會變成CUSTOM HTML。
梅問題-Bootstrap Studio 全視覺化Bootatrap編輯器,並支援手動修改HTML、CSS、JS檔
Step9
同時也可自訂javascript。
梅問題-Bootstrap Studio 全視覺化Bootatrap編輯器,並支援手動修改HTML、CSS、JS檔
Step10
還有CSS樣式,甚至也有提示詞功能。
梅問題-Bootstrap Studio 全視覺化Bootatrap編輯器,並支援手動修改HTML、CSS、JS檔
Step11
而它的預覽功能也很強大,除了本機看,手機也可連來進行檢測。
梅問題-Bootstrap Studio 全視覺化Bootatrap編輯器,並支援手動修改HTML、CSS、JS檔
Step12
這樣就可預覽剛所編輯後的畫面。
梅問題-Bootstrap Studio 全視覺化Bootatrap編輯器,並支援手動修改HTML、CSS、JS檔
Step13
當按Export,就可把專案匯出,甚至還可進行壓縮。
梅問題-Bootstrap Studio 全視覺化Bootatrap編輯器,並支援手動修改HTML、CSS、JS檔
Step14
輸出後,可看到所有的元件,都會存放在assets資料夾中,且裡面的碼都已壓縮了,因此就可將它直接上傳到實體的空間中啦!
梅問題-Bootstrap Studio 全視覺化Bootatrap編輯器,並支援手動修改HTML、CSS、JS檔
#官方示範影片: