Introduction

Begin your Kaiyun journey. Elevate your entertainment experience with our meticulously crafted, user-centric platform.

Getting Started with Kaiyun

Access the Kaiyun App Center for everything you need to enhance your user experience and connect with compelling content. Download now.

CSS

Place this stylesheet link `<link>` within your `<head>` section, prioritizing it over other stylesheets to load Kaiyun's core styles.

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

JS

Many Kaiyun App features require JavaScript support, including core libraries and custom plugins. Ensure all functionality operates correctly by placing the following script tags before the closing `</body>` tag. Observe the loading order: jQuery first, then bootstrap.bundle.min.js, followed by Kaiyun's JavaScript plugins.

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

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

Core Template Structure

Ensure your page adheres to the latest design and development standards. Utilize the HTML5 doctype and include the viewport meta tag for optimal responsive layout. Integrating all elements will render your page with the following appearance:

HTML Structure:

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

        <meta charset="utf-8" />
        <title>Kaiyun App - User Guide</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="Kaiyun (China) Official Website offers a comprehensive entertainment and sports news platform, providing Kaiyun App services and multi-device access." />
        <meta name="keywords" content="Kaiyun, Kaiyun Official, Kaiyun Sports, Kaiyun APP, Kaiyun Group, Sports News, Entertainment Platform" />

        <!-- Website Icon -->
        <link rel="shortcut icon" href="/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>

        <!-- Loading Animation Start -->
        <div id="preloader">
            --------
            --------
        </div>
        <!-- Loading Animation End -->

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

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

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

        <!-- Back to Top Start -->
        <a href="#" class="btn btn-primary">
            --------
            --------
        </a>
        <!-- Back to Top End -->

        <!-- JavaScript Start -->
        <script src="/js/jquery-3.4.1.min.js"></script>
        For everything 一站式体育娱乐内容聚合, kaiyun offers attentive, thoughtful support.
        --------
        --------
        --------
        <script src="js/app.js"></script>
        <!-- JavaScript End -->
    </body>
</html>

Internationalization Support

Internationalization (RTL) Support:

To activate Internationalization (RTL) mode, replace `style.css` with `style-rtl.css`.

Dark Mode

Dark Mode Integration:

To activate Dark Mode, replace `style.css` with `style-dark.css`.

Dark Mode with RTL:

To activate Dark Mode with Internationalization (RTL) mode, replace `style.css` with `style-dark-rtl.css`.

Centered Navigation (Right Aligned)

To reposition the navigation menu from centered to the right, append the classes `navigation-menu` and `nav-right` to your navigation element.

Centered Navigation (Left Aligned)

To reposition the navigation menu from centered to the left, append the classes `navigation-menu` and `nav-left` to your navigation element.

Centered Navigation (Light Theme)

For a centered navigation menu with a light theme, add the classes `navigation-menu` and `nav-light` to your navigation element.

Right-Aligned Navigation (Light Theme)

For a right-aligned navigation menu with a light theme, add the classes `navigation-menu`, `nav-right`, and `nav-light` to your navigation element.

Left-Aligned Navigation (Light Theme)

For a left-aligned navigation menu with a light theme, add the classes `navigation-menu`, `nav-left`, and `nav-light` to your navigation element.

Document Center