spin jquery bs3

SPIN HTML/CSS - ตอนนี้ฟรี!

บทนำ

ธีมผู้ดูแลระบบ/แดชบอร์ด SPIN พร้อมการออกแบบที่เรียบง่ายและ Dark UI ที่เป็นนวัตกรรมใหม่จะช่วยให้คุณสร้างแอปพลิเคชันที่น่าทึ่งและทรงพลังพร้อม UI ที่ยอดเยี่ยม ออกแบบมาอย่างสมบูรณ์แบบสำหรับการใช้งานขนาดใหญ่ พร้อมเอกสารประกอบโดยละเอียดทีละขั้นตอน สร้างขึ้นตามมาตรฐานและคำแนะนำล่าสุด ขับเคลื่อนโดย Bootstrap framework 3.x ซึ่งปัจจุบันเป็นหนึ่งในเฟรมเวิร์กที่ได้รับความนิยมมากที่สุดในโลก

การติดตั้ง

1. ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง Ruby แล้ว (Ruby DevKit บน Windows ด้วย), 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 เพื่อเริ่ม Jekyll ด้วยตัวติดตาม HTML/JS/Styles หากต้องการเริ่มดูเฉพาะไฟล์ 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 ซึ่งเพิ่มคอนเทนเนอร์เฉพาะให้กับ navbar และส่วนท้าย และ title ที่แทรกเข้าไปใน head และสามารถใช้ได้ในเนื้อหาผ่านทาง {{ 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. หากต้องการเข้าถึงหน้านี้ คุณสามารถใช้ URL นี้: localhost:3000/new-page/

แหล่งที่มาวานิลลา (แสงแอปแบบเต็ม)

1. ในโฟลเดอร์หลักให้ป้อน Terminal gulp build:vanilla
2. ไปที่โฟลเดอร์ cd /site
3. จากนั้น npm install
4. bower install ถัดไป
5. gulp build ถัดไป
6. แหล่งที่มาพร้อมอยู่ในโฟลเดอร์ /dist

แหล่งที่มาของเมล็ดพันธุ์ (Starter Dev) (_inludes/starter...)

1. ในโฟลเดอร์หลักให้ป้อน Terminal gulp build:seed
2. แหล่งที่มาพร้อมอยู่ในโฟลเดอร์ /starter

GIT รีเซ็ต

1. ไปที่โฟลเดอร์ที่มีโปรเจ็กต์ cd /your_catalog
2. เข้าสู่ git reset --hard origin/master
3. ดึงผ่าน Github Dekstop

ตัวเลือกใหม่ของ Faker

1. ตัวอย่าง: 25 - 07 - 2016 - 12:03 น. (12 ชม.) <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>