Material Kit + การปรับเปลี่ยน

หน้านี้อธิบายรายละเอียดเกี่ยวกับสิ่งที่คุณต้องการรู้

Material Kit + การปรับเปลี่ยน

materialkit.webp
Bootstrap, การดัดแปลง, เทมเพลต

Material Kit + การปรับเปลี่ยน

Azkiya
23 กันยายน 2020

Material Kit เป็นชุด Bootstrap 4 UI ฟรีที่มีการออกแบบใหม่และสดใหม่ซึ่งได้รับแรงบันดาลใจจากการออกแบบวัสดุของ Google คุณขอมา เราก็จัดให้ ขอแนะนำให้รู้จักแนวคิดของวัสดุในชุดส่วนประกอบที่สวยงามและใช้งานง่าย นอกจากการจัดเรียงองค์ประกอบ Bootstrap แล้ว คุณจะพบหน้าตัวอย่างสามหน้าพร้อมโค้ดแบบเต็ม เพื่อช่วยคุณออกแบบโครงการต่อไปของคุณ

Material Kit ใช้ประโยชน์จากแสง พื้นผิว และการเคลื่อนไหว ใช้ตัวเลือกสีโดยเจตนา รูปภาพจากขอบถึงขอบ และรูปแบบตัวอักษรขนาดใหญ่ เลย์เอาต์ทั่วไปคล้ายกับกระดาษแผ่นหนึ่งซึ่งเรียงตามชั้นต่างๆ หลายชั้น ดังนั้นความลึกและความสม่ำเสมอจึงปรากฏชัด การนำทางหลักยังคงอยู่ทางด้านซ้ายและการดำเนินการทางด้านขวา

การออกแบบใหม่นี้มีองค์ประกอบที่เป็นผลมาจากการวิจัยหมึกและกระดาษ และวิธีที่วัตถุและวัสดุโต้ตอบกันในชีวิตจริง ผลลัพธ์ที่ได้คือชุดองค์ประกอบที่สวยงามและสม่ำเสมอ ซึ่งสามารถช่วยให้คุณเริ่มต้นโครงการต่อไปได้ Material Kit เป็นเครื่องมือที่ยอดเยี่ยมหากคุณต้องการสร้างตัวตนบนเว็บสำหรับแอป Android ของคุณและต้องมีความสอดคล้องกัน โดยทิ้งความประทับใจขององค์ประกอบที่มีความคล้ายคลึงกันทางสายตา นอกจากนี้ยังเป็นแหล่งข้อมูลที่ยอดเยี่ยมด้วยตัวมันเอง ดูสวยงาม และช่วยคุณสร้างหน้าเว็บของคุณ

screen-materialkit.webp

ต้นฉบับ

เทมเพลตนี้เคยเผยแพร่บนเว็บไซต์ [Creative Tim] แล้ว(https://www.creative-tim.com/product/material-kit#).

ใบอนุญาต

MIT - ลิขสิทธิ์ (c) 2018 CreativeTim

ลักษณะเฉพาะ

ฟีเจอร์ดั้งเดิมในเทมเพลตเวอร์ชันฟรีนี้ก่อนแก้ไขมีดังนี้ :

  • Bootstrap v4.0.0
  • อึก v4.0.3
  • อึก-autoprefixer v6.1.0
  • อึก-สะอาด v0.4.0
  • อึก-ติดตั้ง v1.1.0
  • อึก-เปิด v3.0.1
  • อึก-สาส v4.0.2
  • อึก-sourcemaps v2.6.5
  • รองรับการแจ้งเตือน
  • การ์ดสนับสนุน
  • แบบฟอร์มการสนับสนุน
  • รองรับ Google Maps
  • ทุนสนับสนุน
  • รองรับ Navs
  • รองรับ Navbar
  • รองรับตาราง
  • รองรับการพิมพ์
  • รองรับวิดีโอ
  • รองรับ Slider

เทคโนโลยีหลัก

* Bootstrap v4.0.0
* jQuery v3.2.1
* PopperJs

การดัดแปลง

  • กระบวนการแก้ไขเทมเพลตนี้มีเทคโนโลยีต่อไปนี้ในการกำหนดค่า :
    • อัปเกรด Bootstrap 4.0.0 เป็นเวอร์ชัน 4.5.2
    • ลดขนาด JS โดยใช้ Terser v4.8.0
    • ลดขนาด CSS โดยใช้ Less v3.11.3
    • ลดขนาด SCSS โดยใช้ Node Sass v4.14.1 + Dart Sass v1.26.2
    • รองรับ MAP JS
    • รองรับแหล่งที่มาของ CSS MAP
    • กำหนดค่าโดยใช้ Babel v7.10.3
    • กำหนดค่าโดยใช้ Webpack v4.43.0
    • กำหนดค่าโดยใช้ TypeScript v3.9.5
    • Transpil กับบาบิโลน
    • รองรับ SASS
    • รองรับคำนำหน้าอัตโนมัติ
    • ติดตั้งการพึ่งพา
    • การเพิ่มประสิทธิภาพของไฟล์ material-kit.css และ material-kit.scss css
    • แทนที่ไฟล์ material-kit.js ด้วย material-kit-nick.js
    • ลบไฟล์ demo.css css ถูกลบแล้ว
    • แทนที่ไฟล์ material-kit.css css และแทนที่ด้วยไฟล์ material-kit.min.css
  • เพิ่ม Bootstrap 4.5.2 . script :
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  • เพิ่มสคริปต์การพึ่งพาในโหมดการพัฒนา :
    • gulp v4.0.3
    • gulp-autoprefixer v7.0.1 (อัพเดท)
    • gulp-clean v0.4.0
    • gulp-install v1.1.0
    • gulp-open v3.0.1
    • gulp-sass v4.1.0 (อัพเดท)
    • gulp-sourcemaps v2.6.5 การเพิ่มประสิทธิภาพไฟล์ template.html การเพิ่มประสิทธิภาพไฟล์ /examples/landing-page.html การเพิ่มประสิทธิภาพไฟล์ /examples/login-page.html การเพิ่มประสิทธิภาพไฟล์ /examples/profile-page.html

การซ่อมแซมแม่แบบ

ไม่มีการแก้ไข


ดาวน์โหล

รหัสผ่าน : nickgenom.com


แสดงความคิดเห็น