Bootstrap ปรับขนาดตามหน้าจอ การติดตั้ง และตั้งค่าเริ่มต้น

Bootstrap ปรับขนาดตามหน้าจอ การติดตั้ง และตั้งค่าเริ่มต้น บทความนี้สอนวิธีการติดตั้ง และการตั้งค่าเริ่มต้น เพื่อให้ Bootstrap Framework พร้อมใช้งานสำหรับปรับขนาดตามหน้าจอของอุปกรณ์ชนิดต่างๆ โดยมีรายละเอียดดังนี้

ตัวอย่าง Bootstrap ปรับขนาดตามหน้าจอ การติดตั้ง และตั้งค่าเริ่มต้น

1. ติดตั้ง Bootstrap Framework ผ่านบริการ CDN ของ jsDelivr โดยวางโค้ดด้านล่างไว้ภายในแท็ก head ของเว็บไซต์

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

2. กำหนดให้เว็บไซต์รองรับบนอุปกรณ์ต่างๆ ผ่านแท็ก meta name viewport โดยวางโค้ดด้านล่างไว้ภายในแท็ก head ของเว็บไซต์

<meta name="viewport" content="width=device-width, initial-scale=1">

3. ทดสอบการทำงานของ Bootstrap ปรับขนาดตามหน้าจอ โดยการวางโค้ดด้านล่างไว้ภายในแท็ก body ของเว็บไซต์ เป็นการสร้าง Grid ด้วย 3 columns คือ A, B, C ตอนรันทั้ง 3 columns ต้องอยู่บรรทัดเดียวกัน ทั้งบน Desktop และ Mobile

<div class="container">
    <div class="row">
        <div class="col-4">A</div>
        <div class="col-4">B</div>
        <div class="col-4">C</div>
    </div>
</div>