HTML 常用类名/标签命名规范

HTML 常用类名/标签命名规范

布局类命名

类名/标签名	用途描述	示例代码
.container	页面主容器	<div class="container"></div>
.wrapper	包裹容器	<div class="wrapper"></div>
header	页头/头部区域	<header></header>
footer	页脚/底部区域	<footer></footer>
main	主体内容区域	<main></main>
.content	主要内容区块	<div class="content"></div>
.sidebar	侧边栏	<aside class="sidebar"></aside>

导航类命名

类名/标签名	用途描述	示例代码
nav	导航容器	<nav class="nav"></nav>
.navbar	导航栏	<div class="navbar"></div>
.menu	菜单容器	<ul class="menu"></ul>
.menu-item	菜单项	<li class="menu-item"></li>
.breadcrumb	面包屑导航	<div class="breadcrumb"></div>

内容区块类命名

类名/标签名	用途描述	示例代码
section	内容区块	<section></section>
.card	卡片式布局	<div class="card"></div>
.panel	面板容器	<div class="panel"></div>
.list	列表容器	<ul class="list"></ul>
.item	列表项/条目	<li class="item"></li>
.grid	网格布局容器	<div class="grid"></div>

表单类命名

类名/标签名	用途描述	示例代码
form	表单容器	<form class="form"></form>
.form-group	表单分组	<div class="form-group"></div>
.input-group	输入框组合	<div class="input-group"></div>
.form-control	表单控件	<input class="form-control">
.label	标签文字	<label class="label"></label>
.checkbox	复选框样式	<div class="checkbox"></div>

按钮类命名

类名	用途描述	示例代码
.btn	基础按钮样式	<button class="btn"></button>
.btn-primary	主要操作按钮	<a class="btn-primary"></a>
.btn-secondary	次要操作按钮	<button class="btn-secondary">
.btn-link	链接样式按钮	<button class="btn-link"></button>

图标/图片类命名

类名	用途描述	示例代码
.icon	图标基础样式	<i class="icon"></i>
.icon-{name}	具体图标类型	<i class="icon-home"></i>
.img-fluid	响应式图片	<img class="img-fluid">
.avatar	用户头像	<img class="avatar">

状态类命名

类名	用途描述	示例代码
.active	激活状态	<li class="active"></li>
.disabled	禁用状态	<button class="disabled"></button>
.show	显示元素	<div class="modal show"></div>
.hide	隐藏元素	<div class="hide"></div>
.error	错误状态	<div class="error"></div>

响应式类命名

类名	用途描述	示例代码
.visible-xs	手机端显示	<div class="visible-xs"></div>
.hidden-md	平板端隐藏	<div class="hidden-md"></div>
.col-sm-6	小屏栅格布局	<div class="col-sm-6"></div>

工具类命名

类名	用途描述	示例代码
.clearfix	清除浮动	<div class="clearfix"></div>
.text-center	文字居中	<p class="text-center"></p>
.pull-left	左浮动元素	<div class="pull-left"></div>
.d-flex	Flex布局容器	<div class="d-flex"></div>