Landrick - SaaS 與軟體模板
介紹
Landrick 是一個功能強大的 SaaS 與軟體 Bootstrap 模板。它是一個優秀的 HTML 模板,適用於新創公司、社群媒體行銷、數位行銷/代理商、電子郵件模板、線上學習課程、共同工作空間、雲端主機、叫車服務、經典 SaaS、經典應用程式、活動、商業、應用程式、教育課程、個人作品集、服務、企業、極簡作品集單一產品、SaaS、行銷、代理商、職涯、客戶支援、一頁式著陸頁等。Landrick 已完全更新至最新的 Bootstrap v4.5。它 100% 響應式,在所有類型的螢幕和裝置上看起來都令人驚豔。使用者會喜愛您的網站,因為它提供了獨特的使用者體驗 (UX)、乾淨、現代且美麗的設計。它們也易於自訂並與其他元件結合。
我們新增了一個 支援 RTL 的深色版本 淺色和深色版本皆有。
我們新增了新的示範頁面和重要的內部頁面,並修復了響應式問題。
如果您有任何問題或意見回饋,請隨時與我聯繫。
結構
在開發主題時,我嘗試遵循標準和模組化結構。以下章節將說明主題的檔案與資料夾結構、HTML 檔案結構以及外掛程式。
檔案與資料夾結構
Landrick v2.5
|
├── HTML 檔案
│ └── Something 113 html pages
│
├── css/
│ └── colors
│ │ └── default.css
│ │ └── cyan.css
│ │ └── green.css
│ │ └── red.css
│ │ └── skobleoff.css
│ │ └── skyblue.css
│ │ └── slateblue.css
│ │ └── purple.css
│ │
│ └── bootstrap.css
│ └── animate.css
│ └── animation-delay.css
│ └── aos.css
│ └── flatpickr.min.css
│ └── flexslider.css
│ └── magnific-popup.css
│ └── materialdesignicons.min.css
│ └── materialdesignicons.css
│ └── owl.carousel.min.css
│ └── owl.theme.default.min.css
│ └── owl.transitions.css
│ └── slick-theme.css
│ └── slick.css
│ └── swiper.min.css
│ └── style-dark.css
│ └── style-dark-rtl.css
│ └── style-rtl.css
│ └── style.css
│
├── fonts/
│ └── ajex-loader.gif
│ └── materialdesignicons-webfont.eot
│ └── materialdesignicons-webfont.svg
│ └── materialdesignicons-webfont.ttf
│ └── materialdesignicons-webfont.woff
│ └── materialdesignicons-webfont.woff2
│ └── slick.ttf
│ └── slick.woff
│
├── images/
│ └── All dummy images
│
├── scss/
│ └── dark
│ │ └── rtl
│ │ │ └── _bootstrap-custom-rtl.scss
│ │ │ └── _components-rtl.scss
│ │ │ └── _general-rtl.scss
│ │ │ └── _helper-rtl.scss
│ │ │ └── _menu-rtl.scss
│ │ │
│ │ └── _bootstrap-custom.scss
│ │ └── _components.scss
│ │ └── _general.scss
│ │ └── _helper.scss
│ │ └── _menu.scss
│ │ └── _variables.scss
│ │
│ └── rtl
│ │ └── _bootstrap-custom-rtl.scss
│ │ └── _components-rtl.scss
│ │ └── _general-rtl.scss
│ │ └── _helper-rtl.scss
│ │ └── _menu-rtl.scss
│ │
│ └── _blog.scss
│ └── _bootstrap-custom.scss
│ └── _components.scss
│ └── _contact.scss
│ └── _countdown.scss
│ └── _cta.scss
│ └── _features.scss
│ └── _footer.scss
│ └── _general.scss
│ └── _helper.scss
│ └── _home.scss
│ └── _menu.scss
│ └── _price.scss
│ └── _team.scss
│ └── _testi.scss
│ └── _user.scss
│ └── _variables.scss
│ └── _work.scss
│ └── style-dark-rtl.scss
│ └── style-dark.scss
│ └── style-rtl.scss
│ └── style.scss
│
├── php/
│ └── contact.php file
│
└── js/
└── app.js
└── bootstrap-bundle.min.js
└── jquery-3.4.1.js
└── jquery.easing.min.js
└── scrollspy.min.js
└── aos.js
└── contact.js
└── counter.init.js
└── feather.min.js
└── flatpickr.min.js
└── flatpickr.init.js
└── flexslider.min.js
└── flexslider.init.js
└── jquery.countdown.min.js
└── jquery.countdown.js
└── countdown.init.js
└── isotope.js
└── jquery.magnific-popup.min.js
└── magnific.init.js
└── portfolio.init.js
└── jquery.mb.YTPlayer.min.js
└── maintenance.init.js
└── owl.carousel.min.js
└── owl.init.js
└── swiper.min.js
└── swiper.init.js
└── parallax.js
└── slick.min.js
└── slick.init.js
└── small_menu.js
└── typed.js
└── typed.init.js HTML 結構
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title> Landrick - SaaS 與軟體著陸頁模板 </title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="description" content="網站描述" /> <meta name="keywords" content="您的標籤" /> <!-- favicon 圖示 --> <link rel="shortcut icon" href="images/favicon.ico"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <!-- 主要 CSS --> <link href="css/style.css" rel="stylesheet" type="text/css" /> <link href="css/colors/default.css" rel="stylesheet" id="color-opt" /> </head> <body> <!-- 載入器開始 --> <div id="#--------"> -------- -------- </div> <!-- 載入器結束 --> <!-- 導覽列開始 --> <header> <div class="--------"> -------- -------- -------- -------- </div> </header> <!-- 導覽列結束 --> <!-- 主視覺區開始 --> <section class="--------"> <div class="--------"> -------- -------- -------- -------- </div> </section> <!-- 主視覺區結束 --> <!-- 頁尾開始 --> <footer> <div class="--------"> -------- -------- -------- -------- </div> </footer> <!-- 頁尾結束 --> <!-- 返回首頁開始 --> <a href="#" class="--------" id="#--------"> -------- -------- </a> <!-- 返回首頁結束 --> <!-- JavaScript 開始 --> <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 結束 --> </body> </html>
CSS
檔案說明如下:
| 檔案 | 描述 |
|---|---|
bootstrap.min.css | Landrick 使用最新的 bootstrap v4.4.1。所有頁面皆使用核心的 bootstrap 檔案。 |
style.css | 此檔案包含所有頁面的通用樣式。 |
style-rtl.css | 為了啟用 RTL 模式,請將 style.css 的引用替換為 style-rtl.css |
style-dark.css | 為了啟用 深色 问鼎APP专注平台功能布局清晰,操作界面友好。,为用户提供专业可靠的体验。 style.css 的引用替換為 style-dark.css |
style-dark-rtl.css | 為了啟用 深色 RTL 围绕访问稳定,运行流畅,保障用户体验。,问鼎APP持续打磨更优质的服务。 style.css 的引用替換為 style-dark-rtl.css |
JavaScript
问鼎APP深耕全方位满足用户对综合娱乐平台的需求。领域,用心服务每一位用户。
| 檔案 | 描述 |
|---|---|
app.js | 這是一個主要的 JS 檔案。它包含佈局、側邊欄等功能所需的自訂 JS 程式碼。 |
選單
一些類似的變更:
1) 選單從置中改為靠右
若要將選單從置中移至右側,只需新增類別 navigation-menu 以及 nav-right.
導覽列置中
導覽列靠右
2) 選單從置中改為靠左
若要將選單從置中移至左側,只需新增類別 navigation-menu 以及 nav-left.
導覽列靠左
3) 淺色選單
如果您想要置中且淺色的導覽列,只需新增類別 navigation-menu 以及 nav-light.
淺色導覽列置中
淺色導覽列靠右
如果您想要右側且淺色的導覽列,只需新增類別 navigation-menu nav-right 以及 nav-light.
淺色導覽列靠左
如果您想要左側且淺色的導覽列,只需新增類別 navigation-menu nav-left 以及 nav-light.
載入器
若要新增 loader 您需要在 <body> 標籤之後加入以下程式碼。
<-- loader start -->
<div id="preloader"">
<div id="status">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</div>
</div>
<-- loader end --> 致謝與官方文件
我們使用了下列資源。這些都是很棒的創作,我們感謝社群。
- Bootstrap 4.5
- Jquery
- Feather 圖示
- Material Design 圖示
- Flaticon 圖示
- Iconscout Icons
- Owl Carousel
- Swiper Slider
- Flex Slider
- Slick Slider
- Parallax
- Countdown
- Magnific Popup
- Typed Text
- Lukaszadam Illustrations Images
- Stories Illustrations Images
- Manypixels Illustrations Images
- Isometric Illustrations Images
- Flatpickr - Datepicker
- Freepic Images
- Unsplash Images
- 動畫外掛程式
- AOS 動畫外掛程式
支援
再次感謝您的購買。我很樂意回答您與主題相關的任何問題。如果您有任何建議或功能請求,請隨時與我聯繫,我會嘗試實作並在未來更新中發布。
如果您有任何超出本文件範圍的問題,請隨時透過我的頁面發送電子郵件或聯繫我們。
保持出色
- Shreethemes
更新日誌
版本 v2.5.1 - 2020年8月1日
- 修復: 修復了一些選單和響應式問題 (CSS 變更)
版本 v2.5 - 2020年7月31日
- 新增: IT 解決方案著陸頁
- 新增: 企業商業
- 新增: 電子郵件收件匣著陸頁
- 新增: 任務管理著陸頁
- 新增: 旅遊著陸頁
- 新增: 部落格著陸頁
- 新增: 登陸頁一
- 新增: 登陸頁二
- 新增: 登陸頁三
- 新增: 論壇
- 論壇主題
- 論壇評論
- 新增: 案例研究頁面
- 所有案例
- 案例詳細資訊
- 已新增: 新增部落格詳細資訊頁面
- 已新增: 新的關於我們頁面
- 已新增: 新的公司歷史頁面
- 已新增: 使用者帳戶頁面
- 個人資料成員
- 個人資料作品
- 個人資料訊息
- 個人資料付款
- 修復: 修復了即將推出頁面的問題
- 修復: 修復了即將推出第二頁面的問題
- 修復: 修復了維護頁面的問題
- 已新增: 8 種優雅的配色方案
版本 v2.2 - 2020年5月26日
- 更新至最新的 Bootstrap v4.5
- 更新至最新的 Jquery v3.5.1
- 更新至最新的 Material Design Icons v5.3.45
- 新的商店著陸頁
- 新增商店內部頁面
- 商店產品
- 產品詳情
- 購物車
- 結帳
- 我的個人資料 / 帳戶
- 新的保險著陸頁即時預覽
- 新的電子書著陸頁即時預覽
- 新增說明中心頁面
- 說明中心 (概覽)
- 常見問題
- 指南
- 申請表單
- 修復了一些選單問題
- 選單可輕鬆從置中移至右側 (基於 CSS) 並新增淺色選單 (基於 CSS)
- 修復了一些響應式問題
版本 v2.1 - 2020年4月1日
- 更新至最新的 Jquery v3.4.1
- 新的社群媒體行銷著陸頁
- 新的數位代理商著陸頁
- 新的線上學習著陸頁
- 新的電子郵件模板
- 電子郵件確認
- 電子郵件提醒
- 電子郵件發票/帳單
- 電子郵件忘記密碼
- 新增部落格頁面
- 部落格列表頁面
- 部落格列表含側邊欄頁面
- 新增作品或作品集頁面
- 作品經典
- 作品網格
- 作品瀑布流
- 新增驗證頁面
- 登入頁面
- 註冊頁面
- 重設密碼頁面
- 在元件頁面中新增了元件
- 更新文件
- 修復了若干問題
版本 v2.0 - 2020年2月5日
- 新的經典應用程式著陸頁
- 新的經典 SaaS 著陸頁
- 新的叫車服務著陸頁
- 在職涯頁面中新增工作頁面
- 在问鼎娱乐app方面,问鼎APP提供贴心周到的支持。
- 新 RTL 版本 (僅基於 CSS)
- 新 深色版本 (僅基於 CSS)
- 新 深色 RTL 版本 (僅基於 CSS)
- 修復了單頁選單中的若干問題
- 修復了巨型選單中的若干問題
版本 v1.6 - 2019年12月11日
- 更新 Bootstrap 至 v4.4.1
- 新的工作著陸頁
- 新的客戶支援著陸頁
- 新的一頁式著陸頁
- 新帳戶頁面
- 個人資料頁面
- 個人資料設定頁面
- 帳單發票
- 新小工具頁面
- 新增職業頁面
- 求職者資料
- 公司資料
- 修正響應式問題
版本 v1.5 - 2019年11月20日
- 新增支援 RTL 版本
- 新增付款登陸頁面
- 新增加密貨幣登陸頁面
- 新增軟體登陸頁面
- 新增即將推出頁面
- 修正響應式與選單問題
版本 v1.4 - 2019年10月15日
- 新增企業登陸頁面
- 新增極簡作品集登陸頁面
- 新增服務登陸頁面
- 新增三個聯絡頁面
- 新增文件頁面
- 文件說明
- 更新日誌
- 修正客戶推薦錯誤問題
版本 v1.3 - 2019年10月1日
- 新增教育課程登陸頁面
- 新增個人作品集登陸頁面
- 新增單一產品登陸頁面
- 新增三個封面用戶頁面
- 修正選單問題
版本 v1.2 - 2019年9月17日
- 新增共享辦公空間登陸頁面
- 新增活動登陸頁面
- 新增雲端主機登陸頁面
- 新增作品集或頁面
- 新增一些實用頁面
- 新增一些元件
版本 v1.1 - 2019年9月7日
- 新增飯店登陸頁面
- 新增現代商業登陸頁面
- 新增客戶支援、一頁式登陸頁面
- 修正選單或響應式問題
版本 v1.0 - 2019年8月29日
- 初始發布
SCSS 檔案變更 v2.5
CSS 在 SCSS 檔案中的新增與變更如下:
- _bootstrap-custom.scss
- _components.scss
- _features.scss
- _helper.scss
- _home.scss
- _menu.scss
- _user.scss
- _variables.scss
- _work.scss
注意: 完整資料夾取代深色版本 scss 與 RTL 版本 scss
圖片變更 v2.5
替換部分 .png 圖片為 .svg 圖片:
- 路徑:HTML/images/customer/customer.svg
- 路徑:HTML/images/user/login.svg
- 路徑:HTML/images/user/recovery.svg
- 路徑:HTML/images/user/signup.svg
- 路徑:HTML/images/contact.svg
- 路徑:HTML/images/404.svg