
เริ่มต้นใช้งาน Bootstrap 4
Bootstrap คือ Fron-End Framework ที่เราสามารถใช้งานได้ฟรี เพื่ออำนวยความสะดวกให้การพัฒนาเว็บไซต์ทำได้อย่างงายและรวดเร็วยิ่งขึ้น มีเทมเพลทสำหรับสร้างฟอร์ม (forms), ปุ่มกด (buttons), ตาราง (tables) เป็นต้น ไว้ให้เราใช้งานได้อย่างสะดวก และช่วยให้เราสามารถสร้างเว็บไซต์แบบ responsive ที่สามารถแสดงผลได้เหมาะสมกับอุปกรณ์ต่าง ๆ เช่น โทรศัพท์มือถือ แท็บเล็ต คอมพิวเตอร์ส่วนบุคคล ได้อย่างสวยงาม
เราจะใช้ Bootstrap ได้อย่างไร
เราสามารถใช้งาน Bootstrap ได้ 2 ช่องทาง คือ
- ใช้งานผ่าน CDN
- ดาวน์โหลด Bootstrap มาใช้ในเว็บไซต์ของเรา โดยสามารถดาวน์โหลดได้ที่ getbootstrap.com
การใช้งาน Bootstrap 4 ผ่าน CDN
ถ้าเราไม่ต้องการดาวน์โหลด Bootstrap มาเก็บไว้ในเซิร์ฟเวอร์ของเรา เราสามารถใช้งาน Bootstrap ได้ผ่านทาง CDN (Content Delivery Network) โดยนำโค้ดจอง CDN มาวางไว้ในส่วนหัวของเว็บไซต์ของเราทุกหน้าที่ต้องการใช้งาน Bootstrap โดยแทรกไว้ในระหว่างแท็ก <head></head>
โดยต้องอ้างอิงไฟล์ jQuery และ popper ด้วย ดังนี้
<!DOCTYPE html> <html> <head> <title>Using Bootstrap</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </body> </html>
ดาวน์โหลดไฟล์ Bootstrap มาใช้ในเว็บไซต์
ถ้าไม่ต้องการใช้งาน Bootstrap ผ่านบริการ CDN เราก็สามารถดาวน์โหลด Bootstrap มาใช้ในเว็บไซต์ของเราได้เช่นกัน โดยสามารถดาวน์โหลดได้ที่ getbootstrap.com

คลิกที่ปุ่ม Download

เวอร์ชันล่าสุดขณะเขียนบทความนี้คือเวอร์ชัน 4.4.1 ให้คลิกที่ปุ่ม Download เพื่อดาวน์โหลด Bootstrap มาไว้ในเครื่องของเรา
เมื่อดาวน์โหลดมาแล้วจะได้ไฟล์ที่มีนามสกุล .zip

ให้ทำการขยายไฟล์ (แตกไฟล์) นำไปไว้ในโฟล์เดอร์ที่เก็บเว็บไซต์ของเรา จะได้โฟล์เดอร์ที่ชื่อ bootstrap-4.4.1-dist ภายในจะประกอบด้วยโฟล์เดอร์ย่อยอีก 2 โฟล์เดอร์ คือ css และ js

