杏彩体育（中国）官方网站

简介

杏彩体育 is a Powerful Saas & Software Bootstrap Template. It is an excellent HTML template for startup, Social media marketing, Digital markering/agency, Email Templates, Online Learning Course, coworking space, cloud hosting, car ride, classic saas, classic application, event, business, application, educational course, personal portfolio, services, enterprise, minimal portfolio single product, saas, marketing, agency, Careers, Customer Supports, Onepage Landing etc. Landrick is fully updated with latest bootstrap v4.5. It is 100% responsive and looks stunning on all types of screens and devices. Users will love your site because it gives them a unique user experience (UX), clean, modern & beautiful design. They are also easy to customize and to combine with other components.

已新增支持 RTL 的深色模式及浅色模式。

新增了多个演示页面及重要内页，并修复了响应式问题。

如有任何疑问或建议，请随时与我们联系。

文档结构

在开发过程中，我们遵循了行业标准与模块化结构。以下章节将详细介绍平台的文件与文件夹结构、HTML 结构及相关插件。

文件与文件夹结构

杏彩体育
|
├──  html files
│   └── 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>杏彩体育（中国）官方网站 - XINGCAI PC端</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="Site description" />
        <meta name="keywords" content="Your tags" />

        <!-- favicon icon -->
        <link rel="shortcut icon" href="images/favicon.ico">

        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />

        <!-- Main css -->
        <link href="css/style.css" rel="stylesheet" type="text/css" />
        <link href="css/colors/default.css" rel="stylesheet" id="color-opt" />
    
    </head>

    <body>

        <!-- Loader Start -->
        <div id="#--------">
            --------
            --------
        </div>
        <!-- Loader End -->

        <!-- Navbar Start -->
        <header>
            <div class="--------">
                --------
                --------
                --------
                --------
            </div>
        </header>
        <!-- Navbar End -->

        <!-- Hero Start -->
        <section class="--------">
            <div class="--------">
                --------
                --------
                --------
                --------
            </div>
        </section>
        <!-- Hero End -->

        <!-- Footer Start -->
        <footer>
            <div class="--------">
                --------
                --------
                --------
                --------
            </div>
        </footer>
        <!-- Footer End -->

        <!-- Back To Home Start -->
        <a href="#" class="--------" id="#--------">
            --------
            --------
        </a>
        <!-- Back To Home End -->

        <!-- Javascript Start -->
        <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 End -->
    </body>
</html>

CSS

文件说明如下：

文件名	Description
`bootstrap.min.css`	杏彩体育平台基于最新的Bootstrap v4.4.1构建，所有页面均采用核心Bootstrap文件。
`style.css`	此文件包含所有页面的通用样式。
`style-rtl.css`	要启用暗黑模式，请将链接替换为
`style-dark.css`	要启用暗黑模式，请将链接替换为
`style-dark-rtl.css`	要启用暗黑模式，请将链接替换为

JavaScript 详解

文件说明如下：

文件名	Description
`app.js`	这是主JavaScript文件，包含布局、侧边栏等功能的定制JavaScript代码。

菜单

部分更新说明：

导航居中至右侧

如需将导航菜单从居中移至右侧，请在 `navigation-menu` 类之外添加 `nav-right` 类。

导航居中

导航右对齐

导航居中至左侧

如需将导航菜单从居中移至左侧，请在 `navigation-menu` 类之外添加 `nav-left` 类。

导航左对齐

导航浅色模式

如需浅色导航菜单居中，请在 `navigation-menu` 类之外添加 `nav-light` 类。

浅色导航居中

浅色导航右对齐

如需浅色导航菜单右对齐，请同时添加 `nav-right` 和 `nav-light` 类。

浅色导航左对齐

如需浅色导航菜单左对齐，请同时添加 `nav-left` 和 `nav-light` 类。

加载动画设置

如需添加加载动画，请在 `<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 图标
Owl Carousel
Swiper Slider
Flex Slider
Slick Slider
Parallax 视差
Countdown 倒计时
Magnific Popup
Typed Text 动态文本
Lukaszadam 插画
Stories 插画
Manypixels 插画
Isometric 插画
Flatpickr - 日期选择器
Freepic 图片
Unsplash 图片
动画插件
AOS 动画插件

支持服务

再次感谢您的支持。关于本平台的使用疑问，我们随时乐意解答。若您有任何建议或功能需求，请随时告知，我们将努力在未来的更新中实现。

若您的问题超出了本帮助文档的范围，请随时通过电子邮件或我的页面与我们联系。

保持卓越

杏彩体育

更新日志

版本 v2.5.1 - 2020年8月1日

修复：修正部分菜单及响应式问题（CSS 修改）

版本 v2.5 - 2020年7月31日

新增：IT 解决方案落地页
新增：企业商务页面
新增：邮件收件箱落地页
赛事资讯
球队分析
精彩视频
用户指南
常见问题
更新日志
社区论坛论坛主题论坛评论
赛事研究全部赛事赛事详情
新增：新的博客详情页
新增：新的关于我们页面
新增：新的公司历史页面
账户管理个人资料我的收藏消息中心账单记录
修复：修复了即将上线页面的问题
修复：修复了即将上线二页面的问题
修复：修复了维护页面的问题
新增：8种优雅的配色方案

版本 v2.2 - 2020年5月26日

更新至最新Bootstrap v4.5
最新技术更新
更新至最新Material Design Icons v5.3.45
平台功能介绍
平台功能模块赛事直播赛程详情比分统计投注指南账户设置
新增保险着陆页实时预览
新增电子书着陆页实时预览
帮助中心概览常见问题使用指南联系我们
修复了一些菜单问题
菜单可轻松从中心移至右侧（基于CSS），并添加了浅色菜单（基于CSS）
修复了一些响应式问题

版本 v2.1 - 2020年4月1日

更新至最新Jquery v3.4.1
营销策略
行业解决方案
在线学习平台
通知模板注册确认重要提醒账单通知密码重置
内容发布文章列表文章列表（带侧边栏）
作品展示经典作品集作品网格瀑布流作品
身份验证登录页面注册页面找回密码
在组件页面新增了组件
更新文档
修复了一些问题

版本 v2.0 - 2020年2月5日

经典应用着陆页
SaaS平台着陆页
出行服务着陆页
在职业页面新增职位页面
在组件页面新增了组件
RTL版本支持
暗黑模式
暗黑RTL版本
修复了单页菜单中的一些问题
修复了巨型菜单中的一些问题

版本 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日

初始发布

V2.5 版本 SCSS 文件更新

SCSS 文件中的部分新增与修改：

自定义样式
组件样式
特色样式
辅助样式
首页样式
导航样式
用户中心样式
变量定义
作品集样式

注意：请替换整个深色模式 SCSS 文件及 RTL 模式 SCSS 文件。

V2.5 版本图片更新

将部分 .png 图片替换为 .svg 图片：

客户图标路径
登录图标路径
密码找回图标路径
注册图标路径
联系我们图标路径
404页面图标路径