kavlan html bootstrap
1.0.0
Kavlan เป็นเทมเพลตแผงผู้ดูแลระบบสีเข้มที่สมบูรณ์แบบเพื่อทำให้ระบบการดูแลระบบของคุณง่ายต่อการนำทางและบำรุงรักษา Kavlan สะอาด ตอบสนอง และใช้งานง่าย มอบประสบการณ์ผู้ใช้ที่จะช่วยให้คุณสร้างอินเทอร์เฟซที่ประสบความสำเร็จ และเหนือสิ่งอื่นใด ได้ฟรี!
ดูการสาธิต | ดาวน์โหลด ZIP
ความต้องการ
เริ่มต้นอย่างรวดเร็ว
หน้าเทมเพลต
ลิงค์สาธิต
คุณสมบัติหลักของเทมเพลต
โครงสร้างไฟล์เทมเพลต
แฮนด์บาร์
ข้อมูลเทมเพลต JSON
ปรับแต่งสไตล์เทมเพลต
สร้างเพจใหม่
เอกสารบูทสแตรป
เครดิต
ติดต่อเรา
หากคุณไม่ต้องการทำงานกับซอร์สโค้ดเทมเพลต (และนั่นหมายความว่าคุณจะไม่คอมไพล์หรือใช้งานเซิร์ฟเวอร์ Webpack dev) คุณไม่จำเป็นต้องติดตั้งอะไรเลย คุณสามารถนำทางไปยังโฟลเดอร์ dist และเริ่มแก้ไขไฟล์ได้
นักพัฒนาส่วนใหญ่จะแก้ไขซอร์สโค้ดและจะเรียกใช้ Webpack เพื่อคอมไพล์ไฟล์เทมเพลตใหม่ หากเป็นเช่นนั้น ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง Node.js แล้ว คุณสามารถดาวน์โหลดได้จากที่นี่
ดาวน์โหลดรุ่นล่าสุดหรือโคลน repo: git clone https://github.com/PixelRocket-Shop/kavlan-html-bootstrap.git
ติดตั้ง Node.js หากคุณยังไม่มีในระบบของคุณ
เปิดรูทโปรเจ็กต์ในบรรทัดคำสั่งของคุณ
รัน npm install ในบรรทัดคำสั่งของคุณ
รัน npm start เพื่อเริ่ม Webpack devserver
หากคุณต้องการคอมไพล์ไฟล์เทมเพลตอีกครั้ง (ซึ่งส่งออกไปยังโฟลเดอร์ dist) ให้รัน npm run build
เทมเพลตประกอบด้วย 6 หน้า:
แดชบอร์ด
หน้าเข้าสู่ระบบ
หน้าลงทะเบียน
ลืมรหัสผ่านหน้า
404 หน้า
หน้าว่าง
เพื่อให้โค้ดซ้ำกันน้อยที่สุด เราได้ใช้ Handlebars.js เป็นเครื่องมือสร้างเทมเพลตและบางส่วนเพื่อเพิ่มโค้ดเดียวกันลงในหน้าต่างๆ อย่างรวดเร็ว นอกจากนี้เรายังใช้ปลั๊กอินแฮนด์บาร์สำหรับข้อมูล JSON ซึ่งช่วยให้สามารถใช้ลูปและส่งออกบล็อกโค้ด HTML เดียว แทนที่จะทำซ้ำ HTML เดียวกัน
URL สาธิต
โปรดทราบว่านี่เป็นเทมเพลต HTML เท่านั้น ไม่ได้เชื่อมต่อกับฐานข้อมูล และจะไม่ทำงานโดยอัตโนมัติในระบบจัดการเนื้อหา (Wordpress ฯลฯ) คุณจะต้องรวมโค้ดของเราเข้ากับใบสมัครของคุณ
การรวม Chart.js กับแผนภูมิ 3 ประเภทที่แตกต่างกัน
สร้างด้วย Bootstrap 5
ตอบสนองอย่างเต็มที่
องค์ประกอบคำสั่งซื้อล่าสุด
แถบด้านข้างแบบยุบได้ (ยุบอัตโนมัติเมื่อปรับขนาดเบราว์เซอร์)
ส่วนประกอบการแจ้งเตือน
ส่วนประกอบอวตาร
องค์ประกอบเข้าสู่ระบบ / ลงทะเบียน
dist - เวอร์ชันที่สร้างของเทมเพลต ไปที่นี่หากคุณไม่ต้องการทำงานกับซอร์สโค้ดของเทมเพลต แต่ได้รับคำเตือน: หากคุณปรับแต่งสิ่งใด ๆ ในโฟลเดอร์นี้โดยตรง จากนั้นคอมไพล์เทมเพลตใหม่ในภายหลังโดยใช้ webpack เว้นแต่คุณจะย้ายโฟลเดอร์ dist ออกจากเทมเพลต การเปลี่ยนแปลงของคุณจะถูกแทนที่
node_modules - ไดเร็กทอรีที่ NPM ติดตั้งการพึ่งพา คุณจะไม่เห็นโฟลเดอร์นี้จนกว่าคุณจะติดตั้งเทมเพลตให้เสร็จสิ้น คุณไม่จำเป็นต้องสร้างโฟลเดอร์นี้
src - ซอร์สโค้ดเทมเพลต ไปที่นี่เพื่อปรับแต่งเทมเพลตของคุณ
src/assets - เนื้อหาเทมเพลต เช่น CSS, JS, รูปภาพ ฯลฯ
src/data - ไฟล์ข้อมูลเทมเพลต JSON เราใช้ไฟล์ JSON เหล่านี้เพื่อให้งานของคุณแทรกเนื้อหาลงในเทมเพลตได้ง่ายขึ้น
src/html - หน้าเทมเพลต ไปที่นี่เพื่อแก้ไขหน้าที่มีอยู่หรือเพิ่มหน้าใหม่
src/partials - เทมเพลตบางส่วนของแฮนด์บาร์
แฮนด์บาร์เป็นกลไกสร้างเทมเพลตที่ช่วยให้เราสามารถเก็บซอร์สโค้ดของเทมเพลตให้เป็นระเบียบและสะอาดตาที่สุดเท่าที่จะเป็นไปได้ ลดความซ้ำซ้อนของโค้ดและการใช้ฟังก์ชันตัวช่วย ช่วยให้นักพัฒนาเทมเพลตสามารถส่งออกข้อมูลจำนวนมากได้อย่างรวดเร็วโดยใช้โค้ดน้อยที่สุด คุณสามารถอ่านเพิ่มเติมเกี่ยวกับเรื่องนี้ได้ที่นี่
เปิดไฟล์ต่อไปนี้ในเทมเพลตของเรา: src/html/index.html
ประมาณบรรทัดที่ 21 คุณจะเห็นรหัสต่อไปนี้:
{{> content/breadcrumbs }}นั่นคือแฮนด์บาร์บางส่วน โค้ดนั้นบอกให้แฮนด์บาร์ดูภายในโฟลเดอร์ชื่อ content (อยู่ในโฟลเดอร์ Partials) จากนั้นให้ค้นหาไฟล์ชื่อ breadcrumbs แล้วแทรกลงในไฟล์ index.html เมื่อคอมไพล์แล้ว
มีหมายเหตุสำคัญบางประการเกี่ยวกับการใช้แฮนด์บาร์บางส่วน:
บางส่วนของเราทั้งหมดถูกเก็บไว้ภายใน src/partials อย่าวางบางส่วนไว้ที่อื่น
เราใช้ .html เป็นนามสกุลไฟล์บางส่วน นอกจากนี้เรายังได้เพิ่ม .svg เป็นนามสกุลไฟล์บางส่วนที่ถูกต้องอีกด้วย
หากคุณมีโฟลเดอร์ภายในโฟลเดอร์ภายในโฟลเดอร์บางส่วน ให้อ้างอิงเฉพาะโฟลเดอร์ที่มีบางส่วนอยู่ ดังนั้น "partials/header/navbars/navbar.html" จะถูกอ้างอิงเป็น "navbars/navbar"
อย่ารวมนามสกุลไฟล์บางส่วน หมายเหตุในตัวอย่างด้านบนว่าเราส่งออก "breadcrumbs" ไม่ใช่ "breadcrumbs.html"
ปลั๊กอิน Webpack Handlebars ที่เราใช้มาพร้อมกับยูทิลิตี้ที่มีประโยชน์มากซึ่งช่วยให้เราสามารถส่งไฟล์ JSON เป็นข้อมูลเทมเพลตได้
โปรดนำทางไปที่: src/data นี่คือที่ที่ไฟล์ JSON ข้อมูลเทมเพลตของเราอยู่ คุณสามารถแก้ไข ลบ หรือเพิ่มของคุณเองลงในโฟลเดอร์นี้ได้
ไฟล์ CSS/SASS ต้นฉบับของเทมเพลตทั้งหมดจะถูกเก็บไว้ในโฟลเดอร์เนื้อหาของเทมเพลต ไปที่ src/assets/scss เปิด theme.scss ด้วยโปรแกรมแก้ไขของคุณ
นี่คือจุดเริ่มต้นหลักของไฟล์ SASS/CSS อื่นๆ ทั้งหมด
หากต้องการสร้างหน้าใหม่ ให้นำทางในตัวแก้ไขโค้ดของคุณไปที่: src/html เพื่อให้ง่ายต่อการรับ HTML ที่ถูกต้อง ให้โคลนหน้าที่มีอยู่ เปลี่ยนชื่อไฟล์ที่สร้างขึ้นใหม่เป็น URL ที่คุณต้องการ และนั่นมัน ขณะนี้คุณมีอิสระที่จะเปิดหน้าใหม่ด้วยโปรแกรมแก้ไขโค้ด ทำการเปลี่ยนแปลง จากนั้นจึงบันทึกไฟล์ ออกจากเซิร์ฟเวอร์ผู้พัฒนา Webpack และรีสตาร์ทเพื่อให้เพจปรากฏขึ้น
Bootstrap มีไซต์เอกสารที่ครอบคลุมอยู่แล้วซึ่งจะแนะนำคุณในการตั้งค่าและใช้งานคุณสมบัติ Bootstrap เริ่มต้นทั้งหมด Bootstrap 5 ได้รับการบูรณาการอย่างสมบูรณ์กับซอร์สโค้ดของเทมเพลตของเรา โปรดดูไซต์เอกสารของ Bootstrap ก่อนสำหรับคุณสมบัติเริ่มต้นของ Bootstrap: เยี่ยมชมไซต์ Doc ของ Bootstrap
บูทสแตรป
แผนภูมิ js
Unsplash
เพกเซล
Pixabay
Simplebar.js
คุณสามารถค้นหาเว็บไซต์ของเราได้ที่นี่หรือส่งอีเมลถึงเราที่ [email protected]
