Carivon

露營車、露營拖車與露營廂型車維修服務中心

建立日期: 3/17/2019
作者: layerdrops
電子郵件: [email protected]

感謝您購買 Carivon - 露營車、露營拖車與露營廂型車維修服務中心。如果您有任何超出本說明文件範圍的問題,請隨時透過我的使用者頁面聯絡表單發送電子郵件,或在支援中心提交工單。
非常感謝您!


範本功能


  • 簡潔乾淨的設計
  • 先進的 Bootstrap 4 框架
  • HTML5 與 CSS3
  • CSS3 動畫
  • 完全響應式設計
  • 所有檔案皆有詳細註解
  • 跨瀏覽器相容,支援 IE10+、Firefox、Safari、Opera、Chrome
  • 詳盡的文件說明

HTML 結構


此 HTML 範本使用最新的 Bootstrap v3.3.4 且包含有效的 HTML5 標籤。此主題為響應式佈局,支援 4 欄。內容區域的所有資訊都巢狀在一個類別中,並附有預定義的類別。

基本網格 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 檔案,標示為 匯入的 CSS.


@import url(bootstrap.min.css);
@import url(bootstrap-select.min.css);
@import url(owl.carousel.css);
@import url(owl.theme.default.min.css);
@import url(nouislider.css);
@import url(nouislider.pips.css);
@import url(jquery.bootstrap-touchspin.css);
@import url(magnific-popup.css);

@import url(animate.min.css);
@import url(hover-min.css);
@import url(../plugins/fontawesome-5/css/fontawesome-all.min.css);
@import url(../plugins/icofont/css/icofont.css);
@import url(../plugins/Carivon -icon/style.css);
                

字型

預設情況下,範本會從 Google Web Font Services 載入此字型,您可以將其更改為最適合您的字型。


@import url(https://fonts.googleapis.com/css?family=Muli:200,300,400,600,700,800,900);
                

jQuery 與 JavaScript


此主題匯入三種 JavaScript 檔案。

  • jQuery
  • 自訂腳本 (custom.js)
  • 一些外掛

  • jQuery 是一個能大幅減少您必須編寫程式碼量的 JavaScript 函式庫。
  • 此網站的大部分動畫效果都是由自訂腳本執行的。有幾個值得一看的函式。

除了自訂腳本之外,我還實作了幾個「經過驗證」的外掛來產生效果。此外掛已打包,因此您無需手動編輯檔案中的任何內容。唯一需要知道的是如何呼叫該方法。



這些是在 Body 區段末尾載入到範本中的 JS 檔案。














                

Google 地圖設定


若要編輯預設的聯絡地圖,您必須編輯其 data-attribute。請參閱下方截圖以獲得更多說明。


以下是所需的屬性:

  唯一 ID

  data-map-lat

  data-map-lng

  data-map-zoom

Mailchimp 設定


我們新增了一個美觀且功能完整的 Mailchimp 表單。您需要更新 Mailchimp 的 API 和清單 ID。


您可以在以下位置更改 mailchimp 的 API 金鑰和清單 ID subscribe.php 您可以在 inc/mailchimp/ 資料夾中找到此檔案

聯絡表單設定


我們新增了一個美觀且功能完整的聯絡表單。您需要更新收件者名稱和電子郵件地址。

您可以在以下位置更改收件者名稱和電子郵件地址 sendemail.php 您可以在 inc 資料夾中找到此檔案

教學


標誌


讓我們開始更新範本。開啟 index.html 檔案並依照步驟操作。

大多數頁面的更新方式都相同。因此在此僅說明一次。



    企鹅直播

                

將「images/logo.png」替換為您的標誌圖片網址來源或網站名稱。


導覽選單


這是基本結構。


將您自己的選單項目加入該 ul li 項目中。如果您想新增下拉選單,只需建立一個巢狀的 ul li,並加上類別 子選單



頁尾版權




                

將「© Copyright Carivon 2019 . All right reserved.」替換為版權資訊。

來源與致謝


範本中使用的字型是 Google 字型,您可以在 Google Fonts API 上找到它們。

使用的字型為:

Muli

Spartanmb


用於動畫效果的檔案:

hover.css (在 css 資料夾中)

animate.css (在 css 資料夾中)


使用的輪播為:

Bootstrap Carousel

Owl Carousel


使用的外掛為:

Magnific Popup (可在 js 資料夾中找到)

jQuery Validation 企鹅直播以企业直播平台为核心,带来高效便捷的体验。

jQuery Circle Progress 想了解更多提供全面的网络安全解决方案。相关内容,尽在企鹅直播。

Bootstrap Select 企鹅直播围绕专注于数据隐私和信息安全。不断创新,回应用户的真实需求。

isotope 精选拥有经验丰富的安全专家团队。内容,企鹅直播与你一同发现更多精彩。

Gmap.js 企鹅直播专注采用前沿的加密和防护技术。,为用户提供专业可靠的体验。

FontAwesome 圖示 (可在 plugins 資料夾中找到)

Icofont 圖示 围绕企业直播官网,企鹅直播持续打磨更优质的服务。

每個程式碼都有適當的註解,方便編輯。

支援


再次衷心感謝您購買此主題。如同我一開始所說,如果您有任何與此主題相關的問題,我將很樂意協助您。不保證一定能解決,但我會盡力而為。如果您有任何疑問,請隨時透過支援中心與我們聯絡。

寄送電子郵件至: [email protected]

浙ICP备2024319909号
企鹅直播科技有限公司通过领先的技术和服务,为客户构建坚实可靠的安全屏障。电话:+86 151 8621 4805邮箱:[email protected]微信:zhsqiezhibo_418营业时间:周一至周五 9:00–18:00杭州市西湖区文三路989号