網站介面如人的門面,除了功能完整安全反應快的好內在
還要有友善的使用介面與體驗 才能牢牢抓住他/她的心 ♥
但是,美工白痴怎麼辦?沒空設計怎麼辦?不會RWD怎麼辦?
這次要和大家分享知名網頁前端框架:Bootstrap
再搭配使用Sublime純文字編輯神器做開發
一起來快速聰明有彈性的變美麗吧哇哈
演講資料
##下載Sublime Text3
Sublime 小技巧
- View -> Show Slide Bar
- 搜尋 : command + p
- 搜尋使用@開頭 : 跳到function
- 搜尋使用:開頭 : 跳到指定行數
- Preferences -> Setting Default 使用JSON設定
Sublime 套件
先安裝Package Control
https://packagecontrol.io/installation
複製command
ctrl + ‘ 打開console, 貼上command
安裝套件
command + shift + p
選擇 Package Control: Install Package
Emmet
快速生成HTML結構
輸入語法 -> 按下Tab鍵
LiveStyle
即時預覽修改中的網頁
Sublime 安裝之外,Chrome也要安裝套件 Emmet LiveStyle
Bootstrap 3 Snippets
關鍵字自動完成
Bootstrap 下載
Bootstrap What’s included
- CSS
- Component元件
- Javascript
實作
參考連結
http://www.hksilicon.com/kb/articles/75645/HTML-5datajquerydata