Bootstrap คืออะไร รวมวิธีใช้งานเบื้องต้นสำหรับทำ Responsive Web Design

   By: DH Team

   อัปเดตล่าสุด June 3, 2023

Bootstrap คืออะไร รวมวิธีใช้งานเบื้องต้นสำหรับทำ Responsive Web Design

ปัจจุบันการทำเว็บไซต์แบบ Responsive Web Design นั้นถือว่าเป็นมาตรฐานไปแล้ว เพราะว่านอกจากเป็นการสร้างประสบการณ์ใช้งานที่ดีต่อผู้ใช้แล้ว (Good UX) Google ยังแนะนำด้วยครับ เพราะว่าเป็นหนึ่งในเมทริกซ์การวัดประสิทธิภาพเว็บไซต์ของ Google เว็บไหนไม่ Mobile Responsive อาจจะทำให้ Google ไม่นำเว็บของเรามาทำการ index แล้วแสดงผลในหน้า Search ทำให้เกิดความเสียหายต่อเว็บหรือธุรกิจเราได้เลยครับ เพราะจะทำให้ไม่มีคนเสิร์ชเจอและไม่มี traffic เข้าเว็บ 

การออกแบบหน้าเว็บให้ mobile friendly นั้นก็ไม่ได้ง่ายครับ โดยเฉพาะอย่างยิ่งถ้าเราไม่ได้เป็น web designer หรือ front-end web แบบจ๋า ๆ นี่คืองานหินแน่นอน ดังนั้นจึงเป็นที่มาของ Bootstrap พระเอกของเราในวันนี้


Bootstrap คืออะไร ?

Bootstrap คือ CSS Framework  สำหรับทำ Responsive Web Design ที่ว่ายาก ๆ ดังที่กล่าวมาด้านบน ให้เป็นเรื่องง่าย เพราะว่าเราไม่ต้องออกแบบ CSS Grid หรือ Flexbox เองให้ยุ่งยาก เพราะ Bootstrap จัดการให้เราแล้ว !! โดยทาง Bootstrap ก็ยังได้เคลมตัวเองว่าเป็น CSS ไลบรารี่ที่ได้รับความยอดนิยมสูงสุดในโลก !


ข้อดีของ Bootstrap

  • Responsive: นี่คือจุดเด่นที่สุดของ Bootstrap เลยก็ว่าได้ครับ คือเราจะได้เว็บที่ responsive ปรับเปลี่ยนให้เหมาะสมและใช้งานง่ายไปตามแต่ละอุปกรณ์ที่แสดงผล เช่น desktop, mobile, tablet เป็นต้น
  • Grid & Layout Systems: ระบบ Grid และการจัด Layout ของ Bootstrap ที่เรียกได้ว่า ง่ายและสะดวกพร้อมใช้งานสุด ๆ ทำให้เราไม่ต้องเสียเวลาเขียนระบบพวกนี้ เช่น สร้าง Flexbox หรือ Media Query ใน CSS ตั้งแต่ต้น
  • Easy to Customize: ถึงแม้ว่า Bootstrap จะมี components ต่าง ๆ มาให้เราครบครัน ไม่ว่าจะเป็นระบบ grid, layout, button, form, navbar, etc แต่ก็ไม่ได้เป็นปัญหาในการ custom ตามที่เราต้องการครับ เพราะว่ามันสามารถ custom ได้อยู่เนื้อ (แต่ก็อาจจะลงแรงเพิ่มนิดนึงครับ)
  • Fast Development: ด้วยข้อดีของ Bootstrap ในด้านบนที่กล่าวมา ทำให้เราพัฒนาโปรเจคท์ของเราได้อย่างรวดเร็วแบบสุด ๆ ไปเลยครับ

ข้อเสียของ Bootstrap

  • ดูคล้ายเว็บไซต์อื่น: นี่คือจุดด้วยหลัก ๆ ของ Bootstrap เลยครับ ก็เพราะว่า เว็บที่เราทำมันใช้ components ต่าง ๆ ที่มาจากแหล่งเดียวกันคือ Bootstrap ดังนั้นจะเห็นได้ว่า มันจะดูซ้ำหรือคล้ายคลึงกันกับเว็บอื่นที่ใช้ Bootstrap เหมือนกัน ยิ่งคนที่เป็น developer จะดูออกเลยว่า เว็บไหนใช้ Bootstrap
  • Bigger File Size: ขนาดไฟล์ของ Bootstrap นั้น จะใหญ่กว่า JS และ CSS ปกติครับ เพราะว่ามันต้องมีการใช้สร้าง components มากมาย


เริ่มต้นใช้งาน Bootstrap ด้วย CDN

วิธีการใช้งาน Bootstrap ก็สุดแสนจะง่ายเพียงแค่ก็อปปี้ลิงก์ CDN ด้านล่างไปวางบน <head>...</head> ในหน้า HTML โดยในบทความนี้ใช้เวอร์ชั่นล่าสุดก็คือ Bootstrap 5 ครับ

Bootstrap CSS CDN

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">

Bootstrap JS CDN

 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>


เมื่อนำมาใช้งานในหน้า HTML จะได้

<!doctype html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Quickstart</title>
    <!-- CSS CDN -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello Bootstrap</h1>
    <!-- JS CDN -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
  </body>
</html>



Bootstrap (class) Colors

ตีมสีของ Bootstrap นั้นจะถูกแบ่งออกตามแต่ละคลาสในภาพ 



โดย Bootstrap จะแบ่งสีออกเป็น 7 โทนสี ต่อไปนี้คือเทคนิคการจำโทนสีของ Bootstrap ดังแต่ละคลาสต่อไปนี้

  • primary: โทนสีฟ้า
  • secondary: โทนสีเทา
  • success: โทนสีเขียว
  • danger: โทนสีแดง
  • warning: โทนสีเหลือง
  • info: โทนสีฟ้าน้ำทะเล
  • light: สีสีสว่าง
  • dark: โทนสีดำ

เพียงเท่านี้เพื่อน ๆ ก็สามารถเริ่มใช้งาน Bootstrap กันได้แล้วครับ ในหัวข้อถัดไปเราจะมาลงรายละเอียดกันในการนำ Bootstrap Components ต่าง ๆ มาใช้งานครับ


เปิดโลกการเขียนโปรแกรมและ Software Development ด้วย online courses ที่จะพาคุณอัพสกิลและพัฒนาสู่การเป็นมืออาชีพ เรียนออนไลน์ เรียนจากที่ไหนก็ได้ พร้อมซัพพอร์ตหลังเรียน

เรียนเขียนโปรแกรม