信息呈现标准

标题层级定义

华体会(hth) 视觉设计规范

标题 H1 (36px)

内容区域布局

标题 H2 (30px)

副标题与强调

标题 H3 (24px)

重要提示信息

标题 H4 (18px)
辅助性说明
正文 (14px)
细微之处标注
辅助文字 (12px)

加载与进度指示

資訊與 progress-bar-info 類別。

成功案例 progress-bar-success 類別。

警告訊息 progress-bar-warning 類別。

危險訊息 progress-bar-danger 類別。

反向訊息 progress-bar-inverse 類別。

反向訊息 progress-bar-inverse 類別。

35% 完成 (成功)
20% 完成 (警告)
10% 完成 (危險)

分页导航样式

面包屑导航

状态反馈标识

多样化状态提示

精选字体样式 状态反馈标识
常规字体 42
.badge-primary 1
.badge-success 22
.badge-info 30
.badge-warning 412
.badge-danger 999

标签页设计

华体会网页版提供各类赛程资讯,同步更新,页面布局清晰,减少跳转,直达核心内容。点击安装应用程序,体验高效阅读。

华体会以适配多设备应用程序,随时随地便捷阅读。为核心,带来高效便捷的体验。

无序列表样式

有序列表样式

  1. 赛事资讯
  2. 赛果统计
  3. 数据分析
  4. 分析报告
  5. 用户反馈

表单与输入

@
@example.com
$ .00
@
@
@

預設樣式

基本樣式,輕微填充,僅水平方向,添加基礎類別 .table 到任何 <table>.

# 名字 姓氏 使用者名稱
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

添加以下任一類別到 .table 基礎類別。

為表格中的任何表格列添加斑馬條紋 <tbody> 透過 :nth-child CSS 選擇器(IE7-8 不可用)。

# 名字 姓氏 使用者名稱
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

為表格添加邊框和圓角。

# 名字 姓氏 使用者名稱
1 Mark Otto @mdo
Mark Otto @getbootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter

啟用表格列的懸停狀態 <tbody>.

# 名字 姓氏 使用者名稱
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
皖ICP备202421708587号
华体会科技有限公司专注成就专业电话:+86 152 1676 6468邮箱:info@page-hth-app.com微信:pagehth_477营业时间:7×24成都市高新区天府大道290号