Heading Hierarchy

PG Mahjong Simulator: Core Components Showcase

Heading 36px

Common Components and Use Cases

Subheading 30px

Simulator Component Examples

Paragraph Title 24px

Secondary Headings

Body Text 18px
Tertiary Headings
Small Description 14px
Footer Notes
Footer Information 12px

Interactive Buttons

Foundation Elements Interactive Elements Data Visualization Feedback Notifications Navigation Controls Form Elements

Button Styles Tooltips Progress Bars Badges Pagination Breadcrumbs

Basic Buttons Primary Buttons Success Buttons Info Buttons Warning Buttons Danger Buttons

Auxiliary Heading 1 Auxiliary Heading 2 Auxiliary Heading 3 Auxiliary Heading 4 Auxiliary Heading 5 Auxiliary Heading 6

Sub-heading 1 Sub-heading 2 Sub-heading 3 Sub-heading 4 Sub-heading 5 Sub-heading 6
Footnote 1 Footnote 2 Footnote 3 Footnote 4 Footnote 5 Footnote 6

Progress Bar Display

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.

35% Complete (success)
20% Complete (warning)
10% Complete (danger)

Alerts and Feedback

Pagination Navigation

Breadcrumb Navigation

Status Badges

Modify badge styles by adding modifier classes.

Simulator Features Tag Styles
Default 42
.badge-primary 1
.badge-success 22
.badge-info 30
.badge-warning 412
.badge-danger 999

Use the .badge class to easily highlight new items or unread messages.

Cards and Containers

麻将胡了3 Education Technology Co., Ltd. is committed to providing professional and efficient skill simulation training, helping corporate employees master core business capabilities and enhance their personal value.
Our platform system is stable and reliable, with an intuitive and user-friendly interface design, aiming to provide enterprises with one-stop online simulation solutions. From basic operations to complex scenarios, users can engage in immersive learning and repeated practice in a highly realistic environment, significantly improving learning efficiency and skill mastery.
As a leading educational technology company, 麻将胡了3 Education Technology Co., Ltd., since its establishment in 2018, has consistently upheld the mission of 'Empowering Enterprises, Driving Development.' Through our innovative simulation education platform, we offer tailored professional skill enhancement programs for corporate employees, ensuring they remain competitive in a rapidly changing business environment.

Unordered Lists

Ordered Lists

  1. Solutions
  2. Service Support
  3. Resource Download
  4. Contact Us
  5. Partners

Form Controls

@
@example.com
$ .00
@
@
@

Fundamental Styles and Layouts

Add the base .table class to any table for basic styling with slight padding and only horizontal borders.

# Practice Mode Simulation Scenarios User Feedback
1 Highlight User A Contact Information A
2 First Name A Last Name A Account A
3 First Name B Last Name B Account B

Add any of the following modifier classes to the .table base class.

Add zebra-striping to any table row in the <tbody> via the :nth-child CSS selector (not available in IE7-8).

# Practice Mode Simulation Scenarios User Feedback
1 Highlight User A Contact Information A
2 First Name A Last Name A Account A
3 First Name B Last Name B Account B

Add borders and rounded corners to your tables.

# Practice Mode Simulation Scenarios User Feedback
1 User A User A Contact Information A
User A User A Official Account
2 First Name A Last Name A Account A
3 First Name C Account B

Enable hover states for table rows within the <tbody>.

# Practice Mode Simulation Scenarios User Feedback
1 User A User A Contact Information A
2 First Name A Last Name A Account A
3 First Name C Account B
苏ICP备202413453211号
麻将胡了3 Technology Co., Ltd.Phone:+86 189 6962 4090Email:[email protected]662 Tianhe North Road, Tianhe District, Guangzhou City