Bulma - คู่มือฉบับย่อ

Bulma คืออะไร?

Bulma เป็นเฟรมเวิร์ก CSS แบบโอเพ่นซอร์สเรียบง่ายและทันสมัยซึ่งขึ้นอยู่กับโมดูลflexbox (ใช้สำหรับการพัฒนาโครงสร้างเค้าโครงที่ตอบสนอง)

ประวัติศาสตร์

Bulma เผยแพร่ในปี 2559 และจัดจำหน่ายภายใต้ใบอนุญาตของ MIT Bulma เวอร์ชันปัจจุบันคือ 0.7.1 เปิดตัวเมื่อวันที่ 18 เมษายน 2018

ทำไมต้องใช้ Bulma?

Bulma เป็นเรื่องง่ายมากที่จะเรียนรู้และตั้งค่า มันถูกสร้างขึ้นด้วยSASSและหารด้วย 39 .sassไฟล์ โค้ดสามารถปรับแต่งได้อย่างง่ายดายโดยแบ่งเป็นไฟล์แยกต่างหากและอนุญาตให้ปรับแต่งส่วนของแอปพลิเคชันเพื่อให้ได้ผลลัพธ์ที่คาดหวัง

คุณสมบัติ

• เป็นเฟรมเวิร์ก CSS ที่ทันสมัยและมีน้ำหนักเบาซึ่งใช้ Flexbox

• ประกอบด้วยรูปแบบแรกสำหรับอุปกรณ์เคลื่อนที่ในไฟล์เดียวแทนที่จะอยู่ในไฟล์แยกกัน

• สามารถปรับแต่งและโมดูลาร์ได้

ข้อดี

• มีการออกแบบที่ตอบสนองสำหรับเดสก์ท็อปแท็บเล็ตและโทรศัพท์มือถือ

• เป็นเฟรมเวิร์ก CSS ที่บริสุทธิ์เพื่อให้คุณสามารถรวมกับเฟรมเวิร์ก JavaScript เช่น AngularJS, ReactJS เป็นต้น

• ใช้โค้ด HTML น้อยที่สุดซึ่งทำให้อ่านและเขียนโค้ดได้ง่าย

ข้อเสีย

• เป็นกรอบใหม่ที่ไม่ใหญ่เท่าชุมชน

• มีเอกสารประกอบน้อยและต้องการการปรับปรุงเล็กน้อย

• กรอบนี้ยังอยู่ในช่วงการพัฒนา

คำอธิบาย

Bulma เป็นเฟรมเวิร์ก CSS ที่ทันสมัยน้ำหนักเบาซึ่งขึ้นอยู่กับโมดูลflexbox (ใช้สำหรับการพัฒนาโครงสร้างเค้าโครงที่ตอบสนองและการออกแบบแฟนซี)

ภาพรวมของ Bulma รวมถึงการเริ่มต้นใช้งาน Bulma การตอบสนอง (คุณสามารถดูหน้าเว็บบนอุปกรณ์ต่างๆเช่นเดสก์ท็อปแท็บเล็ตและโทรศัพท์) สีฟังก์ชั่นในการกำหนดสีและค่าและส่วนผสม (กลุ่มคุณสมบัติ CSS ที่อนุญาตให้คุณ เพื่อใช้คุณสมบัติของคลาสหนึ่งสำหรับคลาสอื่น) ใน Bulma

ตารางต่อไปนี้แสดงรายการยูทิลิตี้ประเภทต่างๆที่คุณสามารถใช้เพื่อใช้ Bulma CSS -

ส.	ยูทิลิตี้และคำอธิบาย
1	เริ่มต้นกับ Bulma คุณสามารถเริ่มต้นด้วย Bulma โดยใช้ไฟล์ css ไฟล์เดียว
2	การตอบสนองและสีสัน เป็นการพัฒนาที่เป็นมิตรกับอุปกรณ์เคลื่อนที่ซึ่งสามารถใช้ร่วมกับอุปกรณ์ขนาดใหญ่ขนาดเล็กและขนาดกลางได้
3	ฟังก์ชั่นและส่วนผสม Bulma ใช้ฟังก์ชันและ mixins บางอย่างเพื่อกำหนดค่าและองค์ประกอบตามลำดับ

คำอธิบาย

