常用命名惯例参考
贴士：以下常用名称可灵活组合使用
方位、大小及范围
| 命名 | 意义 | 原型 |
|---|---|---|
top |
上 | -- |
bottom |
下 | -- |
left |
左 | -- |
right |
右 | -- |
front |
前 | -- |
back |
后 | -- |
side |
侧 | -- |
row |
行 | -- |
col |
列 | column |
bar |
条；如search-bar - 搜索条 |
-- |
box |
框、盒子；如login-box - 登录框 |
-- |
block |
块；跟盒子一样 | -- |
size |
尺寸 | -- |
sm |
小 | small |
md |
中 | medium |
lg |
大 | large |
bold |
粗 | -- |
light |
细 | -- |
horizontal |
水平的 | -- |
vertical |
垂直的 | -- |
normal |
正常的；常规的 | -- |
align |
对齐 | -- |
parent |
父级 | -- |
页面主结构
| 命名 | 意义 | 原型 |
|---|---|---|
header |
页头，头 | -- |
nav |
导航栏 | navigation |
main |
主要 | -- |
content |
内容 | -- |
main-content |
主要内容 | -- |
footer |
页脚 | -- |
container |
容器 | -- |
wrapper |
同上 | -- |
页面辅助结构
| 命名 | 意义 | 原型 |
|---|---|---|
logo |
商标，标志 | -- |
headline |
头条，头版头 | -- |
sidebar |
侧栏 | -- |
sidebar-left |
左侧栏（其他方向以此类推） | -- |
list |
列表 | -- |
title |
标题 | -- |
cat |
分类 | category |
icon |
图标 | -- |
menu |
菜单 | -- |
tab |
标签页 | -- |
banner |
条幅，标语 | -- |
slider, carousel
|
轮播 | -- |
btn |
按钮 | button |
msg |
消息 | message |
sub-... |
子... 如：sub-menu - 子菜单 |
-- |
...-item |
单条... 如：nav-item - 单条导航（导航链接） |
-- |
电商站
| 命名 | 意义 | 原型 |
|---|---|---|
ad |
广告 | advertising |
promotion |
促销 | -- |
hot |
热卖 | -- |
new |
新品 | -- |
product |
产品 | -- |
price |
价格 | -- |
summary |
摘要 | -- |
publisher |
厂商 | -- |
buy |
购买 | -- |
pay |
支付 | -- |
常用功能
| 命名 | 意义 | 原型 |
|---|---|---|
login |
登录 | -- |
signup, reg
|
注册 | regsiter, signup |
logout |
登出 | -- |
search |
搜索 | -- |
keyword |
关键词 | -- |
input |
输入 | -- |
output |
输出 | -- |
scroll |
滚动 | -- |
ranking |
排行 | -- |
anno |
公告 | announcement |
