写在前面：其实写代码的时候经常会词穷，经常会费劲的去想如何命名，自己便整理了一些方便自己记忆，也分享给大家
结构样式命名
- 页面最外围控制整体布局宽度：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 - 表示结构
- 上中下：.header，.content/.body，.footer （延伸入：.modal-header,.modal-body,.modal-footer）
- 上，左右，下：.header，.sider，.content，.footer（典型管理系统布局）