Introduction

Welcome to HTH官网, your professional platform for sports information and event details.

Quick Start Guide

Quickly get everything you need to generate buzz, drive traffic, and build connections. Visit the download page to get started.

CSS

Copy and paste this stylesheet link <link> into your <head> section, before all other stylesheets, to load the Bootstrap CSS.

<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />

JS

Many of our components require JavaScript to function, including jQuery and HTH plugins. Place the following <script> tags at the end of your page, just before the closing </body> tag. jQuery must be loaded first, followed by bootstrap.bundle.min.js.

<script src="js/jquery.min.js"></script>

<script src="js/bootstrap.bundle.min.js"></script>

Basic Template Structure

Ensure your page adheres to the latest design and development standards. Use the HTML5 doctype and include the viewport meta tag for proper responsive behavior.

HTML5 Structure:

<!doctype html>
<html lang="en">
    <head>

        <meta charset="utf-8" />
        <title>HTH官网 - Documentation Center</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="HTH 官网 integrates official news, platform updates, and popular sports event content, covering football, basketball, etc., providing a stable and smooth browsing experience." />
        <meta name="keywords" content="华体会官网, 华体会, HTH官网, HTH中国官网, 华体会中国官网, 华体会官方网站" />

        <!-- favicon icon -->
        <link rel="shortcut icon" href="images/favicon.ico">

        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />

        <!-- Main css -->
        <link href="css/style.css" rel="stylesheet" type="text/css" />
    
    </head>

    <body>

        <!-- Loader Start -->
        <div id="#--------">
            --------
            --------
        </div>
        <!-- Loader End -->

        <!-- Navbar Start -->
        <header>
            <div class="--------">
                --------
                --------
                --------
                --------
            </div>
        </header>
        <!-- Navbar End -->

        <!-- Hero Start -->
        <section class="--------">
            <div class="--------">
                --------
                --------
                --------
                --------
            </div>
        </section>
        <!-- Hero End -->

        <!-- Footer Start -->
        <footer>
            <div class="--------">
                --------
                --------
                --------
                --------
            </div>
        </footer>
        <!-- Footer End -->

        <!-- Back To Home Start -->
        <a href="#" class="btn btn-primary" id="download-button">
            --------
            --------
        </a>
        <!-- Back To Home End -->

        <!-- Javascript Start -->
        <script src="js/jquery-3.4.1.min.js"></script>
        Built around HTH中国官网, HTH官网 keeps refining a better service.
        --------
        --------
        --------
        <script src="js/app.js"></script>
        <!-- Javascript End -->
    </body>
</html>

Multilingual Integration

Multilingual Support:

To enable RTL (Right-to-Left) mode, replace the reference to style.css with style-rtl.css.

Dark Mode Toggle

Dark Mode:

To enable dark mode, replace the reference to style.css with style-dark.css.

Dark Multilingual Mode:

To enable dark RTL mode, replace the reference to style.css with style-dark-rtl.css.

Navigation Centered Right

To move the menu from the center to the right, simply add navigation-menu and nav-right to your navigation class.

Navigation Centered Left

To move the menu from the center to the left, simply add navigation-menu and nav-left to your navigation class.

Navigation Centered Light

To achieve a centered menu with a light navigation, add navigation-menu and nav-light to your navigation class.

Navigation Right Light

To achieve a menu on the right with a light navigation, add navigation-menu nav-right and nav-light to your navigation class.

Navigation Left Light

To achieve a menu on the left with a light navigation, add navigation-menu nav-left and nav-light to your navigation class.

Documentation