写在前面:其实写代码的时候经常会词穷,经常会费劲的去想如何命名,自己便整理了一些方便自己记忆,也分享给大家
结构样式命名
- 页面最外围控制整体布局宽度: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(典型管理系统布局)