แชร์ผ่าน

ภาพรวม Bootstrap

  • บทความ

Bootstrap เป็นกรอบงานส่วนหน้าที่ช่วยคุณออกแบบเว็บอินเทอร์เฟซด้วยส่วนประกอบ CSS และ JavaScript สำเร็จรูปสำหรับองค์ประกอบทั่วไป เช่น การนำทาง, แบบฟอร์ม และ ปุ่ม นอกจากนี้ยังมี ระบบเค้าโครงตารางที่ตอบสนอง ที่จะปรับไซต์ของคุณสำหรับอุปกรณ์ที่มีขนาดหน้าจอแตกต่างกัน เช่น โทรศัพท์และแท็บเล็ต การใช้ระบบเค้าโครงการเริ่มต้นโปรแกรม คุณสามารถสร้างไซต์เดียวที่ดูสวยงามให้กับอุปกรณ์ทั้งหมดที่ลูกค้าของคุณอาจใช้

เทมเพลต Power Pages ใช้ส่วนประกอบมาตรฐาน Bootstrap พร้อมสไตล์ที่กำหนดเองน้อยที่สุด เมื่อใช้เทมเพลตเหล่านี้ คุณสามารถเปลี่ยนธีม (แบบอักษร สี และอื่นๆ) ได้อย่างง่ายดายเพื่อให้ตรงกับแบรนด์และความชอบของคุณอย่างสม่ำเสมอทั่วทั้งไซต์ของคุณ

Power Pages รองรับ Bootstrap เวอร์ชัน 3.3.6 และ Bootstrap เวอร์ชัน 5 Bootstrap เวอร์ชัน 5 นำเสนอคุณลักษณะประสบการณ์ผู้ใช้ (UX) ที่ได้รับการปรับปรุงและส่วนประกอบใหม่ๆ เช่น หีบเพลง, offcanvas และการรองรับ RTL

สำหรับไซต์ Power Pages ใหม่ คุณจะต้อง ตั้งค่า Bootstrap เวอร์ชัน 5 ในสภาพแวดล้อมของคุณ คุณยังสามารถ ย้ายเว็บไซต์ Bootstrap เวอร์ชัน 3 ที่มีอยู่ ไปเป็นเวอร์ชัน 5 ได้ด้วย

ปรับแต่งการเริ่มต้นโปรแกรม

ในการปรับแต่งการเริ่มต้นโปรแกรม คุณสามารถเปลี่ยนค่าตัวแปรใดๆ เหล่านี้และดาวน์โหลดรุ่นการเริ่มต้นโปรแกรมที่จัดทำตามค่าที่กำหนดเองเหล่านี้ได้

พลังของตัวแปรของการเริ่มต้นโปรแกรม คือการกำหนดสไตล์ทั้งหมดในกรอบงาน ไม่ใช่แค่องค์ประกอบเดียว ตัวอย่างเช่น ตัวแปร @font-size-base ระบุขนาดเริ่มต้นของข้อความบนไซต์ของคุณ เช่น ข้อความเนื้อหา ส่วนหัว และองค์ประกอบข้อความอื่นๆ ทั้งหมด ส่วนหัว H1 อาจถูกกำหนดเป็น 300 เปอร์เซ็นต์ของ @font-size-base การกำหนดตัวแปรตัวหนึ่งนี้หมายถึงการที่คุณควบคุมเครื่องชั่งการพิมพ์ทั้งหมดขอเว็บไซต์ของคุณในลักษณะที่สอดคล้องกัน

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

เมื่อคุณดาวน์โหลดการเริ่มต้นโปรแกรมรุ่นที่กำหนดเอง จะประกอบด้วยโครงสร้างไดเรกทอรีต่อไปนี้:

css/
    |-- bootstrap.min.css 
img/
    |-- glyphicons-halflings-white.png 
    |-- glyphicons-halflings.png 
js/ 
    |-- bootstrap.min.js

ขึ้นอยู่กับแอปตัวกำหนดค่าที่คุณใช้ โครงสร้างไดเรกทอรีอาจประกอบด้วย bootstrap.min.css เท่านั้น เป็นไฟล์ที่มีการปรับแต่งของคุณ ไฟล์อื่นๆ จะเหมือนกันสำหรับรุ่นที่กำหนดเองทั้งหมดของการเริ่มต้นโปรแกรม และรวมอยู่ในเว็บไซต์ของคุณแล้ว

ขั้นตอนถัดไป

ดูเพิ่มเติม