การใช้งาน Bootstrap 5

Bootstrap 5 การใช้งาน Utilities / Helper Classes

Bootstrap 5 นำเสนอระบบ Utilities / Helper Classes ที่มีความยืดหยุ่นและง่ายต่อการใช้งาน ซึ่งออกแบบมาให้สามารถปรับแต่ง UI ได้อย่างรวดเร็วโดยไม่จำเป็นต้องเขียน CSS เพิ่มเอง Utilities เหล่านี้ครอบคลุมทั้งการจัดการ layout, การจัดการ spacing, การควบคุมสี, ขนาดตัวอักษร, และอื่นๆ

Spacing (Margin และ Padding)

Utilities สำหรับจัดการกับระยะห่างใน Bootstrap 5 คือการใช้ m สำหรับ margin และ p สำหรับ padding โดยตามด้วยขนาด เช่น 0, 1, 2, 3, 4, และ 5 ซึ่งกำหนดตามค่า rem และเพิ่มลักษณะเช่น -auto สำหรับการจัดการตำแหน่งอัตโนมัติ

ตัวอย่าง

HTML
<div class="p-3 mb-2 bg-primary text-white">Padding 3 และ Margin-bottom 2</div>

ในตัวอย่างนี้ ใช้ p-3 เพื่อเพิ่ม padding รอบ ๆ box ทั้งหมด 1rem และ mb-2 เพื่อลดระยะห่าง margin ด้านล่างเป็น 0.5rem

Text Alignment

การจัดตำแหน่งของข้อความสามารถใช้ class ที่เป็น text-start, text-center, และ text-end สำหรับจัดตำแหน่งซ้าย กลาง และขวา นอกจากนี้ยังสามารถปรับใช้ใน viewport ที่ต่างกันได้ เช่น text-md-center เพื่อจัดกลางในหน้าจอขนาดกลางขึ้นไป

ตัวอย่าง

HTML
<p class="text-center">ข้อความนี้จัดอยู่ตรงกลาง</p>
<p class="text-md-end">ข้อความนี้จะจัดอยู่ด้านขวาในหน้าจอขนาดใหญ่</p>

Display

การจัดการการแสดงผลขององค์ประกอบต่างๆ สามารถใช้ d-{value} เช่น d-block, d-inline, d-none, d-flex สำหรับการจัดการ display property ขององค์ประกอบได้อย่างง่ายดาย

ตัวอย่าง

HTML
<div class="d-none d-md-block">
  ข้อความนี้จะแสดงเฉพาะในหน้าจอขนาดกลางขึ้นไป
</div>

ในตัวอย่างนี้ d-none จะซ่อนองค์ประกอบในหน้าจอเล็ก และ d-md-block จะทำให้องค์ประกอบปรากฏในหน้าจอขนาดกลางขึ้นไป

Sizing

Bootstrap มี utilities ที่ช่วยในการจัดการขนาดขององค์ประกอบ เช่น การควบคุมความกว้าง (w-{percentage}) และความสูง (h-{value}) ที่สามารถใช้ได้ในระดับ 25%, 50%, 75%, 100% หรือใช้ auto เพื่อให้ระบบจัดการขนาดเอง

ตัวอย่าง

HTML
<img src="image.jpg" class="w-50 h-auto" alt="ตัวอย่างรูป">

ในตัวอย่างนี้ w-50 จะกำหนดให้รูปมีความกว้าง 50% ของ container และ h-auto จะให้ความสูงปรับตามความกว้างของรูป

Flexbox

Bootstrap 5 สนับสนุนการใช้ Flexbox ผ่านทาง utilities d-flex, align-items-{value}, justify-content-{value} และอีกมากมาย เพื่อช่วยในการจัดตำแหน่งและจัด layout ขององค์ประกอบ

ตัวอย่าง

HTML
<div class="d-flex justify-content-between">
  <div>Left</div>
  <div>Right</div>
</div>

ในตัวอย่างนี้ การใช้ d-flex ทำให้ container ใช้ Flexbox layout และ justify-content-between ทำให้ช่องว่างระหว่างองค์ประกอบซ้ายและขวาถูกจัดแบบ space-between

Background และ Border

Bootstrap มี utilities สำหรับการจัดการ background และ border เช่น bg-{color} เพื่อกำหนดสีพื้นหลัง และ border, border-{side}, border-{color} สำหรับการกำหนดเส้นขอบ

ตัวอย่าง

HTML
<div class="bg-success text-white border border-danger">
  ข้อความพื้นหลังสีเขียวและขอบสีแดง
</div>

ในตัวอย่างนี้ ใช้ bg-success เพื่อกำหนดสีพื้นหลังเป็นสีเขียว และ border-danger เพื่อกำหนดสีขอบเป็นสีแดง

Position

สำหรับการควบคุมการจัดวางตำแหน่ง Bootstrap มี utilities สำหรับการจัดตำแหน่ง เช่น position-relative, position-absolute, และ position-fixed ซึ่งทำงานควบคู่กับ top, right, bottom, และ left

ตัวอย่าง

HTML
<div class="position-relative">
  <div class="position-absolute top-0 end-0">
    มุมขวาบน
  </div>
</div>

ในตัวอย่างนี้ position-absolute จะทำให้ข้อความถูกวางตำแหน่งแบบ absolute และกำหนดให้ตำแหน่งอยู่ที่มุมขวาบน

Visibility

Bootstrap 5 ยังมี utilities สำหรับควบคุมการแสดงผลขององค์ประกอบ เช่น visible, invisible ซึ่งช่วยให้สามารถควบคุมว่าองค์ประกอบจะแสดงผลหรือไม่ในหน้าจอต่างๆ

ตัวอย่าง

HTML
<div class="invisible">ข้อความนี้จะไม่ถูกมองเห็น</div>

การใช้ invisible ในตัวอย่างนี้ทำให้องค์ประกอบยังคงอยู่ใน document แต่ไม่สามารถมองเห็นได้

สรุป

Utilities / Helper Classes ใน Bootstrap 5 ช่วยให้การปรับแต่ง UI เป็นเรื่องง่ายและรวดเร็วขึ้นโดยไม่จำเป็นต้องเขียน CSS เอง แค่ใช้ class ที่เตรียมไว้ก็สามารถจัดการ layout, spacing, ขนาด และการแสดงผลขององค์ประกอบได้ตามต้องการ

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