วิธีติดตั้ง Bootstrap 5 แบบง่ายๆ

บทความนี้สอนวิธีติดตั้ง Bootstrap 5 เวอร์ชันปัจจุบัน ณ ที่เขียนบทความนี้ โดย Bootstrap 5 แบ่งวิธีติดตั้งเป็น 2 วิธี คือ 1.ดาวน์โหลดไฟล์มาเก็บไว้ในเครื่อง และ 2.เรียกใช้งานลิงก์ผู้ให้บริการออนไลน์แบบ CDN มีขั้นตอนดังนี้

ตัวอย่าง วิธีติดตั้ง Bootstrap 5 แบบ CDN

วิธีนี้เหมาะกับการพัฒนาที่สามารถออกอินเทอร์เน็ตได้ตลอดเวลา เพราะ CDN ต้องใช้อินเทอร์เน็ตในการเรียกไฟล์ CSS และ JS จากผู้ให้บริการ

1. เรียกใช้ไฟล์ CSS โดยการคัดลอกโค้ดด้านล่างไปวางไว้ในแท็ก head ของเว็บไซต์ 

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

2. เรียกใช้ไฟล์ JS โดยการคัดลอกโค้ดด้านล่างไปวางไว้ในแท็ก head หรือก่อนปิดแท็ก body ของเว็บไซต์

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

ตัวอย่าง วิธีติดตั้ง Bootstrap 5 แบบดาวน์โหลดไฟล์

วิธีนี้เหมาะกับการพัฒนาที่ต้องการเก็บไฟล์ CSS และ JS ไว้ในโปรเจค หรือต้องการแก้ไขโค้ด Bootstrap วิธีนี้เมื่อดาวน์โหลดไฟล์แล้วไม่ต้องใช้อินเทอร์เน็ตเพื่อเรียกไฟล์ CSS และ JS จากผู้ให้บริการ

1. ดาวน์โหลด Bootstrap 5 จากลิงก์ด้านล่าง แตกไฟล์และนำไปวางไว้ในโปรเจค

https://github.com/twbs/bootstrap/releases/download/v5.3.2/bootstrap-5.3.2-dist.zip

2. เรียกใช้ CSS และ JS ในเว็บไซต์ โดยการกำหนดเส้นทางการเข้าถึงไฟล์ทั้ง 2 ให้ถูกต้อง

<link rel="stylesheet" href="bootstrap-5.3.2-dist/css/bootstrap.css">

<script type="text/javascript" src="bootstrap-5.3.2-dist/js/bootstrap.bundle.js"></script>

สรุป วิธีติดตั้ง Bootstrap 5 แบบง่ายๆ แนะนำ 2 วิธีคือดาวน์โหลด CSS และ JS ของ Bootstrap 5 มาเก็บไว้ในโปรเจค และเรียกใช้งาน กับอีกวิธีคือเรียกใช้ CSS และ JS ของ Bootstrap 5 ผ่านผู้ให้บริการ หรือ CDN ทั้ง 2 วิธีมีขั้นตอน ข้อดี ข้อเสียที่แตกต่างกัน