寫在前面：其實寫程式碼的時候經常會詞窮，經常會費勁的去想如何命名，自己便整理了一些方便自己記憶，也分享給大家

結構樣式命名

• 頁面最外圍控制整體佈局寬度：wrap
• 頁面主體：main
• 頭部：header
• 標誌：logo
• 內容：content
• 側欄 / 邊欄：side
• 欄目：column
• 組：group，item，cell
• 尾部：footer
• 友情連結：friendlink
• 版權：copyright
• 容器：box,section
• 面板：panel （情景效果：panel-primary，panel-success，panel-info，panel-warning，panel-danger）

欄目常用樣式命名

• 主頁：home
• 關於我們/公司簡介：about
• 新聞中心：news
• 產品中心：products
• 聯絡我們：contact
• 視訊：video
• 音訊：audio
• 下載：download
• 服務：service
• 論壇：forum
• 投票：vote
• 幫助：help
• 合作伙伴：partner
• 指南：guild

文章樣式命名

• 幻燈片，圖片切換：slide
• 公告：notice
• 滾動：scroll
• 走馬燈：carousel
• 搜尋：search
• 加入：joinus
• 地圖：map
• 進度條：progress/progressbar
• 訊息：msg，message
• 專題：feature
• 分享：share
• 收藏：collect
• 您的當前位置：crumb
• 麵包屑導航：breadcrumb
• 標題：title
• 副標題：subtitle
• 標題/說明：caption
• 作者：meta
• 文章：article
• 描述：description
• 摘要：summary
• 時間：time
• 文字：text
• 標籤：tab
• 評分：rate
• 評論：comment
• 詳情：detail
• 預覽：preview
• 訂閱：subscribe

選單/廣告樣式命名

• 選單：menu
• 子選單：subnav
• 下拉選單：dropdown-menu
• 導航：nav
• 子導航：subnav
• 滑鼠離開：off
• 滑鼠移過：on
• 滑鼠懸停：hover
• 條幅：banner
• 廣告：ad [例：ad960_80]
• 條：bar

登陸樣式命名

• 登入條：loginbar
• 登入：login
• 註冊：register
• 退出：logout
• 帳戶：account
• 使用者：user
• 密碼：password
• 地址：address
• 電話: phone
• 年齡：age
• 性別：gender（Σ( ° △ °|||)︴ 汗！我之前都是用sex 特地查了詞典還是用gender合適些）

表單樣式命名

• 表單：form
• 可多選：multiple
• 已選：selected
• 選中項：selection
• 當前狀態，選中狀態：current
• 開關：switch
• 滑塊：slider
• 級聯選擇：cascade
• 日期/時間選擇器：datepicker，TimePicker
• 顏色選擇器：colorPicker
• 佔位符： placeholder
• 上傳/下載：upload /download
• 提交：submit
• 儲存：save
• 取消：cancel
• 按鈕：btn
• 關閉：close
• 輸出：output
• 成功：success
• 出錯：error

頁碼樣式命名

• 頁碼：page
• 下一頁：next
• 上一頁：previous/prev
• 分頁：page
• 第一個：first
• 最後一個：last

列表樣式命名

• 列表：list
• 標題：title
• 資訊：info
• 時間：time
• 排序：sort
• 排名：rank
• 編輯：edit
• 刪除：delete/del
• 更多：more

圖示背景

• 圖示：icon
• 點：dot
• 頭像：avatar
• 背景：bg
• 縮圖：thumbnail
• 圖表：chart
• 環：circle
• 表格：table

彈框

• 警告框：alert （狀態：alert-success，alert-info，alert-warning，alert-danger）
• 彈出視窗：popup
• 對話方塊：modal
• 工具提示：tooltip
• 氣泡提示：poptip
• 通知提醒：notice
• 提示：message

顯示隱藏

• 顯示：show
• 隱藏：hide
• 可見：invisible

其他

• 開始，結束：start，end
• 狀態：status
• 型別：type
• 熱點：hot
• 小技巧：tips
• 提示資訊：msg
• 註釋：note
• 標記：badge
• 響應：responsive
• 時間軸：timeline
• 步驟：steps
• 定位：location
• 載入中：loading

推薦使用的class名：

• 表示狀態
  .on, .active, .selected, .current,.checked (checkbox/radio)
• 表示位置
  .first, .last, .prev, .next
• 表示結構
  
  1. 上中下：.header，.content/.body，.footer （延伸入：.modal-header,.modal-body,.modal-footer）
  2. 上，左右，下：.header，.sider，.content，.footer（典型管理系統佈局）