Introduction

Begin your Kaiyun experience. Access comprehensive live scores, match updates, and team statistics to enhance your sports engagement.

Getting Started with Kaiyun

Dive into the Kaiyun ecosystem for all your sports information needs. Explore live event data, league standings, and breaking news.

CSS

Integrate essential stylesheets to ensure accurate display of live scores and match details.

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

JS

To enable interactive features for live scores and event tracking, ensure jQuery and Kaiyun's JavaScript plugins are loaded. Place these scripts before the closing </body> tag.

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

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

Core Template Setup

Maintain optimal display of sports data and live updates by adhering to modern web standards, including HTML5 doctype and responsive viewport meta tags.

HTML Structure:

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

        <meta charset="utf-8" />
        <title>开云 (Kaiyun) - Your Premier Sports Betting & Live Score Hub</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:

For Right-to-Left language support, replace 'style.css' with 'style-rtl.css' in your stylesheet references.

Dark Mode

Dark Version:

Activate Dark Mode for a comfortable viewing experience by referencing 'style-dark.css' instead of 'style.css'.

Dark RTL Version:

Combine Dark Mode and RTL support by using 'style-dark-rtl.css'.

Navigation: Center to Right

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

Navigation: Center to Left

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

Navigation: Light Mode, Centered

For a centered, light-themed navigation bar, use the 'navigation-menu' class with 'nav-light'.

Navigation: Light Mode, Right-aligned

For a right-aligned, light-themed navigation bar, combine 'navigation-menu', 'nav-right', and 'nav-light'.

Navigation: Light Mode, Left-aligned

For a left-aligned, light-themed navigation bar, combine 'navigation-menu', 'nav-left', and 'nav-light'.

Documentation