ตัวปรับแต่งใน Bulma รวมถึงรูปแบบทางเลือกสำหรับองค์ประกอบโดยใช้คลาสคลาสที่ตอบสนองต่อการปรับเปลี่ยนสไตล์ตัวช่วยสีสำหรับการเปลี่ยนสีขององค์ประกอบตัวช่วยในการพิมพ์สำหรับการเปลี่ยนขนาดและสีของข้อความ

ตารางต่อไปนี้แสดงรายการโมดิฟายเออร์ประเภทต่างๆที่คุณสามารถใช้เพื่อใช้ Bulma CSS -

ส.	ตัวดัดแปลงและคำอธิบาย
1	ไวยากรณ์ของตัวปรับเปลี่ยนและตัวช่วยตอบสนอง คุณสามารถสร้างสไตล์ทางเลือกสำหรับองค์ประกอบโดยใช้คลาสตัวปรับแต่ง
2	ตัวช่วยสีและตัวอักษร คุณสามารถใช้ตัวช่วยสีเพื่อเปลี่ยนสีของข้อความหรือพื้นหลัง

คำอธิบาย

Bulma มีระบบกริดที่ตอบสนอง (การสร้างเค้าโครงหน้าผ่านชุดของแถวและคอลัมน์) ที่ปรับขนาดได้ถึง 12 คอลัมน์ภายในคอนเทนเนอร์ คอลัมน์จะจัดเรียงใหม่เมื่อขนาดอุปกรณ์หรือวิวพอร์ตเพิ่มขึ้น

ตารางต่อไปนี้แสดงรายการคอลัมน์รูปแบบต่างๆที่คุณสามารถใช้เพื่อใช้ Bulma CSS -

ส.	ประเภทคอลัมน์และคำอธิบาย
1	เค้าโครงคอลัมน์และขนาด Bulma ช่วยให้สร้างเค้าโครงคอลัมน์ได้อย่างง่ายดายโดยการเพิ่มคลาสคอลัมน์ในคอนเทนเนอร์
2	คอลัมน์การตอบสนองและการซ้อน Bulma มีคอลัมน์ที่ตอบสนองในหน้าจอประเภทต่างๆเช่นอุปกรณ์เคลื่อนที่แท็บเล็ตและเดสก์ท็อป
3	ช่องว่างของคอลัมน์และตัวเลือก คอลัมน์สร้างช่องว่างที่เท่ากันระหว่างเนื้อหาคอลัมน์

คำอธิบาย

เค้าโครง Bulma อธิบายโครงสร้างของหน้าเว็บซึ่งออกแบบโดยใช้คลาส CSS

ตารางต่อไปนี้แสดงรูปแบบต่างๆของรูปแบบที่คุณสามารถใช้เพื่อใช้ Bulma CSS -

ส.	ประเภทเค้าโครงและคำอธิบาย
1	คอนเทนเนอร์และระดับ Bulma ใช้คอนเทนเนอร์เพื่อแสดงเค้าโครงพื้นฐานและรวมเนื้อหาของไซต์
2	วัตถุสื่อ วัตถุสื่อใช้เพื่อระบุลักษณะวัตถุนามธรรมสำหรับการสร้างส่วนประกอบประเภทต่างๆ
3	แบนเนอร์ฮีโร่ Bulma มีแบนเนอร์ฮีโร่เพื่อระบุแบนเนอร์แบบเต็มความกว้างให้กับหน้าเว็บ
4	กระเบื้อง Bulma สร้างเค้าโครง 2 มิติโดยใช้คลาสองค์ประกอบเดียว

คำอธิบาย

องค์ประกอบฟอร์ม Bulma ระบุข้อมูลอินพุตของผู้ใช้โดยใช้องค์ประกอบอินพุต (เช่นช่องข้อความช่องทำเครื่องหมายปุ่มตัวเลือกและอื่น ๆ ) และส่งไปยังเซิร์ฟเวอร์เพื่อประมวลผลข้อมูล

ตารางต่อไปนี้แสดงรายการรูปแบบต่างๆที่คุณสามารถใช้เพื่อใช้ Bulma CSS -

