บูทสแตรป 5: เริ่มต้นใช้งาน

สารบัญ

    แสดงสารบัญ

Bootstrap คืออะไร?

  • Bootstrap เป็นเฟรมเวิร์กส่วนหน้าฟรีเพื่อการพัฒนาเว็บที่เร็วและง่ายขึ้น

  • Bootstrap ประกอบด้วยเทมเพลตการออกแบบที่ใช้ HTML และ CSS สำหรับการพิมพ์ แบบฟอร์ม ปุ่ม ตาราง การนำทาง โมดอล ภาพหมุน และอื่นๆ อีกมากมาย รวมถึงปลั๊กอิน JavaScript เสริม

  • Bootstrap ยังช่วยให้คุณสร้างการออกแบบที่ตอบสนองได้อย่างง่ายดาย

การออกแบบเว็บแบบตอบสนองคืออะไร

การออกแบบเว็บไซต์ที่ตอบสนองเป็นเรื่องเกี่ยวกับการสร้างเว็บไซต์ที่ปรับเปลี่ยนโดยอัตโนมัติ ให้ดูดีบนอุปกรณ์ทุกประเภทตั้งแต่โทรศัพท์ขนาดเล็กไปจนถึงเดสก์ท็อปขนาดใหญ่

ตัวอย่าง Bootstrap 5

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p>
</div>
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 5 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p> 
</div>
  
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

</body>
</html>

เวอร์ชัน Bootstrap

Bootstrap 5 (เปิดตัวปี 2021) เป็น Bootstrap เวอร์ชันใหม่ล่าสุด (เปิดตัวปี 2013); ด้วยส่วนประกอบใหม่ สไตล์ชีทที่เร็วขึ้น และการตอบสนองที่มากขึ้น

Bootstrap 5 รองรับเบราว์เซอร์หลักและเบราว์เซอร์หลักทั้งหมดรุ่นล่าสุดและเสถียร แพลตฟอร์ม อย่างไรก็ตาม ไม่รองรับ Internet Explorer 11 และต่ำกว่า

ความแตกต่างที่สำคัญระหว่าง Bootstrap 5 และ Bootstrap 3 และ 4 ก็คือ Bootstrap 5 เปลี่ยนไปใช้ vanilla JavaScript แทนที่จะเป็น jQuery

หมายเหตุ: Bootstrap 3 และ Bootstrap 4 ยังคงได้รับการสนับสนุนจากทีมงานสำหรับการแก้ไขข้อบกพร่องที่สำคัญและการเปลี่ยนแปลงเอกสาร และปลอดภัยอย่างยิ่งหากจะใช้ต่อไป อย่างไรก็ตาม คุณสมบัติใหม่จะไม่ถูกเพิ่มเข้าไป พวกเขา.

ทำไมต้องใช้ Bootstrap?

ข้อดีของบูทสแตรป:

  • ใช้งานง่าย: ใครก็ตามที่มีความรู้พื้นฐานเกี่ยวกับ HTML และ CSS ก็สามารถเริ่มใช้ Bootstrap ได้

  • ฟีเจอร์ตอบสนอง: CSS ตอบสนองของ Bootstrap ปรับให้เหมาะกับโทรศัพท์ แท็บเล็ต และเดสก์ท็อป

  • แนวทางที่เน้นมือถือเป็นหลัก: ใน Bootstrap สไตล์ที่เน้นมือถือเป็นหลักเป็นส่วนหนึ่งของเฟรมเวิร์กหลัก

  • ความเข้ากันได้ของเบราว์เซอร์: Bootstrap 5 เข้ากันได้กับเบราว์เซอร์รุ่นใหม่ทั้งหมด (Chrome, Firefox, Edge, Safari และ Opera) โปรดทราบว่า หากคุณต้องการการสนับสนุนสำหรับ IE11 และดาวน์ต่ำ คุณต้องใช้ BS4 หรือ BS3

จะรับ Bootstrap 5 ได้ที่ไหน

มีสองวิธีในการเริ่มใช้ Bootstrap 5 บนเว็บไซต์ของคุณเอง

คุณสามารถ:

  • รวม Bootstrap 5 จาก CDN

  • ดาวน์โหลด Bootstrap 5 จาก getbootstrap.com

บูทสแตรป 5 CDN

หากคุณไม่ต้องการดาวน์โหลดและโฮสต์ Bootstrap 5 ด้วยตัวเอง คุณสามารถรวมได้จาก CDN (Content Delivery Network)

jsDelivr ให้การสนับสนุน CDN สำหรับ CSS และ JavaScript ของ Bootstrap:

แม็กซ์ซีดีเอ็น :

<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
 
<!-- Latest compiled JavaScript -->
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

