Ruxin
App 登陸頁面 HTML 模板
建立日期： 06/08/2020作者： layerdrops
電子郵件： [email protected]
感謝您購買 Ruxin - App 登陸頁面 HTML 模板。如果您有任何超出本說明文件範圍的問題，請隨時透過我的使用者頁面聯絡表單發送電子郵件，或在支援中心提交工單。
非常感謝您！
模板特色
- 簡潔乾淨的設計
- 先進的 Bootstrap 4 框架
- HTML5 與 CSS3
- CSS3 動畫
- 完全響應式設計
- 所有檔案皆有完整註解
- 跨瀏覽器相容，支援 IE10+、Firefox、Safari、Opera、Chrome
- 詳盡的文件說明
HTML 結構
此 HTML 模板使用最新版本 Bootstrap v4.5 並採用有效的 HTML5 標籤。此主題為響應式佈局，支援 4 欄結構。內容區域中的所有資訊都嵌套在一個 class 內，並附有預定義的 class。
基本網格 HTML
對於簡單的兩欄佈局，請建立一個 .container 並添加適當數量的 .col-md* 欄位。
根據此範例，我們使用了 .col-md-4 和 .col-md-8，總共 12 欄，形成一個完整的行。
......
嵌套欄位
若要將內容嵌套到預設網格中，請在現有的 .col-md* 欄位內添加一個新的 .container 和一組 .col-md* 欄位。嵌套的行應包含一組總和等於其父層欄位數量的欄位。
第一層欄位第二層第二層第二層欄位
CSS 檔案與結構
此主題主要使用三個主要的 CSS 檔案。第一個是 bootstrap.css, 第二個是 style.css 用於此模板，第三個是 responsive.css 用於控制響應式佈局。
如果您想編輯網站的特定區塊，只需在 CSS 檔案中找到對應的標籤，然後向下捲動直到找到需要編輯的樣式。
這些是載入到模板中、位於 style.css 檔案頂部並標示為 匯入的 CSS.
@import url(bootstrap.min.css);
@import url(fontawesome.min.css);
@import url(flaticon.css);
@import url(default.css);
@import url(animate.css);
@import url(swiper-bundle.min.css);
@import url(style.css);
字型
預設情況下，模板會從 Google Web Font Services 載入此字型，您可以將其更改為最適合您的字型。
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');
jQuery 與 JavaScript
此主題導入了三種類型的 JavaScript 檔案。
- jQuery
- 自訂腳本 (main.js)
- 部分外掛
- jQuery 是一個能大幅減少您所需編寫程式碼量的 JavaScript 函式庫。
- 此網站中的大部分動畫都是由自訂腳本執行的。有幾個功能值得一看。
除了自訂腳本之外，我還實作了幾個「經過驗證」的外掛來產生效果。此外掛已打包，因此您無需手動編輯檔案中的任何內容。唯一需要知道的是如何呼叫該方法。
這些是載入到模板中、位於 Body 區塊結尾的 JS 檔案。
教學課程
標誌
讓我們開始更新模板。開啟 index.html 檔案並依照步驟操作。
大部分頁面的更新方式都相同，因此這裡只說明一次。
將「images/logo.png」替換為您的標誌圖片網址來源或網站名稱。
導航選單
這是基本結構。
將您自己的選單項目添加到該 ul li 項目中。如果您想添加下拉選單，只需建立一個嵌套的 ul li，並加上 子選單
頁尾版權資訊
將「© Copyright Ruxin 2020 . All right reserved.」替換為您的版權資訊。
來源與致謝
模板中使用的字型是 Google 字型，您可以在 Google Fonts API 上找到它們。
使用的字型為：
用於動畫效果的檔案：
animate.css (位於 css 資料夾中)
使用的輪播為：
使用的外掛為：
wow.min.js (可在外掛資料夾中找到)
scrolling-nav.js 围绕U球官网，U球直播持续打磨更优质的服务。
每個程式碼都有完善的註解，方便編輯。支援
再次衷心感謝您購買此主題。如同我一開始所說，如果您對這個主題有任何疑問，我將很樂意提供協助。不保證一定能解決，但我會盡力協助。如果您有任何疑問，請隨時透過支援中心與我們聯繫。
寄送電子郵件至： [email protected]