星空体育:专业赛事数据与代码规范指南 | 粗体 36px |
样式与组件参考 | 粗体 30px |
h3. 赛事数据分析标题 | 粗体 24px |
h4. 实时比分推送说明 | 粗体 18px |
h5. 足球赛事数据字段 | 粗体 14px |
h6. 篮球赛事统计指标 | 粗体 12px |
信息与 progress-bar-info 类别。
成功与 progress-bar-success 类别。
警告与 progress-bar-warning 类别。
危险与 progress-bar-danger 类别。
反向与 progress-bar-inverse 类别。
反向与 progress-bar-inverse 类别。
通过修饰类改变徽章外观样式
| 样式类名 | 徽章示例 |
|---|---|
| 无修饰符 | 42 |
.badge-primary | 1 |
.badge-success | 22 |
.badge-info | 30 |
.badge-warning | 412 |
.badge-danger | 999 |
为表格添加基础类.table,实现轻内边距与水平布局,适用于赛事数据展示。
| # | 名字 | 姓氏 | 用户名 |
|---|---|---|---|
| 1 | 高亮标记 | 欧阳 | @xingkong |
| 2 | 李明 | 王强 | @lihua |
| 3 | 刘星 | 体育迷 | @xingkongguanfang |
在.table基类上添加以下任意类以改变样式
通过:nth-child选择器为<tbody>内的行添加斑马条纹效果(IE7-8不支持)。
| # | 名字 | 姓氏 | 用户名 |
|---|---|---|---|
| 1 | 重点标注 | 张伟 | @star_sports |
| 2 | 赵敏 | 孙丽 | @sunli88 |
| 3 | 张云 | 赛事达人 | @tiyuzixun |
为表格添加边框和圆角,提升数据可读性
| # | 名字 | 姓氏 | 用户名 |
|---|---|---|---|
| 1 | 突出显示 | 王磊 | @tiyuzhijia |
| 醒目标记 | 刘洋 | @xingkongsports | |
| 2 | 周杰 | 郑涛 | @zhengtao |
| 3 | 刘星体育迷 | @saishifenxi | |
在<tbody>内启用行悬停高亮状态
| # | 名字 | 姓氏 | 用户名 |
|---|---|---|---|
| 1 | 强调样式 | 陈静 | @live_score |
| 2 | 吴芳 | 钱华 | @qianhua |
| 3 | 张云赛事达人 | @zhiboapp | |