col-sm คืออะไร วิธีใช้งาน และตัวอย่าง

col-sm คือ class ใน Bootstrap Framework ใช้สำหรับแบ่งข้อมูลการแสดงผลแบบคอลัมน์ ซึ่งเป็นกลุ่มคำสั่งของ Grid System สำหรับหน้าจอการแสดงผลขนาดเล็กขนาด คือน้อยกว่าหรือเท่ากับ 576px สำหรับบทความนี้คุณจะได้เรียนวิธีการใช้งาน col-sm พร้อมตัวอย่าง และคำอธิบาย บทความความนี้อ้างอิงจาก Bootstrap เวอร์ชั่น 5 ล่าสุดปัจจุบัน

ตัวอย่าง col-sm คืออะไร?

1. col-sm คือชื่อ class ของ Bootstrap Framework

2. col-sm คือคำสั่งในกลุ่ม Grid System ใช้สำหรับแบ่งข้อมูลออกเป็นคอลัมน์

3. col-sm รองรับการแสดงผลข้อมูลแบบคอลัมน์ สำหรับหน้าจอขนาด ≥576px

4. col-sm ช่วยให้ออกแบบหน้าเว็บสำหรับขนาดเล็ก เช่น มือถือ

5. col-sm รองรับการแบ่งข้อมูลสูงสุดต่อ 1 แถวคือ 12 คอลัมน์ ผ่านตัวเลข 1-12

6. col-sm-* ให้เปลี่ยน * เป็นตัวเลขของคอลัมน์ที่ต้องการ เช่น col-sm-6

ตัวอย่าง วิธีใช้ col-sm

<div class="container">
    <div class="row">
        <div class="col-sm-6">Colume A</div>
        <div class="col-sm-6">Colume B</div>
    </div>
</div>

ก่อนอธิบายโค้ด อยากให้คุณเข้าใจก่อนว่าหน้าจอการแสดงผลสามารถแบ่งได้เป็น 12 ส่วน คือ 1 ถึง 12 จากตัวอย่างกำหนด col-sm-6 ก็หมายความว่าจะแบ่ง 6 ส่วนให้แสดงผล Column A และอีก 6 ส่วนแสดงผล Column B ทำให้โค้ดนี้ใน 1 แถวจะแสดง 2 คอลัมน์ เพราะ 6 + 6 = 12

ตัวอย่าง วิธีใช้ col-sm แบบที่ 2

<div class="container">
    <div class="row">
        <div class="col-sm-12">Colume A + B</div>
    </div>
</div>

จากตัวอย่างนี้กำหนด col-sm-12 แสดงผลข้อความ Column A + B หมายความว่าโค้ดนี้จะแสดง 1 แถวจำนวน 1 คอลัมน์นั้นเอง