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/
│ └── 顏色
│ │ └── 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="您的標籤" /> <!-- favicons 圖示 --> <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 | 為了啟用 深色 雷速专注比分直播，为用户提供专业可靠的体验。 style.css 替換為 style-dark.css |
style-dark-rtl.css | 為了啟用 深色 RTL 围绕体育赛事实时比分直播平台，雷速持续打磨更优质的服务。 style.css 替換為 style-dark-rtl.css |
JavaScript
雷速深耕海量赛事数据，实时更新领域，用心服务每一位用户。
| 檔案 | 說明 |
|---|---|
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 Icons
- Material Design Icons
- Flaticon Icons
- Iconscout Icons
- Owl Carousel
- Swiper Slider
- Flex Slider
- Slick Slider
- Parallax
- Countdown
- Magnific Popup
- Typed Text
- Lukaszadam 插畫圖片
- Stories 插畫圖片
- Manypixels 插畫圖片
- Isometric 插畫圖片
- Flatpickr - 日期選擇器
- Freepic 圖片
- Unsplash 圖片
- 動畫外掛程式
- 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
- 新的社群行銷登陸頁
- New Digital Agency Landing
- New Online Learning Landing
- New Email Template
- Email Confirmation
- Email Alert
- Email Invoice/Billing
- Email Forgot Password
- Add New Blog Pages
- Blog Listing Page
- Blog Listing with sidebar Page
- Add New Work or Portfolio Pages
- Work Classic
- Work Grids
- Work Masonry
- Add New Authentication Pages
- Login Page
- Signup Page
- Recover Password Page
- Added new components in Components Page
- Update Documentation
- Fixed couples of issues
Version v2.0 - 5th February, 2020
- New Classic Application Landing Page
- New Classic Saas Landing Page
- New Car Ride Landing Page
- Add New Job page in Careers pages
- 在深度赛事分析，助您掌握先机方面，雷速提供贴心周到的支持。
- New RTL Version (Only CSS Base)
- New Dark Version (Only CSS Base)
- New Dark RTL Version (Only CSS Base)
- Fixed couple of issues in One Page Menu
- Fixed couple of issues in mega Menu
Version v1.6 - 11th December, 2019
- Update Bootstrap to v4.4.1
- New Job Landing Page
- New Customer Support Landing Page
- New Onpage Landing Page
- New Account Pages
- Profile Page
- Profile Setting Page
- Bill Invoice
- New Widget Page
- Added Careers Pages
- Candidate Profile
- Company Profile
- Fixed Responsive Issue
Version v1.5 - 20th November, 2019
- Added RTL Supported Version
- Added Payments Landing Page
- Added Cryptocurrency Landing Page
- Added Software Landing Page
- Added Comingsoon Page
- Fixed Responsive and Menu Issue
Version v1.4 - 15th October, 2019
- Added Enterprise Landing
- Added Minimal Portfolio Landing
- Added Services Landing
- Added Three New Contact Pages
- Added Docs Pages
- Documentation
- 變更日誌
- Fixed Testimonial Bugs Issue
Version v1.3 - 1st October, 2019
- Added Educational Course Landing
- Added Personal Portfolio Landing
- Added Single Product Landing
- Added Three New Cover User Pages
- Fixed Menu Issue
Version v1.2 - 17th September, 2019
- Added Coworking space Landing
- Added Event Landing
- Added Cloud Hosting Landing
- Added Portfolio or Pages
- Added Some Utility Pages
- Added Some Components
Version v1.1 - 7th September, 2019
- Added Hotel Landing
- Added Modern Business Landing
- Added Customer Supports, Onepage Landing Pages
- Fixed Menu or Responsive Issue
Version v1.0 - 29th August, 2019
- Initial Released
Changes in SCSS files v2.5
Some add and changes CSS in SCSS files are here,
- _bootstrap-custom.scss
- _components.scss
- _features.scss
- _helper.scss
- _home.scss
- _menu.scss
- _user.scss
- _variables.scss
- _work.scss
Note: Full folder replace Dark version scss and RTL version scss
Changes in Images v2.5
Replace some .png images with .svg images:
- Path: HTML/images/customer/customer.svg
- Path: HTML/images/user/login.svg
- Path: HTML/images/user/recovery.svg
- Path: HTML/images/user/signup.svg
- Path: HTML/images/contact.svg
- Path: HTML/images/404.svg