วิธีการใช้ การจัด Layout แบบ GRID โดยใช้ Bootstrap 4 แบบเบื้องต้น
Bootstrap คืออะไร ?
Bootstrap 4 คือ Front-end Framework ที่ใช้ในการพัฒนาเว็บไซต์ส่วนการแสดงผลให้กับผู้ใช้ซึ่งสามารถเข้ามาช่วยกำหนดกรอบการทำงานของกลุ่มผู้พัฒนาเว็บไซต์ให้เป็นไปในแนวทางเดียวกัน ซึ่งสามารถรองรับได้ทุก Smart Device หรือเรียกว่า Responsive Web หรือ Mobile First โดยคำว่าคำว่า Bootstrap ในภาษาอังกฤษมักจะหมายถึง “สิ่งที่ช่วยทำให้ง่ายขึ้น” หรือ “สิ่งที่ทำได้ด้วยตัวของมันเอง”
ถ้าต้องการทำเว็บโดยใช้ Bootstrap เข้ามาช่วยนั้น สามารถทำได้ตามนี้เลย คือออ ～
ติดตั้ง Visual code
ถ้าใครที่ยังไม่ได้ติดตั้งเข้าไปดาวน์โหลดได้ที่ลิงค์นี้ด่วนเลย!!
https://code.visualstudio.com/
เริ่มต้น
เริ่มจากการเปิดโปรแกรมขึ้นมาเเล้วพิมพ์คำสั่งลัด html:5 เพื่อให้ Visual Code generate code ให้อัตโนมัติ ตัวอย่างแบบ .Gif นี้
คำสั่ง meta UTF-8 และ viewport จะสำคัญสำหรับ Bootstrap จำเป็นต้องใส่ทุกครั้ง ซึ่ง Visual Code มันก็ generate code สร้างมาให้แล้ว ง่ายเลยใช่ไหมล่ะ ?
<meta charset=”UTF-8">
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
อีกอันคือพิมพ์ว่า lorem โปรแกรม Visual Code มันจะ generate ขึ้นมาจำลองให้เลยซึ่งประโยคที่เรียกว่า lorem ให้ มันคือคำที่ไม่มีความหมาย เอามาวางไว้เฉย ๆ ว่านี่คือตัวอักษรจะเห็นในงานพวก design หรือตัวอย่างโค้ดบ่อย ๆ ที่เป็นการดีไซน์ให้เห็น สมมติข้อความตัวอย่างขึ้นมา
โดย Bootstrap 4 เป็น framework นั้นฮอตเป็นอันดับต้น ๆ ของโลกกันเลยทีเดียว เพราะว่ามันเป็น Framework ที่สามารถสร้าง responsive, mobile-first site และ application ได้อย่างน่าประทับใจ และนิยมใช้กันอย่างแพร่หลาย
ขั้นตอนต่อไปของการใช้ Bootstrap คือ
เริ่มต้นจากการดาวน์โหลด Bootstrap 4
สามารถเข้าไปวาร์ปดาว์โหลดกันได้ที่เว็บไซต์ : https://getbootstrap.com/
พอโหลด Bootstrap มาให้ copy มาไว้ในโปรเจค จะได้โฟลเดอร์ css กับ js มีไฟล์ด้านในคือ
bootstarp grid จะมีเฉพาะเรื่อง grid และ layout
bootstrap reboot จะมีฟังชันก์ใหม่ ตัวที่ยังไม่ใช่ production จริง
bootstarp.css จะเป็นแบบโค้ดสวย ๆ อ่านได้
bootstarp.min.css จะทำ minify มาแล้ว ตัด space และ ขึ้นบรรทัดใหม่ ทำให้ไฟล์เล็กลง
การจัด Layout แบบ GRID
ใน bootstrap จะใช้ระบบ GRID ในการวาง layout ต่าง ๆ
เริ่มจากใช้ div ที่มี class ชื่อว่า container (หรือจะดึง source code ตัวอย่างไปก็ได้นะ)
ด้านในจะมี div ย่อย แบ่งเป็น row col คล้ายกับตาราง
แนะนำเขียน comment เอาไว้ ซึ่งใน HTML จะใช้ <!– –>
class container จะทำให้มีพื้นที่ว่างด้านข้าง และจะเเสดงหน้าเว็บขึ้นมาแบบนี้
แต่ถ้าอยากให้ข้อความขยายเต็มจอ ไม่มีพื้นที่ว่างด้านข้างสามารถใช้ฟังก์ชัน container-fluid ได้
<div class=”container-fluid”>
คราวนี้ดูเบื้องต้นกันไปแล้ว คราวนี้มาลองเล่น grid รูปแบบ flexbox กัน
คนที่เคยใช้ Bootstrap หรือ CSS Framework อื่น ๆ คงจะคุ้นชินกับ Grid system ที่มี 12 column ใน 1 row ซึ่งในส่วนที่ Grid ก็ใช้จัด layout ได้ดีเช่นกัน บางอย่างที่ Grid ทำได้ อาจจะทำได้ดีกว่า Flexbox เช่น การ list item ในแต่ละบรรทัด มี item ได้ 5 items แต่ Grid จะทำได้ง่ายกว่าเมื่อก่อน เพราะเมื่อเราจะจัด layout ของหน้าเว็บไซต์ในส่วนต่าง ๆ ด้วย table หรือ float เพื่อจัดให้มันอยู่ในตำแหน่งที่เราต้องการ ซึ่ง flexbox เกิดมาเพื่อการจัด layout ทำให้จัดการได้ดีพอสมควรเลย
และ flexbox หรือ flexible box มีการออกแบบมาให้รองรับกับอุปกรณ์ต่าง ๆ ได้อย่างหลากหลาย และมีประสิทธิภาพ
Grid options
หน่วยที่ใช้กำหนดขนาดของส่วนประกอบใน bootstrap จะนิยมใช้เป็น em หรือ rem ส่วนหน่วย px จะถูกนิยมใช้กำหนด breakpoint (กำหนดความกว้างของ grid) ที่เป็นแบบนี้เพราะว่าความกว้างของ viewport ใช้หน่วย px นั้นเอง
Auto-layout columns
อีกหนึ่งของ flexbox นั้นก็คือการปรับความกว้าง columns ให้เท่ากันความกว้างขั้นต่ำในแต่ละ breakpoint ที่เราต้องการของ columns แต่ละอันก็จะมีความกว้างเท่ากันทันที ดังนี้
Setting column width
นอกจากนั้นเรายังสามารถปรับขนาดความกว้างของ columns ได้โดยใช้ “col ”(ความกว้าง grid) ดังนี้
Variable width content
เราสามารถใช้ “col- {breakpoint}-auto” เพื่อให้ columns มีความยืดหยุ่นตามความกว้างของเนื้อหาได้
นี่ก็เป็นการสร้างเว็บโดยใช้ระบบ grid แบบ Basic ได้ลองทำแล้วเป็นอย่างไรกันบ้าง ? รู้สึกว่าจัด layout ในงานได้ง่ายมากขึ้นใช่ไหม ? จริง ๆ แล้ว Bootstrap สามารถทำได้อีกหลายหลากมาก สามารถไปหาความรู้เพิ่มเติม และลองไปทดสอบกับโปรเจ็คตัวเองกันได้น้าาา
บทความต่อไปจะมานำเสนอเป็นเรื่องอะไรกันนั้น ต้องรอติดตามกันต่อไปนะขอรับ วันนี้ขอลาไปก่อนล่ะ ฟิ้ววววว ～
