Introduction

Begin your journey with the 2026 World Cup Live Platform by 世界杯直播longyu, designed to enhance your engagement with real-time match data and global football insights.

Getting Started

Access comprehensive World Cup information and data through our platform to elevate your understanding and enjoyment of the tournament. Visit the download section to get started.

CSS

Incorporate this stylesheet link into your <head> section, positioned before all other stylesheets, to load the essential Bootstrap CSS for our platform.

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

JS

Many of our platform's interactive components rely on JavaScript. Ensure jQuery and our custom plugins are loaded correctly. Place these script tags just before the closing </body> tag, with jQuery loaded first, followed by bootstrap.bundle.min.js, and then our platform-specific scripts.

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

JavaScript Libraries

Base Template

Ensure your web pages adhere to modern standards by including the HTML5 doctype and the viewport meta tag for optimal responsive design. A basic structure incorporating these elements is provided below.

HTML Structure:

<!doctype html>
<html lang="zh-CN">
    <head>

        <meta charset="utf-8" />
        <title>世界杯直播longyu 2026 World Cup Live Platform: User Guide</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="2026 World Cup live platform for international football news and data. Track global match progress, team performance, player stats, and hot topics. Get comprehensive and timely information for football fans." />
        <meta name="keywords" content="世界杯在线直播, 世界杯赛事, 世界杯体育平台, 世界杯APP, 足球数据, 赛事分析" />

        <!-- 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="loader">
            --------
            --------
        </div>
        <!-- Loading Animation End -->

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

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

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

        <!-- Back to Top Start -->
        <a href="#" class="btn btn-primary btn-pills" id="get-started-btn">Get Started</a>
            --------
            --------
        </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 Support

RTL Support:

To activate Right-to-Left (RTL) language support, replace the reference to 'style.css' with 'style-rtl.css' in your stylesheet link.

Dark Mode

Dark Mode:

To enable Dark Mode for a more comfortable viewing experience, substitute 'style.css' with 'style-dark.css' in your stylesheet link.

Dark RTL Mode:

For a dark theme with Right-to-Left (RTL) language support, use 'style-dark-rtl.css' in your stylesheet link.

Navigation Centered Right

To align your navigation menu to the right, append the class 'nav-right' to your navigation bar's container.

Navigation Centered Left

To align your navigation menu to the left, append the class 'nav-left' to your navigation bar's container.

Light Navigation Centered

For a light-themed navigation menu centered on the page, add the class 'nav-light' to your navigation bar's container.

Light Navigation Right

To achieve a light-themed navigation menu positioned on the right, apply both 'nav-right' and 'nav-light' classes to your navigation bar's container.

Light Navigation Left

For a light-themed navigation menu aligned to the left, use both 'nav-left' and 'nav-light' classes on your navigation bar's container.

Documentation