spin jquery bs3

SPIN HTML/CSS - 现在免费！

简介

SPIN 管理/仪表板主题具有简约的设计和创新的深色 UI，将让您构建一个具有出色 UI 的令人惊叹且功能强大的应用程序。专为大规模应用而设计，并附有详细的分步文档。它是根据最新的标准和建议构建的。它由 Bootstrap 框架 3.x 提供支持，该框架是目前世界上最流行的框架之一。

安装

1. 确保您安装了 Ruby（Windows 上也有 Ruby DevKit）、Jekyll gem、Bundler gem（ gem install bundler ）、Node、Bower 和 Gulp
2. 克隆此存储库git clone https://github.com/0wczar/spin.jekyll.git
3. 在终端中导航到克隆的存储库目录
4. 运行npm install以安装 NPM 软件包
5. 运行bower install以安装 Bower 软件包
6. 运行gulp bower将 Bower 包附加到 Jekyll
7. 运行bundler来安装所需的 Gems
8. （选项）运行gulp以使用 HTML/JS/Styles 观察器启动 Jekyll。要开始仅观看 HTML 文件，请运行gulp jekyll

添加 Bower 组件

1. 在终端中导航到项目目录
2. 运行bower install <package-name> --save例如bower install jquery --save 。 Bower 软件包列表可以在这里找到 - http://bower.io/search/
3. 安装完成后，运行gulp bower来附加新库。

添加插件 Less/Sass

1. 插件 Sass 文件应放置在/src/assets/scss/<plugin-name>中
2. 编译后的CSS应放置在/src/assets/stylesheets/<plugin-name>.css中
3. 此生成的自定义样式应链接在/src/_includes/head.html中，例如<link rel="stylesheet" href="assets/stylesheets/select2-bootstrap.css">

创建新页面

1. 新的 HTML 页面应添加到/src文件夹，例如/src/new-page.html
2. 新页面应该在顶部有所需的变量： layout: default 。其他可用的变量有： bodyClasses ，它向 body 标签添加适当的类， defaultContainer ，它向导航栏和页脚添加特定容器，以及注入 head 的title ，可以通过{{ page.title }}在内容中使用。例子：
3. 添加的页面应在侧边栏中链接，如下所示：示例链接： <li class="{% if page.url == "/default.html" %}active{% endif %}"><a href="/default.html"><span class="nav-label">Default</span></a></li>
4. 要访问此页面，您可以使用以下网址： localhost:3000/new-page/

Vanilla Source（完整应用程序灯）

1. 在主文件夹中输入终端gulp build:vanilla
2. 转到文件夹cd /site
3. 然后npm install
4. 下一个bower install
5. 下一个gulp build
6. 文件夹/dist中提供现成的源

种子源（入门开发）（_inludes/starter...）

1. 在主文件夹中输入终端gulp build:seed
2. 文件夹/starter中提供了现成的源代码

重置GIT

1. 使用项目cd /your_catalog转到文件夹
2. 输入git reset --hard origin/master
3. 通过 Github Dekstop 拉取

Faker新选项

1. 示例：2016 年 7 月 25 日 - 12:03 (12h) <span data-faker="{{date.day}} {{date.monthDigit}} {{date.year}} {{date.time}}"></span>
2. 示例：月份：一月、二月、三月等... data-faker="[[date.monthShort]]"
3. 示例： 天数：周一、周二、周三等... data-faker="[[date.weekdayShort]]"
4. 示例：1% - 100%： <span data-faker="[[random.percentage]]"><span>
5. 示例：0% - 100.0%： <span data-faker="[[random.percentagePoint]]"><span>