หลังจากนั้น ให้ทำการอ้างอิงไฟล์ css และไฟล์ js ในหน้าเว็บไซต์ของเราทุกหน้า ดังนี้
<!DOCTYPE html> <html lang="en"> <head> <title>Using Bootstrap</title> <meta charset="utf-8"> <!-- อ้างอิงไฟล์ Bootstrap.min.css --> <link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap.min.css"> <!-- อ้างอิงไฟล์ Bootstrap.min.js --> <script src="bootstrap-4.4.1-dist/js/bootstrap.min.js"></script> </head> <body> </body> </html>
การสร้างเว็บเพจโดยใช้ Bootstrap
สำหรับขั้นตอนการสร้างเว็บเพจโดยใช้ Bootstrap มีขั้นตอนดังนี้
1.สร้างไฟล์ HTML
การสร้างเว็บไซต์ เราต้องสร้างภายใต้มาตรฐาน HTML ดังนั้น ต้องสร้างไฟล์ HTML ขึ้นมาก่อน แล้วแทรกโค้ดเพื่อประกาศว่าไฟล์นั้นเป็นเอกสาร HTML ดังนี้
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> </html>
ใน HTML5 เราต้องวางแท็ก <!DOCTYPE html>
ไว้บรรทัดแทรกสุดของเพจ เพื่อประกาศให้รู้ว่า นี่คือเอกสาร HTML5
2.กำหนด viewport
เพื่อให้ Bootstrap ปรับขนาดเอลิเมนต์ต่าง ๆ ตามขนาดหน้าจออุปกรณ์ เราต้องกำหนด viewport ไว้ภายในแท็ก <meta>
ซ้อนไว้ภายในแท็ก <head></head>
อีกที ดังนี้
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width
ใช้สำหรับปรับความกว้างของหน้าเว็บเพจให้ปรับขนาดตามความกว้างของหน้าจออุปกรณ์
initial-scale=1
ใช้สำหรับกำหนดระดับการซูมเริ่มต้นเพื่อหน้าเว็บเพจถูกโหลดโดยเบราเซอร์
3.กำหนด containers
ใน Bootstrap 4 เราต้องกำหนดเอลิเมนต์สำหรับใช้เป็นเอลิเมนต์หลักไว้บรรจุเอลิเมนต์อื่น ๆ โดยสามารถใช้ได้ 2 แบบ คือ
- ใช้คลาส .container ความกว้างจะไม่เต็มจอ (responsive fixed width container)
- ใช้คลาส .container-fluid จะได้คอนเทนเนอร์ที่มีความกว้างเต็มหน้าจอ (full width container)
ตัวอย่างโค้ดหน้าเว็บที่กำหนดทุกอย่างพร้อมสำหรับการใช้งาน Bootstrap
.container
<!DOCTYPE html> <html lang="en"> <head> <title>Using Bootstrap 4</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>หัวเรื่อง</h1> <p>ย่อหน้า</p> </div> </body> </html>
.container-fluid
<!DOCTYPE html> <html lang="en"> <head> <title>Using Bootstrap 4</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>หัวเรื่อง</h1> <p>ย่อหน้า</p> </div> </body> </html>
- Bootstrap 4 Get Started
- Bootstrap 4 Container
- Bootstrap 4 Grid Basic
- Bootstrap 4 Typography
- Bootstrap 4 Colors
- Bootstrap 4 Tables
- Bootstrap 4 Images
- Bootstrap 4 Jambotron
- Bootstrap 4 Alerts
- Bootstrap 4 Buttons
- Bootstrap 4 Button Groups
- Bootstrap 4 Badges
- Bootstrap 4 Progress Bars
- Bootstrap 4 Spinners
- Bootstrap 4 Pagination
- Bootstrap 4 List Groups
- Bootstrap 4 Cards
- Bootstrap 4 Dropdowns
- Bootstrap 4 Collapse
- Bootstrap 4 Navs
- Bootstrap 4 Navbars
- Bootstrap 4 Forms
- Bootstrap 4 Toasts
- Bootstrap 4 Scrollspy
- Bootstrap 4 Utilities
- Bootstrap 4 Flex
- Bootstrap 4 Icons
- Bootstrap 4 Media Objects
- Bootstrap 4 Filters
- Bootstrap 4 Grid System
- Bootstrap 4 Grid Stacked to horizontal
- Bootstrap 4 Grid Extra Small
- Bootstrap 4 Grid Small
- Bootstrap 4 Grid Medium
- Bootstrap 4 Grid Large
- Bootstrap 4 Grid Extra Large
- Bootstrap 4 Grid Examples
- Bootstrap 4 Inputs
- Bootstrap 4 Input Groups
- Bootstrap 4 Custom Forms
- Bootstrap 4 Carousel
- Bootstrap 4 Modal
- Bootstrap 4 Tooltip
- Bootstrap 4 Popover