Introduction

Begin with 雷速 Sports to manage your live event tracking and leverage expert insights from our conversion center.

Getting Started

Get started with 雷速 Sports, offering comprehensive tools for brand building, traffic generation, and audience engagement. Proceed to the download page.

CSS

To implement 雷速 Sports' CSS, copy and paste the <link> tag into your HTML <head> section, ensuring it precedes all other stylesheets.

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

JS

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

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

Bootstrap Bundle

Basic Template

Ensure your page adheres to modern standards with an HTML5 doctype and viewport meta tag for optimal responsive design. The complete structure should resemble the following:

HTML Structure:

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

        <meta charset="utf-8" />
        <title>雷速 Sports - Official Documentation</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="雷速 Sports APP, a premier sports entertainment application offering real-time live streams, data analysis, and interactive experiences." />
        <meta name="keywords" content="雷速, 雷速娱乐, 雷速APP, 雷速在线, 雷速下载, 雷速官网, 雷速体育, 足球直播, 篮球直播, 赛事数据" />

        <!-- 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 btn-lg" id="download-app-btn">
            --------
            --------
        </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>

RTL Version

RTL Version:

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

Dark Mode

Dark Mode:

For Dark Mode functionality, substitute `style.css` with `style-dark.css`.

Dark RTL Version:

To enable 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, append the `nav-right` class alongside the `navigation-menu` class.

Menu Center to Left

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

Light Menu Center

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

Light Menu Right Align

To achieve a right-aligned, light-themed navigation menu, combine `nav-right` and `nav-light` classes with `navigation-menu`.

Light Menu Left Align

For a left-aligned, light-themed navigation menu, use the `nav-left` and `nav-light` classes with `navigation-menu`.