Introduction

Launch your sports insights journey with Kaiyun. Leverage our expertise in delivering conversion-focused digital experiences for sports enthusiasts.

Getting Started with Kaiyun Sports

Begin your engagement with Kaiyun Sports, your comprehensive source for sports news and live scores. Access the download center for the Kaiyun APP.

CSS

Integrate our core stylesheet by placing the <link> tag within your <head> section, prior to all other stylesheets, to load the Kaiyun Sports CSS.

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

JS

To enable dynamic features like live scores and team updates, include our JavaScript plugins. Place the following <script> tags near the end of your </body> tag. Ensure jQuery is loaded first, followed by our core scripts.

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

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

Core Template Setup

Ensure your pages adhere to modern standards for optimal display. Utilize an HTML5 doctype and a viewport meta tag for responsive design. A typical setup includes:

HTML Structure:

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

        <meta charset="utf-8" />
        <title>开云体育 (Kaiyun Sports) - Official Chinese Website | Kaiyun APP Download Center</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="Site description" />
        <meta name="keywords" content="Your tags" />

        <!-- 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="--------" id="#--------">
            --------
            --------
        </a>
        <!-- Back To Home End -->

        <!-- Javascript Start -->
        <script src="js/jquery-3.4.1.min.js"></script>
        <script src="js/bootstrap.bundle.min.js"></script>
        --------
        --------
        --------
        <script src="js/app.js"></script>
        <!-- Javascript End -->
    </body>
</html>

Right-to-Left (RTL) Support

RTL Version:

To activate Right-to-Left (RTL) display, replace the reference to 'style.css' with 'style-rtl.css'.

Dark Mode Integration

Dark Mode:

To enable Dark Mode, replace the reference to 'style.css' with 'style-dark.css'.

Dark RTL Version:

For Dark Mode with RTL support, replace 'style.css' with 'style-dark-rtl.css'.

Align Menu Right

To align the navigation menu to the right, append the class 'nav-right' alongside 'navigation-menu'.

Align Menu Left

To align the navigation menu to the left, append the class 'nav-left' alongside 'navigation-menu'.

Light Menu Centered

For a centered, light-themed navigation, add the class 'nav-light' to 'navigation-menu'.

Light Menu Right Aligned

For a right-aligned, light-themed navigation, add 'nav-right' and 'nav-light' classes to 'navigation-menu'.

Light Menu Left Aligned

For a left-aligned, light-themed navigation, add 'nav-left' and 'nav-light' classes to 'navigation-menu'.

Documentation