Introduction

OUBOSPORT provides comprehensive sports news and data services, enabling you to quickly grasp the dynamics of the game.

Getting Started

Leverage OUBOSPORT's professional real-time data updates and precise score/odds analysis to deeply understand game intricacies and predict outcomes, offering robust support for your sports enthusiasm.

CSS

Include the following stylesheet links in your HTML head to load the base CSS.

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

JS

Certain features rely on JavaScript for their functionality. Ensure that jQuery and OUBOSPORT's specific JavaScript plugins are included at the bottom of your page. The loading order should be: jQuery, then bootstrap.bundle.min.js, and finally our JavaScript plugins.

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

<script src="/js/bootstrap.bundle.min.js"></script>

Basic Template

Ensure your page adheres to the latest design and development standards, including the use of the HTML5 doctype and viewport meta tag for responsive layouts.

HTML Structure:

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

        <meta charset="utf-8" />
        <title>欧博官网 - OUBOSPORT | Sports News & Data</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="OUBOSPORT (China) Official Website: Your premier source for sports news and data, covering football, basketball, and more. Get live scores, team info, schedules, stats & expert analysis." />
        <meta name="keywords" content="OUBOSPORT, OUBOSPORT APP, OUBOSPORT Login, OUBOSPORT Sports, Sports News, Live Scores, Data Statistics" />

        <!-- Website Icon -->
        <link rel="shortcut icon" href="/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 -->

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

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

        <!-- Back to Top Start -->
        <a href="#" class="nav-link" id="nav-link-home">
            --------
            --------
        </a>
        <!-- Back to Top End -->

        <!-- JavaScript Start -->
        <script src="/js/jquery-3.4.1.min.js"></script>
        Built around 欧博体育, 欧博官网 keeps refining a better service.
        --------
        --------
        --------
        <script src="js/app.js"></script>
        <!-- JavaScript End -->
    </body>
</html>

Internationalization Support

Internationalization Support:

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

Dark Mode

Dark Mode:

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

Dark International Mode:

To enable Dark Internationalization Mode, replace style.css with style-dark-rtl.css.

Navigation Center-Right

To move the navigation menu from center to the right, add the classes "navigation-menu" and "nav-right" to the navigation element.

Navigation Center-Left

To move the navigation menu from center to the left, add the classes "navigation-menu" and "nav-left" to the navigation element.

Navigation Center-Light

For a centered navigation menu with a light theme, add the classes "navigation-menu" and "nav-light".

Navigation Right-Light

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

Navigation Left-Light

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

Documentation