
เริ่มต้นใช้งาน Bootstrap 5
Bootstrap เป็น front-end framework ที่ได้รับความนิยมเป็นอย่างมาก เพราะทำงานได้เร็ว ใช้งานง่าย ที่สำคัญ ใช้ได้ฟรีด้วย การใช้งาน Bootstrap ทำให้เราสามารถออกแบบ ฟอร์ม ปุ่มกด ตาราง เมนู รูปภาพ และอื่น ๆ อีกมากมายในการพัฒนาเว็บไซต์ให้สวยงาม และเป็นไปตามแนวทางของ Responsive designs อีกด้วย และปัจจุบัน Bootstrap พัฒนามาถึงเวอร์ชัน 5 แล้วนะครับ
ข้อแตกต่างสำคัญ ๆ ระหว่าง Bootstrap เวอร์ชัน 5 และเวอร์ชัน 3, 4 ก็คือ Bootstrap 5 ไม่ได้ใช้ jQuery แล้วนะครับ แต่เปลี่ยนมาใช้ Vanilla JavaScript แทน
เราจะใช้ Bootstrap 5 ได้อย่างไร
เราสามารถใช้งาน Bootstrap 5 ได้ 2 ช่องทาง คือ
- ดาวน์โหลด Bootstrap 5 มาจากเว็บไซต์ getbootstrap.com แล้วเอามาใช้ในเว็บไซต์ของเรา
- อิมพอร์ต Bootstrap 5 จากบริการ CDN มาใช้งานได้เลย
ดาวน์โหลด Bootstrap 5 มาใช้งาน
ถ้าต้องการดาวน์โหลด Bootstrap 5 มาใช้ในโปรเจ็คต์ของเรา สามารถเข้าไปดาวน์โหลดได้ที่เว็บไซต์ getbootstrap.com

เมื่อเข้าไปในหน้าเว็บของ Bootstrap แล้ว ให้คลิกที่ปุ่ม Download
จะเข้าสู่หน้าสำหรับดาวน์โหลด Bootstrap

ให้คลิกเลือกเวอร์ชัน (ปกติจะเป็นเวอร์ชันล่าสุดอยู่แล้ว) แล้วคลิกปุ่ม Download ที่ภายใต้หัวข้อ Compiled CSS and JS
จะได้ไฟล์ Bootstrap ที่มีนามสกุลเป็น .zip

ให้ขยายไฟล์ จะได้โฟลเดอร์ชื่อ bootstrap-x.x.x-dist (x คือเลขเวอร์ชัน)
ให้นำโฟลเดอร์ดังกล่าวไปไว้ในโฟลเดอร์ที่เก็บโปรเจ็คต์ของเรา

ทีนี้ในหน้าเว็บเพจที่เราจะใช้งาน Bootstrap ให้กำหนดโครงสร้าง ดังนี้
<!DOCTYPE html> <html lang="th"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
ภายในแท็ก <head></head>
ให้อ้างอิงไฟล์ bootstrap.min.css ที่อยู่ในโฟลเดอร์ bootstrap-5.1.2-dist/css (ขึ้นอยู่กับว่าเก็บ Bootstrap ไว้ที่ไหนนะครับ อ้างอิงให้ถูก) ด้วยแท็ก <link>
ดังนี้ <link rel="stylesheet" href="./bootstrap-5.1.2-dist/css/bootstrap.min.css">
และอ้างอิงไฟล์ bootstrap.min.js ที่เก็บอยู่ในโฟลเดอร์ bootstrap-5.1.2-dist/js (ขึ้นอยู่กับว่าเก็บ Bootstrap ไว้ที่ไหนนะครับ อ้างอิงให้ถูก) ด้วยแท็ก <script>
ดังนี้ <script src="./bootstrap-5.1.2-dist/js/bootstrap.bundle.min.js"></script>
โครงสร้างเว็บเพจจะเป็นประมาณนี้
<!DOCTYPE html> <html lang="th"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./bootstrap-5.1.2-dist/css/bootstrap.min.css"> <script src="./bootstrap-5.1.2-dist/js/bootstrap.bundle.min.js"></script> <title>Document</title> </head> <body> </body> </html>
- บรรทัดที่อิมพอร์ต Bootstrap มาใช้งาน คือบรรทัดที่ 7-8
ใช้งาน Bootstrap ผ่านบริการ CDN
ถ้าไม่ต้องการดาวน์โหลด Bootstrap มาไว้ในโปรเจ็คต์ของเรา ก็สามารถใช้งาน Bootstrap ผ่านบริการ CDN ได้เลยครับ สะดวกดี วิธีการก็ เข้าไปที่เว็บไซต์ แล้วก็ทำเหมือนขั้นตอนที่กล่าวไว้ก่อนหน้านี้เลยครับ ในหน้าดาวน์โหลด ให้เลื่อนลงไปที่หัวข้อ CDN via jsDelivr แล้วคัดลอกโค้ดมาได้เลยครับ ตามรูปด้านล่าง

