การใช้งาน Bootstrap 5

Bootstrap 5 การใช้งาน Grid แบบ Stacked to horizontal

ใน Bootstrap 5 เราสามารถใช้ระบบกริด (Grid) เพื่อจัดการการแสดงผลเนื้อหาให้ปรับเปลี่ยนตามขนาดหน้าจอได้ โดยรูปแบบ “Stacked to Horizontal” เป็นการจัดการแสดงผลที่เนื้อหาจะเรียงกันในแนวตั้ง (Stacked) บนหน้าจอขนาดเล็ก (เช่น โทรศัพท์มือถือ) แต่จะเปลี่ยนเป็นการเรียงแนวนอน (Horizontal) เมื่ออยู่บนหน้าจอขนาดใหญ่กว่า (เช่น แท็บเล็ตหรือเดสก์ท็อป)

หลักการของ Grid System ใน Bootstrap 5

Grid System ใน Bootstrap 5 แบ่งหน้าจอเป็น 12 คอลัมน์ โดยเราสามารถกำหนดความกว้างของแต่ละคอลัมน์ได้ตามที่ต้องการ ซึ่งจะช่วยให้เราออกแบบเลย์เอาต์ได้ตามความต้องการ นอกจากนี้เรายังสามารถควบคุมลักษณะการแสดงผลให้คอลัมน์แสดงในแนวตั้ง (Stacked) หรือในแนวนอน (Horizontal) ได้

ตัวอย่างการใช้งาน Grid Stacked to Horizontal

การสร้าง Grid แบบ Stack บนหน้าจอขนาดเล็ก และแบบ Horizontal บนหน้าจอขนาดใหญ่

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

HTML
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Stacked to Horizontal</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-6">
                <div class="p-3 border bg-light">คอลัมน์ที่ 1</div>
            </div>
            <div class="col-12 col-md-6">
                <div class="p-3 border bg-light">คอลัมน์ที่ 2</div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

ในตัวอย่างข้างต้น

  • col-12: คอลัมน์นี้จะมีความกว้าง 12 ส่วนเต็ม ทำให้คอลัมน์แสดงในแนวตั้งบนหน้าจอขนาดเล็ก
  • col-md-6: เมื่อหน้าจอมีขนาดเท่าหรือใหญ่กว่า md (หน้าจอที่มีความกว้างตั้งแต่ 768px ขึ้นไป) คอลัมน์จะมีความกว้าง 6 ส่วน ซึ่งทำให้คอลัมน์แสดงเป็นแนวนอน

ผลลัพธ์บนหน้าจอขนาดเล็ก

ผลลัพธ์บนหน้าจอขนาดใหญ่

การใช้ Grid แบบหลายคอลัมน์

สามารถประยุกต์ใช้ Grid System เพื่อสร้างเลย์เอาต์ที่มีหลายคอลัมน์ได้ โดยตัวอย่างนี้จะมีการจัดเรียงคอลัมน์เป็นแนวตั้งบนหน้าจอขนาดเล็ก และจัดเป็น 3 คอลัมน์ในแนวนอนเมื่อหน้าจอใหญ่ขึ้น

HTML
<div class="container">
    <div class="row">
        <div class="col-12 col-lg-4">
            <div class="p-3 border bg-light">คอลัมน์ที่ 1</div>
        </div>
        <div class="col-12 col-lg-4">
            <div class="p-3 border bg-light">คอลัมน์ที่ 2</div>
        </div>
        <div class="col-12 col-lg-4">
            <div class="p-3 border bg-light">คอลัมน์ที่ 3</div>
        </div>
    </div>
</div>
  • col-12: ทุกคอลัมน์จะมีความกว้าง 12 ส่วนในหน้าจอขนาดเล็ก (จัดเรียงในแนวตั้ง)
  • col-lg-4: เมื่อหน้าจอมีขนาดใหญ่เท่าหรือมากกว่า 992px แต่ละคอลัมน์จะแบ่งพื้นที่เป็น 4 ส่วน ทำให้แสดงในแนวนอน

