海星體育直播·程式碼元件手冊 | 粗體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>添加.table類,即可獲得適中內邊距與水平分隔線,清晰呈現賽事數據。
| # | 姓名 | 姓氏 | 用戶名稱 |
|---|---|---|---|
| 1 | 重點標記 | 歐陽 | @海星體育 |
| 2 | 劉洋 | 孫鵬 | @海星君 |
| 3 | 林峰 | 小鳥 | @海星直播 |
為.table基類添加以下任意修飾類,快速調整表格風格。
透過:nth-child CSS選擇器為<tbody>內的表格行加上斑馬紋效果,提升賽程表的閱讀體驗(IE7-8不支援)。
| # | 姓名 | 姓氏 | 用戶名稱 |
|---|---|---|---|
| 1 | 高亮顯示 | 張偉 | @直播小助手 |
| 2 | 趙敏 | 鄭爽 | @球球 |
| 3 | 許晴 | 飛鷹 | @賽事頻道 |
為表格添加邊框與圓角,讓數據展示更專業。
| # | 姓名 | 姓氏 | 用戶名稱 |
|---|---|---|---|
| 1 | 焦點強調 | 王磊 | @賽事解說員 |
| 醒目突出 | 李娜 | @海星體育TV | |
| 2 | 周杰 | 黃濤 | @體育迷 |
| 3 | 林峰小鳥 | @互動專區 | |
為<tbody>內的表格行啟用懸停高亮狀態,便於追蹤即時比分。
| # | 姓名 | 姓氏 | 用戶名稱 |
|---|---|---|---|
| 1 | 顯眼標示 | 陳晨 | @互動主播 |
| 2 | 吳昊 | 馬超 | @看球達人 |
| 3 | 許晴飛鷹 | @直播通知 | |