เริ่มต้นด้วย Bulma

Sep 12, 2025

วิธีการ

(เครดิตภาพ: BULMA)

ต้องการเริ่มต้นใช้ blama หรือไม่ คุณอยู่ในสถานที่ที่เหมาะสม BULMA เป็นกรอบงาน CSS ยอดนิยมที่มีระบบกริด Flexbox ที่เรียบง่าย มันแตกต่างจากกรอบอื่น ๆ โดยใช้วิธีการที่เบากว่าและไม่รวมถึง JavaScript ใด ๆ - ออกจากการตัดสินใจนั้นขึ้นอยู่กับนักพัฒนาอย่างสิ้นเชิง (เพื่อสำรวจตัวเลือกอื่น ๆ ดูการเลือกของเรา สุดยอด CSS Frameworks .

ในบทช่วยสอนนี้เราจะสาธิตวิธีการติดตั้ง BULMA และสร้างเว็บไซต์ด้วยชั้นเรียนต่าง ๆ เพื่อพิสูจน์ว่าคลาสที่หลากหลายอยู่ใน BULMA หน้าบทช่วยสอนทั้งหมดได้รับการสร้างขึ้นโดยไม่ต้องเขียน CSS เดียว ต้องการตัวเลือกอื่น ๆ ? ลองที่ยอดเยี่ยม สร้างเว็บไซต์ . และเพื่อให้แน่ใจว่าไซต์ของคุณทำงานได้ดีที่สุดให้เลือกที่เหมาะสม เว็บโฮสติ้ง บริการ.

คลิกเพื่อดาวน์โหลดไฟล์การสอน

Generate flash sale — (เครดิตรูปภาพ: ในอนาคต)

สร้าง CSS เป็นงานเว็บที่ร้อนแรงที่สุดในเมือง จาก 20-22 ก.ย. คุณสามารถรับตั๋วสำหรับราคาครึ่งหนึ่งโดยใช้รหัส flashsale5 คลิกที่ภาพเพื่อหาข้อมูลเพิ่มเติม

01. เริ่มต้นใช้งาน

สร้างไดเรกทอรีใหม่และภายในสร้าง index.html ไฟล์. เปิดไฟล์นี้ในตัวแก้ไขโค้ดและสร้างเอกสาร HTML เริ่มต้นอย่างง่ายด้วย DOCTYPE HTML และแท็ก ViewPort ที่ตอบสนองต่อ

 & lt;! Doctype HTML & GT;
& lt; html & gt;
& lt; หัว & gt;
& lt; meta name = "viewport" เนื้อหา =
"ความกว้าง = ความกว้างของอุปกรณ์, เริ่มต้น - 1" & gt;
& lt; ชื่อ & gt; ชื่อหน้า & lt; / ชื่อ & gt;
& lt; / head & gt;
& lt; ร่างกาย & gt;
& lt; / body & gt;
& lt; / html & gt;

02. ติดตั้ง BULMA

การใช้ Bulma ออกกล่องเร็วเท่าที่เพิ่มไฟล์ CSS เดียว การใช้ CDN เพิ่มลิงค์ใน HTML หากจำเป็นต้องเปลี่ยนตัวแปรและควบคุมกรอบงานได้มากขึ้น การติดตั้ง NPM BULMA สามารถใช้งานได้ (ดู เอกสารเต็มรูปแบบ . สำหรับประสบการณ์เต็มรูปแบบตัวอักษรที่ยอดเยี่ยม 5 ควรรวมอยู่ด้วย

 & lt; link rel = "stylesheet" href = "https://cdnjscloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" & gt;
& lt; สคริปต์ Defer SRC = "https://use.fontawesome.com/releases/v5.3.1/js/all.js" & gt; & lt; / script & gt;

03. สร้างหน้า

ภายในแท็กร่างกายสร้างองค์ประกอบส่วนและ div กับชั้นเรียน ภาชนะ . ภายในคอนเทนเนอร์สร้าง H1 กับคลาส หัวข้อ จากนั้นย่อหน้ากับชั้นเรียน คำบรรยาย . สำหรับตอนนี้ป้อน 'Hello World' ในชื่อและข้อความบางส่วนลงในย่อหน้า ตอนนี้เรามีเทมเพลตเริ่มต้นขั้นพื้นฐานสำหรับ BULMA

 & lt; ส่วนคลาส = "ส่วน" & gt;
& lt; div class = "คอนเทนเนอร์" & gt;
& lt; h1 class = "ชื่อ" & gt;
สวัสดีชาวโลก
& lt; / h1 & gt;
& lt; p class = "subtitle" & gt;
นี่คือการเริ่มต้นขั้นพื้นฐาน
แม่แบบสำหรับ BULMA
& lt; / p & gt;
& lt; / div & gt;
& lt; / section & gt;

04. สร้างแถบฮีโร่ชั้นนำ

ทำส่วนใหม่เหนือก่อนหน้านี้และแทนที่จะเรียน มาตรา ให้ชั้นเรียน ฮีโร่ . คลาสฮีโร่ช่วยให้การสร้างแบนเนอร์เต็มความกว้างเต็มรูปแบบด้วยตัวเลือกที่หลากหลายที่ควบคุมความสูง ภายในส่วนใหม่นี้สร้าง DIV กับคลาส ฮีโร่ร่างกาย แล้ว ภาชนะ สิ่งนี้จะเก็บเนื้อหา

 & lt; ส่วนคลาส = "ฮีโร่" & GT;
& lt; div class = "hero-body" & gt;
& lt; div class = "คอนเทนเนอร์" & gt; ... & lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;

05. เพิ่มชื่อเรื่องและคำบรรยาย

ภายใน DIV คอนเทนเนอร์เพิ่มแท็ก H1 และ H2 กับคลาส หัวข้อ และ คำบรรยาย . เหล่านี้เป็นคลาสการพิมพ์ที่จะเพิ่มขนาดของเนื้อหา Bulma ฉลาดที่จะรู้ว่าเมื่อมีการรวมชื่อเรื่องและคำบรรยายและจะทำให้พวกเขาเข้าใกล้กันมากขึ้น

06. เพิ่มการสาดสี

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

 & lt; section class = "hero is-primary" & gt;

07. แยกเนื้อหาออกเป็นคอลัมน์

พื้นที่เนื้อหาแรกของเว็บไซต์แบ่งออกเป็นสองคอลัมน์ สร้างส่วนใหม่ด้วยส่วนคลาสและเพิ่มคอนเทนเนอร์ ในการตั้งค่าคอลัมน์การเพิ่ม DIV ด้วย คอลัมน์ ชั้นเรียน แต่ละคอลัมน์ถูกเพิ่มภายในคอนเทนเนอร์หลัก คอลัมน์จะอวกาศตัวเองอย่างเท่าเทียมกันในพื้นที่ว่างที่มีช่องว่างขนาดเล็กระหว่างเว้นแต่ระบุไว้

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

 & lt; ส่วนคลาส = "ส่วน" & gt;
& lt; div class = "คอนเทนเนอร์" & gt;
& lt; div class = "คอลัมน์คือ-vcentered" & gt;
& lt; div class = "คอลัมน์" & gt;
...
& lt; / div & gt;
& lt; div class = "คอลัมน์" & gt;
...
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / section & gt;

08. สร้างภาพที่ตอบสนองได้

Bulma: responsive images — (เครดิตภาพ: BULMA)

คอลัมน์ที่สองจะมีภาพ ห่อภาพในองค์ประกอบตัวเลขและถ้าเป็นไปได้ให้ตัวเลขคลาสของอัตราส่วนภาพของภาพ ในตัวอย่าง 16 ถูกใช้แล้ว (ดู รายการอัตราส่วนที่มีอยู่ทั้งหมด .

 & lt; div class = "คอลัมน์" & gt;
& lt; รูปคลาส = "Image IS-16BY9" & GT;
& lt; img src = "img / dog.jpg" & gt;
& lt; / รูป & gt;
& lt; / div & gt;

09. แนะนำการกระทำด้วยปุ่ม

คลาสปุ่มสร้างปุ่มสีสันสดใสและสามารถใช้ได้ & lt; a & gt; องค์ประกอบหรือ & lt; ปุ่ม & gt; องค์ประกอบใน Forms.Add สองปุ่มไปยังคอลัมน์แรกและใช้ตัวดัดแปลงสีกับพวกเขา หากใช้มากกว่าหนึ่งปุ่มห่อไว้ใน DIV ด้วยคลาส ปุ่ม ซึ่งแก้ไขช่องว่างและช่วยให้แอปพลิเคชันของคลาสเป็นกลุ่ม

 & lt; div class = "ปุ่ม" & gt;
& lt; class = "ปุ่ม IS-INFO" & GT;
ค้นหาเพิ่มเติม & lt; / a & gt;
& lt; ปุ่ม class = "เป็นอันตราย" & gt;
ซื้อตอนนี้ & lt; / a & gt;
& lt; / div & gt;

10. สร้างเนื้อหาที่บรรจุในกล่อง

Bulma: boxed content — (เครดิตภาพ: BULMA)

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

 & lt; div class = "คอลัมน์" & gt;
& lt; div class = "กล่อง" & gt;
ทดสอบ
& lt; / div & gt;
& lt; / div & gt;

11. ใช้กล่องที่โดดเด่น

Bulma ผสานรวมกับฟอนต์ที่ยอดเยี่ยม 5 แต่เข้ากันได้กับไลบรารีแบบอักษรทั้งหมดและมีคลาสที่จะเรียกไอคอนที่มีมากที่สุด ภายในแต่ละกล่องเพิ่มคอนเทนเนอร์เนื้อหาตามด้วยองค์ประกอบช่วงที่มีชั้นเรียน ไอคอน . ภายในช่วงใช้ & lt; i & gt; องค์ประกอบที่จะเรียกคลาสที่ต้องการสำหรับไอคอนที่ต้องการ ไอคอนมีสีแบบเดียวกับข้อความ

 & lt; div class = "เนื้อหา" & gt;
& lt; span class = "ไอคอน" & gt;
& lt; i class = "FAS FA-LG FA-HOME
มีข้อความ - ความสำเร็จ "& GT; & LT; / I & GT;
& lt; / span & gt;
& lt; div class = "ชื่อคือ -ize-6" & gt; & lt; / div & gt;
& lt; div class = "subtitle is-size-6" & gt; ... & lt; / div & gt;
& lt; / div & gt;

12. กล้าหาญ

สร้างส่วนฮีโร่สองคอลัมน์ใหม่ที่ด้านล่างของหน้าให้ IS-Info ชั้นเรียนไปที่ส่วน สำหรับผลที่น่าสนใจนอกจากนี้ยังใช้ เป็นตัวหนา ชั้นเรียนสำหรับส่วนนี้เพื่อการไล่ระดับสีที่ละเอียดอ่อน ตัวดัดแปลงนี้ใช้งานได้กับเจ็ดสีหลักทั้งหมด

13. เปลี่ยนระดับ

ระดับเป็นวิธีที่ยอดเยี่ยมในการให้แน่ใจว่าองค์ประกอบมีศูนย์กลางอยู่ในแนวตั้งในแถว ภายในส่วนใหม่ที่ด้านล่างของหน้าเพิ่ม DIV ด้วยระดับระดับและรังภายในรายการสี่ระดับ เนื้อหาที่เพิ่มเข้ามาในรายการระดับจะถูกจัดแนวตั้งในแนวตั้ง

& lt; div class = "ระดับ" & gt;
& lt; div class = "รายการระดับ has-text-centered" & gt;
...
& lt; / div & gt;
& lt; div class = "รายการระดับ has-text-centered" & gt;
...
& lt; / div & gt;
& lt; / div & gt;

14. เพิ่มและควบคุมแบบฟอร์ม

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

 & lt; div class = "field" & gt;
& lt; div class = "control has-icons-left
มีไอคอน - ขวา "& GT;
& lt; อินพุต class = "อินพุต" type = "อีเมล"
ตัวยึดตำแหน่ง = "อีเมลของคุณ" & GT;
& lt; span class = "ไอคอนเล็ก
ถูกทิ้ง "& gt;
& lt; i class = "FAS FA- ซองจดหมาย" & gt; & lt; / i & gt;
& lt; / span & gt;
& lt; / div & gt;
& lt; / div & gt;

15. ให้ข้อเสนอแนะแก่ผู้ใช้

เมื่อส่งแบบฟอร์มแล้วควรส่งข้อความถึงผู้ใช้เพื่อให้พวกเขารู้ว่าเกิดอะไรขึ้นต่อไป แม้ว่า BULMA จะไม่สามารถควบคุมได้เมื่อข้อความนี้จะปรากฏขึ้นส่วนหน้าสามารถสร้างได้ด้วยคลาสข้อความ

 & lt; บทความคลาส = "ข้อความ IS-INFO" & GT;
& lt; div class = "ส่วนหัวข้อความ" & gt;
& lt; p & gt; ขอบคุณ! & lt; / p & gt;
& lt; / div & gt;
& lt; div class = "ข้อความ - ร่างกาย" & gt;
... & lt; / div & gt;
& lt; / บทความ & gt;

16. เพิ่มส่วนท้าย

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

 & lt; Footer Class = "Footer" & GT;
& lt; div class = "เนื้อหามีข้อความเป็นศูนย์กลาง" & gt;
& lt; p & gt; ... & lt; / p & gt;
& lt; / div & gt;
& lt; / footer & gt;

17. ปรับแต่งตัวแปร

โครงการส่วนใหญ่เกินต้นแบบจะมีข้อกำหนดในการทำงานกับแนวทางแบรนด์และสีสัน ในทำนองเดียวกันมันปลอดภัยที่จะสมมติว่านักออกแบบจะต้องเปลี่ยนแบบอักษรสีหรือแง่มุมอื่น ๆ ของ Bulma ส่วนสำคัญของ Bulma คือสามารถปรับแต่งและแยกส่วนได้ ไม่เพียงสามารถนำเข้าโมดูลได้เท่านั้น แต่สามารถเปลี่ยนตัวแปร SASS 415 ตัวได้ภายในกรอบ

การใช้ตัวแปรหมายถึงการตั้งค่าสีใหม่เป็นหลักจะเปลี่ยนสีนั้นในกรอบ Bulma ทั้งหมดสำหรับโครงการนั้น การตั้งค่านี้อาจเป็นเรื่องยุ่งยากในตอนแรก แต่มีการให้คำแนะนำ สามวิธีที่แตกต่างกัน ในเอกสารประกอบ

บทความนี้ได้รับการตีพิมพ์ครั้งแรกในฉบับที่ 289 ของนิตยสารออกแบบเว็บสร้างสรรค์ นักออกแบบเว็บไซต์ . ซื้อปัญหา 289 หรือ สมัครสมาชิกที่นี่ .

อ่านเพิ่มเติม:

5 กรณีการศึกษาการออกแบบเว็บที่สร้างแรงบันดาลใจ
เครื่องมือออกแบบ UI ที่ดีที่สุด
การออกแบบเว็บไซต์ Master Minimalist

เริ่มต้นด้วย Bulma

01. เริ่มต้นใช้งาน

02. ติดตั้ง BULMA

03. สร้างหน้า

04. สร้างแถบฮีโร่ชั้นนำ

05. เพิ่มชื่อเรื่องและคำบรรยาย

06. เพิ่มการสาดสี

07. แยกเนื้อหาออกเป็นคอลัมน์

08. สร้างภาพที่ตอบสนองได้

09. แนะนำการกระทำด้วยปุ่ม

10. สร้างเนื้อหาที่บรรจุในกล่อง

11. ใช้กล่องที่โดดเด่น

12. กล้าหาญ

13. เปลี่ยนระดับ

14. เพิ่มและควบคุมแบบฟอร์ม

15. ให้ข้อเสนอแนะแก่ผู้ใช้

16. เพิ่มส่วนท้าย

17. ปรับแต่งตัวแปร

วิธีการ - บทความยอดนิยม

สร้าง UI ควบคุมด้วยเสียง

ใช้พื้นที่เชิงลบเพื่อวาดมือที่ดีกว่า

วิธีการสร้างหุ่นยนต์ Papercraft

วิธีการวาดจมูก

วิธีการสร้างสีที่เปล่งประกายด้วยสีน้ำมัน

Power บล็อกโดยใช้ WordPress API

ทาสีแนวสัตว์เลี้ยงขนยาว

วิธีการปรับปรุงประสิทธิภาพของไซต์อีคอมเมิร์ซ

หมวดหมู่