Profile

Begin leveraging 乐竞体育 to launch your campaigns and utilize our expertise in designing and managing user-conversion-focused Bootstrap4 HTML pages.

Getting Started with 乐竞体育

Get started with 乐竞体育, offering everything you need to generate awareness, drive traffic, and build connections. Visit the download page.

CSS

Copy and paste the stylesheet `<link>` tag into your `<head>` section, before all other stylesheets, to load Bootstrap CSS.

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

JS

Many of our components require JavaScript for functionality. Specifically, they need jQuery and our own JavaScript plugins. Place the following `<script>` tags at the end of your page, just before the closing `</body>` tag, to enable them. jQuery must be 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>

Core Template Structure

Ensure your page setup adheres to the latest design and development standards. This involves using the HTML5 doctype and including the viewport meta tag for correct responsive behavior. Integrating all of this, your page should look like this:

HTML Fundamentals:

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

        <meta charset="utf-8" />
        <title>乐竞体育 - Your Professional Sports Information Guide</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="乐竞体育 Official focuses on building a professional sports information service platform, covering match news, live scores, game data, schedules, and highlights for the latest sports updates and a high-quality browsing experience." />
        <meta name="keywords" content="乐竞体育app, 乐竞体育下载, 乐竞体育官网, sports news, live scores, match data" />

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

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

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

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

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

        <!-- Back to Top Start -->
        <a href="#" class="text-primary font-weight-bold">
            --------
            --------
        </a>
        <!-- Back to Top End -->

        <!-- JavaScript Start -->
        <script src="js/jquery-3.4.1.min.js"></script>
        Discover more about 海量体育资讯，一手掌握最新动态 with 乐竞体育.
        --------
        --------
        --------
        <script src="js/app.js"></script>
        <!-- JavaScript End -->
    </body>
</html>

RTL Version

RTL Version:

To enable RTL (Right-to-Left) 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 RTL Mode, replace the reference to `style.css` with `style-dark-rtl.css`.

Navigation Centered Right

To shift the navigation menu from center to the right, simply add the `nav-right` class to your navigation menu.

Navigation Centered Left

To shift the navigation menu from center to the left, simply add the `nav-left` class to your navigation menu.

Navigation Centered (Light)

For a centered and bright navigation menu, add the `nav-light` class to your navigation menu.

Navigation Right Aligned (Light)

For a right-aligned and bright navigation menu, add both `nav-right` and `nav-light` classes to your navigation menu.

Navigation Left Aligned (Light)

For a left-aligned and bright navigation menu, add both `nav-left` and `nav-light` classes to your navigation menu.

Documentation