ข้อดีประการหนึ่งของการใช้ Bootstrap 5 CDN:
ผู้ใช้จำนวนมากได้ดาวน์โหลดแล้ว Bootstrap 5 จาก jsDelivr เมื่อเยี่ยมชม ไซต์อื่น ด้วยเหตุนี้ จะมีการโหลดจากแคชเมื่อพวกเขาเยี่ยมชมไซต์ของคุณ ซึ่งจะทำให้เวลาในการโหลดเร็วขึ้น นอกจากนี้ CDN ส่วนใหญ่จะตรวจสอบให้แน่ใจว่าเมื่อผู้ใช้ร้องขอไฟล์จากนั้น ไฟล์นั้นก็จะถูกให้บริการ จากเซิร์ฟเวอร์ที่อยู่ใกล้ที่สุด ซึ่งทำให้โหลดเร็วขึ้นอีกด้วย

JavaScript?
Bootstrap 5 ใช้ JavaScript เพื่อความแตกต่าง ส่วนประกอบ (เช่น โมดัล คำแนะนำเครื่องมือ ป๊อปโอเวอร์ ฯลฯ) อย่างไรก็ตาม หากคุณเพียงแค่ใช้ ส่วน CSS ของ Bootstrap คุณไม่ต้องการมัน

กำลังดาวน์โหลด Bootstrap 5

หากคุณต้องการดาวน์โหลดและโฮสต์ Bootstrap 5 ด้วยตัวเอง ให้ไปที่ https://getbootstrap.com/, และปฏิบัติตามคำแนะนำที่นั่น

สร้างหน้าเว็บแรกของคุณด้วย Bootstrap 5

1. เพิ่มประเภทเอกสาร HTML5

Bootstrap 5 ใช้องค์ประกอบ HTML และคุณสมบัติ CSS ที่ต้องการ ประเภทเอกสาร HTML5

รวมประเภทเอกสาร HTML5 ที่ตอนต้นเสมอ หน้า พร้อมด้วยแอตทริบิวต์ lang และชื่อและชุดอักขระที่ถูกต้อง:

<!DOCTYPE html>
<html lang="en">
  <head>
   <title>Bootstrap 5 Example</title>
    <meta charset="utf-8"> 
  </head>
</html>

<แข็งแกร่ง>2. Bootstrap 5 เน้นอุปกรณ์เคลื่อนที่เป็นหลัก

Bootstrap 5 ได้รับการออกแบบให้ตอบสนองต่ออุปกรณ์มือถือ สไตล์ที่เน้นมือถือเป็นอันดับแรกคือ ส่วนหนึ่งของกรอบหลัก

เพื่อให้แน่ใจว่าการแสดงผลและการซูมแบบสัมผัสเหมาะสม ให้เพิ่มแท็ก ต่อไปนี้ภายใน <รหัส class="w3-codespan"><head> องค์ประกอบ:

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width ส่วนกำหนดความกว้างของหน้าให้เป็นไปตามความกว้างของหน้าจอ ของอุปกรณ์ (ซึ่งจะแตกต่างกันไปขึ้นอยู่กับอุปกรณ์)

ส่วน initial-scale=1 จะกำหนดระดับการซูมเริ่มต้นเมื่อโหลดเพจครั้งแรก โดยเบราว์เซอร์

<แข็งแกร่ง>3. คอนเทนเนอร์

Bootstrap 5 ยังต้องมีองค์ประกอบที่มีเพื่อตัดเนื้อหาไซต์

มีสองคลาสคอนเทนเนอร์ให้เลือก:

  1. คลาส .container ให้ คอนเทนเนอร์ความกว้างคงที่ ที่ตอบสนอง

  2. คลาส .container-fluid จัดให้มี คอนเทนเนอร์แบบเต็มความกว้าง ซึ่งครอบคลุมความกว้างทั้งหมดของวิวพอร์ต

.container
.container-fluid

Bootstrap พื้นฐานสองหน้า 5 หน้า

ตัวอย่างต่อไปนี้แสดงโค้ดสำหรับเพจ Bootstrap 5 พื้นฐาน (พร้อมคอนเทนเนอร์ความกว้างคงที่แบบตอบสนอง):

ตัวอย่างคอนเทนเนอร์

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container class.</p>
  <p>The .container class provides a responsive fixed width container.</p>
</div>
</body>
</html>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container class.</p>
  <p>The .container class provides a responsive fixed width container.</p>
  <p>Resize the browser window to see that the container width will change at different breakpoints.</p>
</div>

</body>
</html>

ตัวอย่างต่อไปนี้แสดงโค้ดสำหรับเพจ Bootstrap 5 พื้นฐาน (พร้อมคอนเทนเนอร์แบบเต็มความกว้าง):

ตัวอย่างของเหลวในคอนเทนเนอร์

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container-fluid class.</p>
  <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>
</div>
</body>
</html>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container-fluid class.</p>
  <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>     
</div>

</body>
</html>