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>