ส.	ประเภทฟอร์มและคำอธิบาย
1	การควบคุมแบบฟอร์ม Bulma มีคลาสการควบคุมฟอร์มประเภทต่างๆสำหรับการสร้างฟอร์มต่างๆ
2	อินพุต Bulma มีช่องป้อนข้อมูลสำหรับป้อนข้อมูลผู้ใช้พร้อมกับรูปแบบต่างๆ
3	Textarea Bulma textarea ใช้เมื่อคุณต้องการอินพุตหลายบรรทัด
4	เลือก Bulma select ใช้เมื่อคุณต้องการอนุญาตให้ผู้ใช้เลือกจากตัวเลือกต่างๆ
5	ช่องทำเครื่องหมายและวิทยุ สามารถใช้ช่องทำเครื่องหมายและปุ่มตัวเลือกเมื่อคุณต้องการให้ผู้ใช้เลือกจากรายการตัวเลือกที่ตั้งไว้ล่วงหน้า
6	ไฟล์ ใช้เพื่ออัปโหลดไฟล์จากข้อมูลผู้ใช้

คำอธิบาย

Bulma มีองค์ประกอบประเภทต่างๆเช่นองค์ประกอบกล่องซึ่งสามารถใช้เป็นคอนเทนเนอร์องค์ประกอบปุ่มคอนเทนเนอร์รูปภาพเพื่อระบุรูปภาพองค์ประกอบตารางเป็นต้น

ตารางต่อไปนี้แสดงรายการรูปแบบต่างๆขององค์ประกอบที่คุณสามารถใช้เพื่อใช้ Bulma CSS -

ส.	ประเภทฟอร์มและคำอธิบาย
1	ปุ่ม องค์ประกอบปุ่มให้การโต้ตอบกับผู้ใช้ด้วยรูปแบบปุ่มที่กำหนดเอง
2	เนื้อหา Bulma จัดเตรียมคลาสเนื้อหาเพื่อใช้แท็ก HTML โดยตรง
3	กล่องและไอคอน .boxระดับกำหนดภาชนะรวมทั้งชายแดนรัศมีและ padding
4	ภาพ Bulma ใช้.imageระดับในการแสดงภาพในหน้า
5	แถบการแจ้งเตือนและความคืบหน้า Bulma ระบุข้อความแจ้งเตือนที่กำหนดไว้ล่วงหน้าเพื่อแสดงการแจ้งเตือน
6	ตาราง Bulma ห่อหุ้มองค์ประกอบสำหรับการแสดงข้อมูลในรูปแบบตาราง
7	แท็กและชื่อเรื่อง Bulma มีป้ายกำกับขนาดเล็กที่เรียกว่าแท็กเพื่อแสดงข้อมูลเพิ่มเติม

คำอธิบาย

Bulma มาพร้อมกับส่วนประกอบที่มีสไตล์ก่อนซึ่งมีดรอปดาวน์โมดอลการแบ่งหน้าแถบนำทางแท็บและอื่น ๆ เพื่อให้ผู้ใช้ได้รับประสบการณ์ในหน้านี้

ตารางต่อไปนี้แสดงรายการส่วนประกอบต่างๆที่คุณสามารถใช้เพื่อใช้ Bulma CSS -

ส.	ส่วนประกอบและคำอธิบาย
1	เบรดครัมบ์ Bulma ใช้ส่วนประกอบของเบรดครัมบ์เป็นวิธีการนำทางเพื่อระบุตำแหน่งของเพจปัจจุบันให้กับผู้ใช้ในแอปพลิเคชัน
2	การ์ด ส่วนประกอบของการ์ดแสดงเนื้อหาในกล่องเพื่อให้ดูดีขึ้น
3	หล่นลง Bulma มีเมนูแบบเลื่อนลงที่สลับได้สำหรับการแสดงลิงก์ที่เกี่ยวข้องในรูปแบบรายการ
4	ข้อความ Bulma มีบล็อกข้อความเพื่อปรับปรุงรูปลักษณ์ของเพจของคุณ
5	กิริยา Modal คือหน้าต่างลูกที่อยู่เหนือหน้าต่างหลัก
6	Navbar Navbars ทำหน้าที่เป็นส่วนหัวการนำทางสำหรับไซต์ของคุณ
7	เลขหน้า ส่วนประกอบการแบ่งหน้าจัดเตรียมชุดของลิงก์ที่เกี่ยวข้องในหลาย ๆ หน้า
8	แท็บ Bulma มีเมนูการนำทางแบบแท็บที่มีสไตล์ที่แตกต่างกันเพื่อแสดงเนื้อหา