HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Bootstrap 4 บทช่วยสอน

BS4 HOME BS4 เริ่มต้น BS4 คอนเทนเนอร์ BS4 Grid Basic BS4 วิชาการพิมพ์ BS4 สี ตาราง BS4 BS4 รูปภาพ BS4 Jumbotron การแจ้งเตือน BS4 ปุ่ม BS4 กลุ่มปุ่ม BS4 ป้าย BS4 แถบความคืบหน้า BS4 BS4 Spinners BS4 การแบ่งหน้า BS4 รายการกลุ่ม การ์ด BS4 BS4 ดรอปดาวน์ BS4 ยุบ BS4 Navs BS4 Navbar แบบฟอร์ม BS4 อินพุต BS4 กลุ่มอินพุต BS4 BS4 แบบฟอร์มที่กำหนดเอง BS4 ม้าหมุน BS4 โมดอล เคล็ดลับเครื่องมือ BS4 BS4 ป๊อปโอเวอร์ BS4 ขนมปังปิ้ง BS4 Scrollspy BS4 ยูทิลิตี้ BS4 Flex ไอคอน BS4 วัตถุสื่อ BS4 ตัวกรอง BS4

Bootstrap 4 Grid

ระบบกริด BS4 BS4 ซ้อน/แนวนอน BS4 Grid XSmall BS4 กริดขนาดเล็ก BS4 กริดขนาดกลาง BS4 กริดขนาดใหญ่ BS4 Grid XLarge ตัวอย่างกริด BS4

Bootstrap 4 อื่นๆ

เทมเพลตพื้นฐาน BS4 แบบฝึกหัด BS4 แบบทดสอบ BS4

Bootstrap 4 อ้างอิง

ทุกชั้นเรียน JS Alert ปุ่ม JS JS Carousel JS ยุบ JS Dropdown JS Modal JS Popover JS Scrollspy JS แท็บ JS Toasts JS Tooltip


Bootstrap 4 เริ่มต้น

❮ ก่อนหน้า ถัดไป ❯

Bootstrap คืออะไร?

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

Responsive Web Design คืออะไร?

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

Bootstrap 4 ตัวอย่าง

<div class="jumbotron text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p>
</div>

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
</div>

Bootstrap รุ่น

บทช่วยสอนนี้เป็นไปตามBootstrap 4ซึ่งเปิดตัวในปี 2018 โดยเป็นการอัปเกรดเป็นBootstrap 3พร้อมส่วนประกอบใหม่ สไตล์ชีตที่เร็วขึ้น การตอบสนองที่มากขึ้น เป็นต้น

Bootstrap 5 (เผยแพร่ในปี 2564) เป็น Bootstrapเวอร์ชันล่าสุด; รองรับรุ่นล่าสุดที่เสถียรของเบราว์เซอร์และแพลตฟอร์มหลักทั้งหมด อย่างไรก็ตาม ไม่รองรับ Internet Explorer 11 ขึ้นไป

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

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

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

ข้อดีของ Bootstrap:

  • ใช้งานง่าย:ใครก็ตามที่มีความรู้พื้นฐานเกี่ยวกับ HTML และ CSS สามารถเริ่มใช้ Bootstrap . ได้
  • คุณสมบัติการตอบสนอง: CSS ที่ตอบสนองของ Bootstrap ปรับให้เข้ากับโทรศัพท์ แท็บเล็ต และเดสก์ท็อป
  • แนวทางเพื่อมือถือเป็นอันดับแรก:ใน Bootstrap รูปแบบที่เน้นมือถือเป็นหลักเป็นส่วนหนึ่งของเฟรมเวิร์กหลัก
  • ความเข้ากันได้ของ เบราว์เซอร์: Bootstrap 4 เข้ากันได้กับเบราว์เซอร์สมัยใหม่ทั้งหมด (Chrome, Firefox, Internet Explorer 10+, Edge, Safari และ Opera)

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

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

คุณสามารถ:

  • รวม Bootstrap 4 จาก CDN
  • ดาวน์โหลด Bootstrap 4 จาก getbootstrap.com

Bootstrap 4 CDN

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

jsDelivrให้การสนับสนุน CDN สำหรับ CSS และ JavaScript ของ Bootstrap คุณต้องรวม jQuery ด้วย:

jsDelivr:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>

<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

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

jQuery และ Popper?
Bootstrap 4 ใช้ jQuery และ Popper.js สำหรับส่วนประกอบ JavaScript (เช่น modals, tooltips, popovers เป็นต้น) อย่างไรก็ตาม หากคุณเพียงแค่ใช้ส่วน CSS ของ Bootstrap คุณก็ไม่ต้องการมัน

  • การแจ้งเตือนที่ปิดได้
  • ปุ่มและช่องทำเครื่องหมาย/ปุ่มตัวเลือกสำหรับการสลับสถานะ
  • ม้าหมุนสำหรับสไลด์ ตัวควบคุม และไฟแสดง
  • ยุบเพื่อสลับเนื้อหา
  • Dropdowns (also requires Popper.js for perfect positioning)
  • Modals (open and close)
  • Navbar (for collapsible menus)
  • Tooltips and popovers (also requires Popper.js for perfect positioning)
  • Scrollspy for scroll behavior and navigation updates

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

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

สร้างหน้าเว็บแรกด้วย Bootstrap 4

1. เพิ่ม HTML5 doctype

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

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

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

2. Bootstrap 4 เป็นมือถืออันดับแรก

Bootstrap 4 ได้รับการออกแบบให้ตอบสนองต่ออุปกรณ์มือถือ สไตล์เน้นอุปกรณ์พกพาเป็นส่วนหนึ่งของเฟรมเวิร์กหลัก

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

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

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

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

3. ตู้คอนเทนเนอร์

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

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

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

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

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

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

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

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>

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

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

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

<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>

❮ ก่อนหน้า ถัดไป ❯