九游: Clear Communication, Professional Presentation | Bold 36px |
Visual Elements Guide | Bold 30px |
Secondary Heading | Bold 24px |
Auxiliary Heading | Bold 18px |
Sub-division Description | Bold 14px |
Supplementary Information | Bold 12px |
Info with progress-bar-info class.
Success with progress-bar-success class.
Warning with progress-bar-warning class.
Danger with progress-bar-danger class.
Inverse with progress-bar-inverse class.
Inverse with progress-bar-inverse class.
Flexibly adjust badge visual effects by applying modifier classes.
| Categories | Badge |
|---|---|
| Regular | 42 |
.badge-primary | 1 |
.badge-success | 22 |
.badge-info | 30 |
.badge-warning | 412 |
.badge-danger | 999 |
Use the .badge class to quickly mark new or unread content.
Basic table design, providing concise padding and horizontal separators.
| # | Game Title | Game Genre | Latest News |
|---|---|---|---|
| 1 | Highlight | Example | Jiuyou Player |
| 2 | Core Gamer | Info Seeker | News Flash |
| 3 | Gamer | Featured | Jiuyou |
Add any of the following modifier classes to the .table base class to enhance styling.
Add zebra stripes to table rows within <tbody> to improve readability.
| # | Game Title | Game Genre | Latest News |
|---|---|---|---|
| 1 | Highlight | Example | Jiuyou Player |
| 2 | Competitive Player | Info Seeker | News Flash |
| 3 | Gamer | Featured | Jiuyou |
Add borders and rounded corners to the table for enhanced visual completeness.
| # | Game Title | Game Genre | Latest News |
|---|---|---|---|
| 1 | Highlight | Example | Jiuyou Player |
| Highlight | Example | 九游 Game Center | |
| 2 | Casual Player | Info Seeker | News Flash |
| 3 | Top-Tier Picks | Jiuyou | |
Enable hover states on table rows within <tbody> to enhance interaction feedback.
| # | Game Title | Game Genre | Latest News |
|---|---|---|---|
| 1 | Highlight | Example | Jiuyou Player |
| 2 | Aspiring Pro | Info Seeker | News Flash |
| 3 | Curated Selections | Jiuyou | |
© 2012 九游 Game Information Co., Ltd. All rights reserved.