Bootstrap + SublimeText 網頁開發

網站介面如人的門面,除了功能完整安全反應快的好內在

還要有友善的使用介面與體驗 才能牢牢抓住他/她的心 ♥

但是,美工白痴怎麼辦?沒空設計怎麼辦?不會RWD怎麼辦?

這次要和大家分享知名網頁前端框架:Bootstrap

再搭配使用Sublime純文字編輯神器做開發

一起來快速聰明有彈性的變美麗吧哇哈

演講資料

##下載Sublime Text3

http://www.sublimetext.com/3

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

jQuery

Bootstrap What’s included

  • CSS
  • Component元件
  • Javascript

實作

DEMO

參考連結

http://getbootstrap.com/

http://www.hksilicon.com/kb/articles/75645/HTML-5datajquerydata

http://www.kangting.tw/2012/07/html5_09.html