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 มีเมนูการนำทางแบบแท็บที่มีสไตล์ที่แตกต่างกันเพื่อแสดงเนื้อหา