เอาโค้ดไปวางใต้บรรทัด <meta name="viewport" content="width=device-width, initial-scale=1.0">
ดังนี้
<!DOCTYPE html> <html lang="th"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script> <title>Document</title> </head> <body> </body> </html>
ทีนี้เราก็ใช้งาน Bootstrap 5 ได้แล้วครับ
การใช้งาน Bootstrap
การใช้งาน Bootstrap ในการตกแต่งเอลิเมนต์ต่าง ๆ ในหน้าเว็บเพจ เราจะใช้ภายในแท็ก <div>
ที่ระบุคลาส .container
หรือ .container-fluid
ซึ่งเราจะเรียกว่า Container เช่น
<!DOCTYPE html> <html lang="th"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script> <title>Document</title> </head> <body> <div class="container"> <h1>เริ่มต้นใช้งาน Bootstrap 5</h1> <p>เรียนรู้การใช้งาน Bootstrap 5 เพื่อการพัฒนาเว็บไซต์แบบ Responsive</p> <p>Bootstrap 5 Bootstrap 5 Bootstrap 5 Bootstrap 5 Bootstrap 5 Bootstrap 5 Bootstrap 5 Bootstrap 5 Bootstrap 5 Bootstrap 5 </p> </div> </body> </html>
<!DOCTYPE html> <html lang="th"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script> <title>Document</title> </head> <body> <div class="container-fluid"> <h1>เริ่มต้นใช้งาน Bootstrap 5</h1> <p>เรียนรู้การใช้งาน Bootstrap 5 เพื่อการพัฒนาเว็บไซต์แบบ Responsive</p> <p>Bootstrap 5 Bootstrap 5 Bootstrap 5 Bootstrap 5 Bootstrap 5 Bootstrap 5 Bootstrap 5 Bootstrap 5 Bootstrap 5 Bootstrap 5 </p> </div> </body> </html>
สำหรับการใช้งาน Container ให้คลิกเข้าไปดูที่บทความนี้นะครับ ➡ ทำความรู้จักกับ Container ใน Bootstrap 5
- Bootstrap 5 Get Started
- Bootstrap 5 Container
- Bootstrap 5 Grid Basic
- Bootstrap 5 Typography
- Bootstrap 5 Colors
- Bootstrap 5 Tables
- Bootstrap 5 Images
- Bootstrap 5 Jambotron
- Bootstrap 5 Alerts
- Bootstrap 5 สร้างปุ่มกดสวย ๆ
- Bootstrap 5 การจัดกลุ่มให้ปุ่มกด
- Bootstrap 5 การสร้าง Badge
- Bootstrap 5 การสร้าง Progress Bar
- Bootstrap 5 การสร้าง Spinner
- Bootstrap 5 กับการแบ่งหน้า
- Bootstrap 5 การสร้าง List Groups
- Bootstrap 5 การใช้งาน Card
- Bootstrap 5 การสร้าง Dropdown Menu
- Bootstrap 5 Collapse
- Bootstrap 5 Navs
- Bootstrap 5 Navbars
- Bootstrap 5 Carousel
- Bootstrap 5 Modal
- Bootstrap 5 Tooltip
- Bootstrap 5 Popover
- Bootstrap 5 Toasts
- Bootstrap 5 Scrollspy
- Bootstrap 5 Offcanvas
- Bootstrap 5 Utilities
- Bootstrap 5 Flex
- Bootstrap 5 Forms
- Bootstrap 5 Select
- Bootstrap 5 Checkboxes and Radio buttons
- Bootstrap 5 Range
- Bootstrap 5 Input Groups
- Bootstrap 5 Form Floating Labels
- Bootstrap 5 Form Validation
- Bootstrap 5 Grid System
- Bootstrap 5 Grid Stacked to horizontal
- Bootstrap 5 Grid Extra Small
- Bootstrap 5 Grid Small
- Bootstrap 5 Grid Medium
- Bootstrap 5 Grid Large
- Bootstrap 5 Grid Extra Large
- Bootstrap 5 Grid XXL
- Bootstrap 5 Grid Examples