Bootstrap คืออะไร ?

4 min readDec 15, 2020

Bootstrap คือ CSS Framework ที่ถูกสร้างขึ้นมาเพื่อช่วยอำนวยความสะดวกแก่ Developer ในการตกแต่งและจัด Layout ของ Website ให้สวยงามและรวดเร็ว โดยไม่ต้องเสียเวลาเขียน Code และออกแบบ Layout เอง ซึ่ง Bootstrap ถูกใช้เป็นที่แพร่หลายในหมู่ของ Website Developer เพราะ Bootstrap ได้รวมชุดคำสั่งของ JavaScript และ CSS สำเร็จรูปไว้แล้ว ซึ่ง Developer สามารถเรียกใช้งาน Template ต่างๆได้อย่างมากมาย เช่น Table, Buttons, Icon, Navigation Bar, Card, Alerts และ อื่นๆ อีกทั้ง Bootstrap ยังรองรับการทำงานแบบ Responsive Web อีกด้วย

ตัวอย่าง Code ของ Buttons ใน BootStrap — ตัวอย่าง Code สำเร็จรูปการสร้าง Buttons

ทีมพัฒนาและประวัติ Bootstrap

Bootstrap ถูกพัฒนาโดยทีมของ Twitter Inc. ด้วยนักพัฒนาที่มีชื่อว่า Mark Otto และ Jacob Thornton เนื่องจากทั้งสองได้เล็งเห็นถึงปัญหาที่เกิดขึ้นในการทำงาน จึงพัฒนา Bootstrap ขึ้นมาเพื่อช่วยในเรื่องของออกแบบ Responsive Web design ซึ่ง Bootstrap มีระบบ Grid มาช่วยในจัดรูปแบบหน้าตาของ Website และทั้งยังมีการคำนวนค่าหน้าจอให้อีกด้วย

ก่อนหน้านี้ Bootstrap เป็นโปรเจ็คของ Twitter เลยถูกเรียกว่า Twitter Blueprint แต่ภายหลังนักพัฒนาได้มีการย้ายบริษัทจึงเปลี่ยนไปเรียกว่า “Bootstrap” และปัจจุบันได้มีการเปิดให้นักพัฒนาสามารถนำไปใช้งานพัฒนาเว็บไซต์ได้แบบฟรี (Open Source) ในชื่อว่า Bootstrap Framework

Bootstrap ประกอบด้วยอะไรบ้าง ?

1. Layout จะประกอบไปด้วย Containers, Grid, Media Object และ Responsive เพื่อใช้ในการจัดโครงร่าง หรือช่วยตกแต่งรูปแบบของหน้า Web โดยแต่ละส่วนประกอบจะมีหน้าที่ดังนี้

Containers เป็นตัวการกำหนดขอบเขตวัตถุหรือข้อมูล

Grid ใช้ในการแบ่ง Containers เป็นคอลัมน์ย่อย ซึ่งสามารถทำได้ถึง 12 คอลัมน์

Media Object เป็นการจัดการ Media ต่างๆที่อยู่บนหน้าเว็บ
Responsive จะเป็นฟังชั่นที่ช่วยทำให้หน้าเว็บสามารถเป็นรูปแบบให้มีความเหมาะสมตามจอแสดงผลของผู้ใช้

2. Base CSS เป็นการกำหนด Style ของ Display ซึ่งจะใช้ร่วมกับ HTML elements พื้นฐาน เช่น Typography (เป็นลักษณะของตัวอักษร เช่น ความหนา, ตัวเอียงขนาดตัวอักษร, ฟอนต์ และ ลักษณะอื่นๆ), Tables (รูปแบบของตาราง เช่น สี การแบ่งแถวหรือคอลัมน์) และ Images (ขนาดของภาพ, ลักษณะของขอบรูปภาพ)

3. Components : เป็นการรวบรวม สำหรับสิ่งที่เราต้องใช้บ่อยๆ เช่น Buttons, Dropdowns, Input groups, Navigation, Alerts(การแจ้งเตือน), Navbar, Thumbnail, Pagination, Form control (รูปแบบการกรอกข้อมูล) และ อื่นๆ

4. JavaScript : jQuery plugins ต่างๆ เช่น Modal, Carousel หรือ Tooltip เพื่อที่จะทำให้เว็บของเรามีลูกเล่นและมีความน่าใช้งานมากขึ้น

ทำไมเราถึงต้องใช้ Bootstrap ?

เนื่องจากการสร้าง Website ขึ้นมาหนึ่ง Website นั้นองค์ประกอบที่จะทำให้ผู้ใช้งานนั้นสนใจเป็นอันดับแรก คือหน้าตาของ Website ว่าดีดี สวยงาม หรือ ดูใช้งานง่ายหรือไม่ Bootstrap จึงมีบทบาทในการเข้ามาช่วยเรื่องของการออกแบบให้ง่ายขึ้น ทั้งอีกยังดูดีทันสมัย เราสามารถคุม Theme ของ Website ที่เราสร้างขึ้นมาอย่างง่ายดายอีกด้วย แต่ถ้าเราไม่มี Bootstrap เราจะต้องเสียเวลามานั่งออกแบบก่อน และค่อยๆ เขียน Code ปรับขนาดแต่ละอย่างไปเรื่อยๆ จนกว่าจะได้อย่างที่เราต้องการ ซึ่งการทำแบบนั้นทำให้เราเสียเวลาในการสร้าง Website เป็นอย่างมาก และการใช้ Bootstrap นั้นเราอาจจะได้ความคิดการตกแต่งรูปแบบใหม่ๆ ที่น่าสนใจแบบที่เราไม่เคยทำมาก่อน

Bootstrap ใช้งานได้บนอุปกรณ์ใดบ้าง ?

Bootstrap ใช้งานได้ทั้งบน Mobile และ Desktop browser ปัจจุบันเป็น Bootstrap Version 5 มีการ Update มาใหม่ และไม่ได้ Support Browser Internet Explorer แล้ว แต่ถ้าหากใครต้องการให้ Support Browser Internet Explorer นั้นสามารถใช้ Bootstrap Version 4 ในการสร้าง Website แทนได้

Desktop Browser ที่ Support Bootstrap Version 5

Mobile Devices ที่ Support Bootstrap Version 5

การติดตั้ง Bootstrap

การติดตั้ง Bootstrap มี 2 วิธีหลักๆ ดังนี้

1. เรียกผ่าน Bootstrap CDN

ตัวอย่างการเรียก File CSS

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

ตัวอย่างการเรียก File JS

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>

ตัวอย่างเริ่มต้น File index.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
    -->
  </body>
</html>