Kaiyun Sports Documentation

Kaiyun Sports App delivers real-time scores and breaking news for football, basketball, and more. Start your experience by downloading the app and exploring our comprehensive match center.

Quick Start Guide

Access live data, detailed analysis, and instant updates across thousands of global events. Visit the download page to install Kaiyun Sports App on your mobile device.

CSS

Copy and paste the style sheet <link> tag into your <head> section before all other stylesheets to load Bootstrap CSS.

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

JS

Many components require JavaScript for functionality. Place the following <script> tags at the bottom of your page, just before the closing `</body>` tag. jQuery must load first, followed by bootstrap.bundle.min.js, then our custom plugins.

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

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

Base Template

Ensure your page follows modern design standards: use the HTML5 doctype and include the viewport meta tag for proper responsive behavior. Your final page structure should resemble the example below.

HTML:

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

        <meta charset="utf-8" />
        <title>Kaiyun Sports App – Comprehensive Setup & Reference</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="Kaiyun Sports App provides real-time sports news, live scores, and in-depth analysis for football, basketball, and more. Download the official app." />
        <meta name="keywords" content="kaiyun, kaiyun sports official website, kaiyun sports download, kaiyun official website, kaiyun, sports news, live scores, match analysis" />

        <!-- 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="feature-block">
                --------
                --------
                --------
                --------
            </div>
        </header>
        <!-- Navbar End -->

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

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

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

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

RTL Version

RTL Version:

To enable RTL mode, replace the reference to style.css with style-rtl.css in your HTML head.

Dark Mode

Dark Mode:

To enable dark mode, replace the reference to style.css with style-dark.css in your HTML head.

Dark RTL Version:

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

Menu Center to Right

To move the menu from center to right, add the nav-right class alongside the navigation-menu class.

Menu Center to Left

To move the menu from center to left, add the nav-left class alongside the navigation-menu class.

Light Nav Centered

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

Light Nav Right

For a right-aligned light navigation menu, add both nav-light and nav-right classes to the navigation-menu class.

Light Nav Left

For a left-aligned light navigation menu, add both nav-light and nav-left classes to the navigation-menu class.