Introduction

Begin your journey with the kaiyun Sports App. Leverage our expertise in design and management to enhance your user experience.

Getting Started

Kickstart your experience with the kaiyun Sports App, designed to boost visibility, drive engagement, and foster connections. Visit our download page to get started.

CSS

To load Bootstrap CSS, copy and paste the stylesheet <link> tag into your <head> section, placing it before all other stylesheets.

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

JS

Many of our components require JavaScript for full functionality. This includes jQuery and our custom JavaScript plugins. Place the following <script> tags before the closing `</body>` tag on your page. Ensure jQuery is loaded first, followed by bootstrap.bundle.min.js, and then our JavaScript plugins.

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

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

Basic Template

Ensure your page is set up with the latest design and development standards. This involves using the HTML5 doctype and including the viewport meta tag for proper responsive behavior. Integrating all elements will result in a page structure similar to this:

HTML:

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

        <meta charset="utf-8" />
        <title>Accessing Global Sports Data with kaiyun</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="The kaiyun Sports App provides comprehensive sports event information and real-time data, offering users the latest global sports updates, score changes, and detailed analysis." />
        <meta name="keywords" content="kaiyun, kaiyun sports official, kaiyun sports download, kaiyun official, 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="--------">
                --------
                --------
                --------
                --------
            </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">
            --------
            --------
        </a>
        <!-- Back To Home End -->

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

RTL Version

RTL Version:

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

Dark Mode

Dark Mode:

To enable Dark Mode, substitute the style.css reference with style-dark.css.

Dark RTL Version:

For Dark Mode with RTL support, change the style.css reference to style-dark-rtl.css.

Menu Center to Right

To align the navigation menu to the right from its centered position, add the `nav-right` class alongside the `navigation-menu` class.

Menu Center to Left

To align the navigation menu to the left from its centered position, add the `nav-left` class alongside the `navigation-menu` class.

Menu Light with Center

For a centered navigation menu with a light theme, append the `nav-light` class next to the `navigation-menu` class.

Light Navigation Right

To achieve a right-aligned navigation menu with a light theme, add the `nav-light` class in conjunction with `navigation-menu` and `nav-right`.

Light Navigation Left

To achieve a left-aligned navigation menu with a light theme, add the `nav-light` class in conjunction with `navigation-menu` and `nav-left`.

Documentation