文档

簡介

歡迎來到動速體育的官方文檔中心。在此,您將找到關於如何充分利用我們平台、掌握全球體育賽事最新動態的詳盡指南。

快速開始

踏上動速體育的旅程,我們為您準備了掌握賽事資訊、觸及體育熱點、建立連結所需的一切工具。立即探索,開啟您的體育資訊新篇章。

CSS

欲引入動速體育的視覺風格,請將此 CSS 連結標籤置於您 HTML 文件 `<head>` 區塊的開頭,確保其優先於其他樣式表載入。

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

JS

為確保動速體育各項互動功能的順暢運作,請務必在頁面底部、`</body>` 標籤之前,依序引入 jQuery、Bootstrap 的 JavaScript 套件以及動速體育專屬的腳本。jQuery 應最先載入,其次是 `bootstrap.bundle.min.js`。

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

核心配置

為確保最佳的瀏覽體驗與響應式佈局,請驗證您的頁面已採用 HTML5 文件類型宣告,並包含 viewport meta 標籤。這將有助於我們平台在各種裝置上都能呈現最佳效果。

技術導入 :
<!doctype html>
<html lang="en">
    <head>

        <meta charset="utf-8" />
        <title>動速體育:實時比分,全球賽事,一手掌握</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="動速體育中文站提供實時比分與賽事直播資訊,聚焦全球體育賽事。" />
        <meta name="keywords" content="體育直播,足球比分,籃球比分,實時比分,賽事資訊,動速體育" />

        <!-- 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/app.js"></script>
        <!-- Javascript End -->
    </body>
</html>
                        
在地化支援
在地化支援 :

若需啟用支援由右至左書寫的語言(如阿拉伯語、希伯來語),請將 `style.css` 的引用替換為 `style-rtl.css`。

夜間模式
夜間模式 :

為切換至夜間視覺模式,請將 `style.css` 的引用替換為 `style-dark.css`,以獲得更舒適的夜間瀏覽體驗。

夜間在地化模式 :

若您同時需要夜間模式與由右至左的語言支援,請將 `style.css` 替換為 `style-dark-rtl.css`。

選單
導航列右對齊

若欲將導航選單佈局從置中調整至右側,請在 `navigation-menu` 類別之外,額外添加 `nav-right` 類別。

導航列左對齊

若欲將導航選單佈局從置中調整至左側,請在 `navigation-menu` 類別之外,額外添加 `nav-left` 類別。

導航列置中淺色

若您偏好置中且具備淺色主題的導航選單,僅需為 `navigation-menu` 類別添加 `nav-light`。

導航列右對齊淺色

若您偏好右對齊且具備淺色主題的導航選單,請同時應用 `navigation-menu`、`nav-right` 及 `nav-light` 類別。

導航列左對齊淺色

若您偏好左對齊且具備淺色主題的導航選單,請同時應用 `navigation-menu`、`nav-left` 及 `nav-light` 類別。