การทำ Responsive device ด้วย Bootstrap Grid System

      การทำ Responsive device  ด้วย ฺBootstrap grid system เพื่อให้ตอบสนองต่อการแสดงผลผ่านอุปกรณ์ต่างๆไม่ว่าจะเป็น การแสดงผลผ่านคอมพิวเตอร์, แท็บเล็ต, สมาร์ทโฟน เป็นต้น ซึ่งเป็นการจัดเลย์เอาต์ให้กับหน้าเว็บไซต์ของเราให้เป็นระเบียบและแบ่งสัดส่วนได้ตามต้องการ

Bootstrap Grid System

      ระบบ Bootstrap grid system ในหนึ่งแถวนั้น (row) จะแบ่งออกเป็น 12 คอลัมน์ (colum) โดยที่เราสามารถแบ่งคอลัมน์ หรือ จัดกลุ่ม เพื่อนำข้อมูลที่ต้องการวางลงในคอลัมน์ต่างๆได้

Grid Classes

      สามารถแบ่งออกได้เป็น 4 คลาส ดังนี้

• xs : สำหรับโทรศัพท์ (ขนาดน้อยกว่า 768px)
• sm : สำหรับแท็บเล็ต (ขนาดมากกว่าเท่ากับ 768px)
• md : สำหรับเดสท็อปทั่วไป (ขนาดมากกว่าเท่ากับ 992px)
• lg : สำหรับเดสท็อปขนาดใหญ่ (ขนาดมากกว่าเท่ากับ 1200px)

      px = pixel

Basic Structure

<div class="container">

    <div class="row">

       <div class="col-class-number">

       </div>

    </div>

</div>

• class :  ให้เราเลือกใช้คลาสตามการใช้งานของเรา โดยมีคลาสให้เลือกคือ คลาส xs, sm, md และ lg 
• number : ให้เราใส่ตัวเลข 1-12 ซึ่งการแบ่งคอลัมน์ในหนึ่งแถวนั้น (row) จะไม่เกิน 12

ตัวอย่างการใช้งาน

<div class="container">

    <div class="row">

       <div class="col-md-8">

        class = md, number = 8

       </div>

       <div class="col-md-4">

        class = md, number = 4  

       </div>

    </div>

</div>

ผลลัพธ์จากโค้ดข้างต้น

          ผู้พัฒนาสามารถนำไปประยุกต์ใช้ เพื่อให้การแสดงผลในอุปกรณ์มีประสิทธิภาพมากยิ่งขึ้น