ผลลัพธ์บนหน้าจอขนาดเล็ก

ผลลัพธ์บนหน้าจอขนาดใหญ่

การจัดคอลัมน์ที่มีขนาดไม่เท่ากัน

นอกจากการจัดคอลัมน์ให้มีขนาดเท่ากัน เรายังสามารถกำหนดขนาดของคอลัมน์ให้แตกต่างกันได้ เช่นในตัวอย่างต่อไปนี้

HTML
<div class="container">
    <div class="row">
        <div class="col-12 col-md-8">
            <div class="p-3 border bg-light">คอลัมน์ที่ 1 (ขนาดใหญ่กว่า)</div>
        </div>
        <div class="col-12 col-md-4">
            <div class="p-3 border bg-light">คอลัมน์ที่ 2 (ขนาดเล็กกว่า)</div>
        </div>
    </div>
</div>
  • col-md-8: เมื่อหน้าจอขนาดใหญ่กว่า 768px คอลัมน์ที่ 1 จะมีความกว้าง 8 ส่วน
  • col-md-4: คอลัมน์ที่ 2 จะมีความกว้าง 4 ส่วน ทำให้รวมกันได้ 12 ส่วนเต็มของพื้นที่หน้าจอ

ผลลัพธ์บนหน้าจอขนาดเล็ก

ผลลัพธ์บนหน้าจอขนาดใหญ่

การใช้ Grid แบบ Responsive

เราสามารถกำหนดขนาดของคอลัมน์ให้ตอบสนองตามขนาดของหน้าจอได้หลายขนาด โดยการใช้ class ที่แตกต่างกันสำหรับแต่ละขนาดหน้าจอ ตัวอย่างเช่น

HTML
<div class="container">
    <div class="row">
        <div class="col-12 col-sm-6 col-lg-3">
            <div class="p-3 border bg-light">คอลัมน์ที่ 1</div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3">
            <div class="p-3 border bg-light">คอลัมน์ที่ 2</div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3">
            <div class="p-3 border bg-light">คอลัมน์ที่ 3</div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3">
            <div class="p-3 border bg-light">คอลัมน์ที่ 4</div>
        </div>
    </div>
</div>
  • col-12: คอลัมน์จะมีขนาดเต็ม 12 ส่วนเมื่อหน้าจอขนาดเล็ก (ต่ำกว่า 576px)
  • col-sm-6: เมื่อหน้าจอมีขนาด 576px หรือใหญ่กว่า คอลัมน์จะแบ่งเป็นสองส่วน
  • col-lg-3: เมื่อหน้าจอมีขนาด 992px หรือใหญ่กว่า คอลัมน์จะแบ่งเป็นสี่ส่วน

ผลลัพธ์บนหน้าจอขนาดต่ำกว่า 576px

ผลลัพธ์บนหน้าจอขนาด 576px หรือใหญ่กว่า แต่ไม่ถึง 992px

ผลลัพธ์บนหน้าจอขนาด 992px หรือใหญ่กว่า

สรุป

การใช้งาน Bootstrap 5 ในการจัดการเลย์เอาต์แบบ “Stacked to Horizontal” ช่วยให้สามารถจัดแสดงคอลัมน์ในแนวตั้งหรือแนวนอนตามขนาดของหน้าจอได้อย่างยืดหยุ่น สามารถประยุกต์ใช้งานได้ในหลายรูปแบบ ทั้งการจัดคอลัมน์ให้มีขนาดเท่ากัน ขนาดไม่เท่ากัน และการจัดเลย์เอาต์ที่ตอบสนองต่อหน้าจอขนาดต่างๆ เพื่อให้เว็บไซต์มีการแสดงผลที่เหมาะสมและสวยงามในทุกอุปกรณ์

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

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