Introduction

Get started with Douqiu Sports Live. Launch your viewing experience and benefit from our professional event content and seamless streaming technology.

Quick Start

Begin your journey with Douqiu Sports Live, offering everything you need to elevate your brand presence, drive engagement, and foster connections. Navigate to the download section.

CSS

Link this stylesheet into your <head> section, before all other stylesheets, to load Douqiu Sports Live's CSS.

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

JS

Many of our components require JavaScript to function properly. Specifically, they depend on jQuery and our custom JavaScript plugins. Place the following <script> tags just before the closing </body> tag to enable them. Ensure jQuery is loaded first, followed by bootstrap.bundle.min.js, and then our JavaScript plugins.

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

JavaScript Libraries

Core 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 these elements, your page should look like this:

HTML Structure:

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

        <meta charset="utf-8" />
        <title>Guide to Douqiu Sports Live Platform Features and Usage</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="Douqiu Sports Live offers live streaming and news for popular sports like football and basketball. Get real-time global event updates, scores, and highlights." />
        <meta name="keywords" content="Douqiu Live, Douqiu Live Official Website, Douqiu Sports Official Website, Douqiu Sports, Sports Live, Football Live, Basketball Live" />

        <!-- Website Icon -->
        <link rel="shortcut icon" href="images/favicon.ico">

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

        <!-- Main Stylesheet -->
        <link href="css/style.css" rel="stylesheet" type="text/css" />
    
    </head>

    <body>

        <!-- Loading Animation Start -->
        <div id="#--------">
            --------
            --------
        </div>
        <!-- Loading Animation End -->

        <!-- Navigation Start -->
        <header>
            <div class="--------">
                --------
                --------
                --------
                --------
            </div>
        </header>
        <!-- Navigation End -->

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

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

        <!-- Back to Top Start -->
        <a href="#" class="btn btn-primary" id="download-btn">
            --------
            --------
        </a>
        <!-- Back to Top 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>

Internationalization

Internationalization Support:

To enable Internationalization (RTL) mode, replace the reference to style.css with style-rtl.css.

Dark Mode

Dark Mode:

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

Dark & RTL Mode:

To enable Dark Mode with RTL support, replace the reference to style.css with style-dark-rtl.css.

Centered Navigation (Right Aligned)

To shift the navigation menu from centered to the right, simply add the `navigation-menu` and `nav-right` classes to your navbar.

Centered Navigation (Left Aligned)

To shift the navigation menu from centered to the left, simply add the `navigation-menu` and `nav-left` classes to your navbar.

Centered Navigation (Light Theme)

For a centered navigation menu in light theme, add the `navigation-menu` and `nav-light` classes.

Right-Aligned Navigation (Light Theme)

For a right-aligned navigation menu in light theme, add the `navigation-menu`, `nav-right`, and `nav-light` classes.

Left-Aligned Navigation (Light Theme)

For a left-aligned navigation menu in light theme, add the `navigation-menu`, `nav-left`, and `nav-light` classes.

Document