Introduction

Integrate with 竞技宝 to elevate your esports journey. We provide comprehensive match data and interactive features to keep you informed.

Getting Started

Experience 竞技宝 now and access all the content you need to fuel your passion. Visit the download page.

CSS

Include these style links in your `<head>` section before other stylesheets to ensure the correct 竞技宝 interface.

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

JS

Interactive features require JavaScript. Ensure jQuery, bootstrap.bundle.min.js, and 竞技宝's custom scripts are included before the closing `</body>` tag.

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

Bootstrap Bundle JS

Base Template

Ensure your pages adhere to the latest design and development standards. Use the HTML5 doctype and viewport meta tag for optimal responsive layouts.

HTML:

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

        <meta charset="utf-8" />
        <title>竞技宝 - Leading Chinese Esports Platform</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="竞技宝, powered by JJB, leads the Chinese esports industry. Get live scores & interact for DOTA2, LOL & more. Mobile & PC access, real-time data, expert analysis. Secure & user-friendly." />
        <meta name="keywords" content="竞技宝APP, 竞技宝官网, 竞技宝DOTA2, 竞技宝LOL, 竞技宝CSGO" />

        <!-- 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>

RTL Version

RTL Version:

To enable Right-to-Left (RTL) support, replace `style.css` with `style-rtl.css`.

Dark Version

Dark Mode:

To activate dark mode, replace `style.css` with `style-dark.css`.

Dark RTL Version:

For dark mode with RTL support, replace `style.css` with `style-dark-rtl.css`.

Nav Center Right

To position the navigation menu to the right, add the classes `navigation-menu` and `nav-right` to the navigation element.

Nav Center Left

To position the navigation menu to the left, add the classes `navigation-menu` and `nav-left` to the navigation element.

Light Nav Center

For a light navigation menu centered, apply the classes `navigation-menu` and `nav-light`.

Light Nav Right

For a light navigation menu positioned to the right, use classes `navigation-menu`, `nav-right`, and `nav-light`.

Light Nav Left

For a light navigation menu positioned to the left, apply `navigation-menu`, `nav-left`, and `nav-light` classes.

Docs