Row setting
Row setting

เริ่มต้นกับ Bootstrap

Blog Detail Pic
Avatar
Phattarayutt Phooprae | Friday, 06 March 2026 Posted 9 day/s ago , เปิดอ่าน 911 ครั้ง

แนะนำ Bootstrap

Bootstrap คือ Front-end Framework ยอดนิยมที่เป็น Open-source (ใช้งานได้ฟรี) ซึ่งรวบรวมชุดคำสั่ง HTML, CSS และ JavaScript โครงสร้างพื้นฐานเอาไว้ให้เราหยิบมาใช้งานได้ทันที หน้าที่หลักของมันคือช่วยให้นักพัฒนาเว็บสามารถสร้างเว็บไซต์ที่สวยงามและรองรับการแสดงผลทุกหน้าจอ (Responsive Design) ได้อย่างรวดเร็วโดยไม่ต้องเขียนโค้ด CSS ตั้งแต่ต้นทั้งหมด


Bootstrap เหมาะกับใคร?

  • ผู้เริ่มต้นทำเว็บไซต์ ที่พอมีความรู้ HTML/CSS พื้นฐาน และอยากให้เว็บออกมาดูดี เป็นระเบียบอย่างรวดเร็ว

  • โปรแกรมเมอร์ (Back-end/Full-stack Developers) ที่ต้องการขึ้นโครงหน้าเว็บหรือทำ Prototype อย่างรวดเร็ว โดยไม่ต้องเสียเวลาดีไซน์ UI เองทั้งหมด

  • ทีมพัฒนา ที่ต้องการใช้มาตรฐานการออกแบบเดียวกันทั้งโปรเจกต์

กล่าวโดยสรุป Bootstrap เปรียบเสมือน "ชุดกล่องเครื่องมือสำเร็จรูป" ที่เตรียมชิ้นส่วนสำหรับการสร้างบ้าน (เว็บไซต์) ไว้ให้คุณพร้อมสรรพ ช่วยให้คุณต่อเติมเว็บที่สวยงามและใช้งานได้ดีในทุกอุปกรณ์ได้อย่างรวดเร็วนั่นเอง


สร้างโปรเจ็คทดสอบการทำงาน

  1. สร้างไฟล์ index.html : สำหรับการสร้างไฟล์ index.html ผู้อ่านสามารถใช้โปรแกรม Notepad บน Windows ในการสร้างไฟล์แล้วบันทึกเป็นไฟล์  นามสกุล .html ได้เลย หรือ สามารถดาวน์โหลดโปรแกรม vscode มาใช้ก็จะสะดวกในการจัดรูปแบบ html ได้สะดวกมากขึ้นครับ
  2. เขียนโครงสร้างไฟล์ html เบื้องต้น
  3. ติดตั้ง Bootstrap
        - ดาวน์โหลด Bootstrap https://getbootstrap.com
        - แตกไฟล์ Bootstrap
        - สร้างโฟล์เดอร์ assets ในหรือพาธอื่นตามโครงสร้างโปรเจ็ค
        - ก๊อปปี้ไฟล์ Bootstrap มาไว้ในโปรเจ็ค
  4. ทดสอบเขียนโค้ด HTML แล้วดึง class  Bootstarp มาใช้

HTML index.html  (โครงสร้าง html)

<!DOCTYPE html>
<html lang="en">
<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>เริ่มต้นกับ Bootstrap</title> 
</head>
<body>
      <h1>เริ่มต้นกับ Bootstrap</h1>
</body>
</html>

HTML index.html (เพิ่ม Bootstrap เข้ามาในโครงสร้าง html)

<!DOCTYPE html>
<html lang="en">
<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>เริ่มต้นกับ Bootstrap</title>
   <!-- CSS -->
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
</head>
<body>
    <h1>เริ่มต้นกับ Bootstrap</h1>
    <button class="btn btn-primary">Button by Bootstrap</button>
    <!-- Srcipt -->
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>



และที่สำคัญในการใช้งาน Bootstrap คุณจะต้องรู้จัก CSS Class ของ Bootstrap เพื่อที่จะสามารถกำหนดและใช้งานได้อย่างถูกต้อง โดยสามารถศึกษาเพิ่มเติมได้ตามลิงค์ Get started with Bootstrap · Bootstrap v5.3

เอกสารที่เกี่ยวข้อง
ดาวน์โหลดทั้งหมด
Row setting
Row setting
Row setting

 

Row setting
พัฒนาระบบและให้บริการโดย บริษัท โพลีกอน ดีเวลลอปเมนท์ จำกัด webreadyGO