Bootstrap 美麗網頁開發術 中山大學 workshop

2015.05.13 Bootstrap 美麗網頁開發術 中山大學

講者投影片

分享開發使用IDE過程

DW -> notepad++ -> Sublime

Sublime 基礎功能

  • 開啟整個資料夾
  • Command + P 搜尋所有
  • Command + P + @ 搜尋 function Title
  • Command + P + : 搜尋 行數
  • 安裝 Package Control 套件管理程式
  • 叫出 Sublime Console : “ control + ~ “
  • Sublime Text -> Preferences ->
  • Command + Shift + P 套件搜尋

推薦套件

Emme:

  • HTML 結構強力套件
  • dom = HTML 自動生成架構
  • ul+li*5 = 自動生成列表5行

LiveStyle:

  • CSS內容修改可以即時預覽
  • 在Console可即時預覽+修改時同步CSS內容
  • Chrome 需安裝套件

Bootstrap 簡介

  • 支援 RWD
  • Download : Bootstrap + jQuery
  • Glyphicons 字體圖示
  • Dropdown 下拉選單
  • Navbar 導覽列
  • Jumbotron
  • Grid system 網格系統