Landrick - Saas & Software 模板
簡介
Landrick 是一個強大的 Saas & Software Bootstrap 模板。它是一個優秀的 HTML 模板，適用於新創公司、社群媒體行銷、數位行銷/代理、電子郵件模板、線上學習課程、共同工作空間、雲端託管、乘車服務、經典 saas、經典應用程式、活動、商業、應用程式、教育課程、個人作品集、服務、企業、極簡作品集單品、saas、行銷、代理、職涯、客戶支援、單頁登陸頁面等。Landrick 已全面更新至最新的 bootstrap v4.5。它具有 100% 的響應式設計，在所有類型的螢幕和裝置上看起來都令人驚豔。使用者會喜歡您的網站，因為它提供了獨特的使用者體驗 (UX)、乾淨、現代且美觀的設計。它們也易於自訂並與其他元件結合。
我們已新增一個 支援 RTL 的 Dark 版本 在 Light 和 Dark 版本中。
我們新增了新的演示頁面和重要的內部頁面，並修復了響應式問題。
如果您有任何問題或回饋，請隨時與我聯繫。
結構
在開發主題時，我試圖遵循標準和模組化結構。以下章節將說明主題檔案與資料夾結構、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
│
├── 字型/
│ └── ajex-loader.gif
│ └── materialdesignicons-webfont.eot
│ └── materialdesignicons-webfont.svg
│ └── materialdesignicons-webfont.ttf
│ └── materialdesignicons-webfont.woff
│ └── materialdesignicons-webfont.woff2
│ └── slick.ttf
│ └── slick.woff
│
├── 圖片/
│ └── All dummy images
│
├── scss/
│ └── 黑暗
│ │ └── 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 & Software 登陸頁面模板 </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 | 為了啟用 Dark 精选官方授权，安全可靠内容，kaiyun.com与你一同发现更多精彩。 style.css 替換為 style-dark.css |
style-dark-rtl.css | 為了啟用 Dark RTL kaiyun.com专注开云官网，为用户提供专业可靠的体验。 style.css 替換為 style-dark-rtl.css |
JavaScript
围绕开云集团，kaiyun.com持续打磨更优质的服务。
| 檔案 | 說明 |
|---|---|
app.js | 這是主要的 js 檔案。它包含功能所需的自訂 JS 程式碼，包括 佈局、側邊欄等。 |
選單
一些類似以下的變更：
1) 選單從置中移至右側
若要將選單從置中移至右側，只需新增類別 navigation-menu 與 nav-right.
Navbar Center
Navbar Right
2) 選單從置中移至左側
若要將選單從置中移至左側，只需新增類別 navigation-menu 與 nav-left.
Navbar Left
3) 選單淺色模式
如果您想要置中選單和淺色導覽列，只需新增類別 navigation-menu 與 nav-light.
Navbar Light with Center
Navbar Light with Right
如果您想要右側選單和淺色導覽列，只需新增類別 navigation-menu nav-right 與 nav-light.
Navbar Light with Left
如果您想要左側選單和淺色導覽列，只需新增類別 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 Illustrations Images
- Stories Illustrations Images
- Manypixels Illustrations Images
- Isometric Illustrations Images
- Flatpickr - Datepicker
- Freepic Images
- Unsplash Images
- Animation Plugin
- AOS Animation Plugin
支援
再次感謝您的購買。我很樂意回答您與主題相關的問題。如果您有任何建議或功能請求，請隨時與我聯繫，我會盡力實現並將其作為未來更新的一部分發布。
如果您有任何超出本文件範圍的問題，請隨時透過電子郵件或透過我的頁面與我們聯繫。
保持精彩
- Shreethemes
變更日誌
版本 v2.5.1 - 2020 年 8 月 1 日
- 修復： 修復了一些選單和響應式問題 (CSS 變更)
版本 v2.5 - 2020 年 7 月 31 日
- 新增： IT Solution Landing
- 新增： Corporate Business
- 新增： Email Inbox landing
- 新增： Task Management Landing
- 新增： Travel Landing
- 新增： Blog Landing
- 新增： Landing One
- 新增： Landing Two
- 新增： Landing Three
- 新增： Forums
- Forum Topic
- Forum Comments
- 新增： Case Study Pages
- All Cases
- Case Details
- 新增： New Blog Details Page
- 新增： New About Us Page
- 新增： New Company History Page
- 新增： User Account Pages
- Profile Members
- Profile Works
- Profile Messages
- Profile Payments
- 修復： 修復了 Comingsoon 頁面中的問題
- 修復： 修復了 Comingsoon two 頁面中的問題
- 修復： 修復了 Maintenance 頁面中的問題
- 新增： 8 種優雅的配色方案
版本 v2.2 - 2020 年 5 月 26 日
- 更新至最新的 Bootstrap v4.5
- 更新至最新的 Jquery v3.5.1
- 更新至最新的 Material Design Icons v5.3.45
- New Shop landing landing
- 新增的 Shop Inner Pages
- Shop Products
- Product Details
- Shop Cart
- Checkouts
- My Profile / Account
- New Insurance Landing Live Preview
- New E-Book Landing Live Preview
- 新增的 Help Center Pages
- Help center(Overview)
- FAQs
- Guides
- Request Form
- 修復了一些選單問題
- 選單輕鬆從置中移至右側 (基於 CSS) 並新增淺色選單 (基於 CSS)
- 修復了一些響應式問題
版本 v2.1 - 2020 年 4 月 1 日
- 更新至最新的 Jquery v3.4.1
- New Social Marketing landing
- 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
- kaiyun.com深耕开云领域，用心服务每一位用户。
- 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