ตารางสอบ

คู่มือต่อเนื่อง Bootstrap 5

• BS5 Tutorial
• BS5 Getting Started
• BS5 Container
• BS5 Grid Basics
• BS5 Typography
• BS5 Color
• BS5 Table
• BS5 Image
• BS5 Jumbotron
• BS5 Alert
• BS5 Button
• BS5 Button Group
• BS5 Badge
• BS5 Progress Bar
• BS5 Loader
• BS5 Pagination
• BS5 List Group
• BS5 Card
• BS5 Dropdown Menu
• BS5 Collapse
• BS5 Navigation
• BS5 Navbar
• BS5 Carousel
• BS5 Modal
• BS5 Tooltip
• BS5 Modal
• BS5 Toast
• BS5 Scrollspy
• BS5 Offcanvas
• BS5 Utility Tools
• BS5 Flex

Bootstrap 5 ฟอร์ม

• BS5 Form
• BS5 Dropdown Menu
• BS5 Checkbox และ Radio Button
• BS5 Range
• BS5 Input Group
• BS5 Floating Label
• BS5 Form Validation

Bootstrap 5 กริด

• BS5 Grid System
• BS5 Stack/Horizontal
• BS5 Grid X-Small
• BS5 Grid Small
• BS5 Grid Medium
• BS5 Grid Large
• BS5 Grid X-Large
• BS5 Grid XXL
• ตัวอย่างรูปแบบเนิน BS5

Bootstrap 5 อื่นๆ

• ตัวอย่างเริ่มต้น BS5
• ประเมินสมรรถนะ BS5

หลักสูตรเลือกตั้ง

คำแนะนำหลักสูตร:

• CodeW3C.com มีทุกอย่าง

Utilities / Helper Classes

Bootstrap 5 มีรูปแบบเชิงประโยชน์/เชิงช่วยหลายรูปแบบที่สามารถตั้งรูปแบบองค์ประกอบอย่างรวดเร็วโดยไม่ต้องใช้รหัส CSS:

เขตขององค์ประกอบ

ใช้รูปแบบชั้นเรียงเพื่อเพิ่มหรือลบเขตขององค์ประกอบ:

ตัวอย่าง

<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>
<br>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>

ทดลองด้วยตัวเอง

ความกว้างขอบ

ใช้ .border-1 ถึง .border-5 เพื่อเปลี่ยนความกว้างของขอบ:

ตัวอย่าง

<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>

ทดลองด้วยตัวเอง

สีขอบ

ใช้คลาสสีขอบเพื่อเพิ่มสีของขอบ:

ตัวอย่าง

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

ทดลองด้วยตัวเอง

โค้งขอบ

ใช้ rounded เพิ่มรอยล้อมทรงกลมสำหรับองค์ประกอบ:

ตัวอย่าง

<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-end"></span>
<span class="rounded-bottom"></span>
<span class="rounded-start"></span>
<span class="rounded-circle"></span>
<span class="rounded-pill" style="width:130px"></span>
<span class="rounded-0"></span>
<span class="rounded-1"></span>
<span class="rounded-2"></span>
<span class="rounded-3"></span>

ทดลองด้วยตัวเอง

เลื่อนข้างและล้างเลื่อนข้าง

ใช้ .float-end คลาสเลื่อนข้างขวาองค์ประกอบ หรือใช้ .float-start เลื่อนข้างซ้าย และใช้ .clearfix คลาสล้างเลื่อนข้างขวา:

ตัวอย่าง

<div class="clearfix">
  <span class="float-start">เลื่อนข้างซ้าย</span>
  <span class="float-end">เลื่อนข้างขวา</span>
</div>

ทดลองด้วยตัวเอง

เลื่อนเป็นปฏิกิริยา

เลื่อนองค์ประกอบที่มีความกว้างหน้าจอต่างกัน ใช้คลาสเลื่อนเป็นปฏิกิริยา (.float-*-left|right) ในนั้น * คือ:

• sm (> = 576px)
• md (> = 768px)
• lg (> = 992px)
• xl (> = 1200px)
• xxl (> = 1400px)

ตัวอย่าง

<div class="float-sm-end">เลื่อนข้างขวาบนหน้าจอมีขนาดหรือกว้างกว่า small</div><br>
<div class="float-md-end">เลื่อนข้างขวาบนหน้าจอมีขนาดหรือกว้างกว่า medium</div><br>
<div class="float-lg-end">เลื่อนข้างขวาบนหน้าจอมีขนาดหรือกว้างกว่า large</div><br>
<div class="float-xl-end">เลื่อนข้างขวาบนหน้าจอมีขนาดหรือกว้างกว่า extra-large</div><br>
<div class="float-xxl-end">เลื่อนข้างขวาบนหน้าจอมีขนาดหรือกว้างกว่า xx-large</div><br>
<div class="float-none">ไม่ทำการเลื่อนข้าง</div>

ทดลองด้วยตัวเอง

ตั้งตรงกลาง

ใช้ .mx-auto องค์ประกอบที่ตั้งตรงกลาง (เพิ่ม margin-left และ margin-right: auto):

ตัวอย่าง

<div class="mx-auto bg-warning" style="width:150px">ศูนย์กลาง</div>

ทดลองด้วยตัวเอง

ความกว้าง

ใช้คลาส w-* (.w-25、.w-50、.w-75、.w-100、.mw-auto、.mw-100）ตั้งค่าความกว้างขององค์ประกอบ:

ตัวอย่าง

<div class="w-25 bg-warning">ความกว้าง 25%</div>
<div class="w-50 bg-warning">ความกว้าง 50%</div>
<div class="w-75 bg-warning">ความกว้าง 75%</div>
<div class="w-100 bg-warning">ความกว้าง 100%</div>
<div class="w-auto bg-warning">ความกว้างอัตโนมัติ</div>
<div class="mw-100 bg-warning">ความกว้างสูงสุด 100%</div>

ทดลองด้วยตัวเอง

ความสูง

ใช้คลาส h-* (.h-25、.h-50、.h-75、.h-100、.mh-auto、.mh-100）ตั้งค่าความสูงขององค์ประกอบ:

ตัวอย่าง

<div style="height:200px;background-color:#ddd">
  <div class="h-25 bg-warning">ความสูง 25%</div>
  <div class="h-50 bg-warning">ความสูง 50%</div>
  <div class="h-75 bg-warning">ความสูง 75%</div>
  <div class="h-100 bg-warning">ความสูง 100%</div>
  <div class="h-auto bg-warning">ความสูงอัตโนมัติ</div>
  <div class="mh-100 bg-warning" style="height:500px">ความสูงสูงสุด 100%</div>
</div>

ทดลองด้วยตัวเอง

ระยะห่าง

Bootstrap 5 มีคลาสเมาะรับเนื้อหาและประกายเรียบร้อยสำหรับมาตรฐานทั้งหมด:

• xs (<= 576px)
• sm (> = 576px)
• md (> = 768px)
• lg (> = 992px)
• xl (> = 1200px)
• xxl (> = 1400px)

การใช้งานรูปแบบของคลาสเหล่านี้คือ：{property}{sides}-{size} ใช้ xs，และ {property}{sides}-{breakpoint}-{size} ใช้ sm、md、lg、xl และ xxl。

property คือหนึ่งในรายการต่อไปนี้:

• m - ตั้งค่า margin
• p - ตั้งค่า padding

sides คือหนึ่งในรายการต่อไปนี้:

• t - ตั้งค่า margin-top หรือ padding-top
• b - ตั้งค่า margin-bottom หรือ padding-bottom
• s - ตั้งค่า margin-left หรือ padding-left
• e - ตั้งค่า margin-right หรือ padding-right
• x - ตั้งค่าพร้อมกัน padding-left และ padding-right หรือ margin-left และ margin-right
• y - ตั้งค่าพร้อมกัน padding-top และ padding-bottom หรือ margin-top และ margin-bottom
• blank - ตั้งค่าขอบหน้าบริเวณภายในทั้งหมดสี่ด้านขององค์ประกอบ margin หรือ padding

size คือหนึ่งในรายการต่อไปนี้:

• 0 - ใช้ margin หรือ padding ตั้งค่าเป็น 0
• 1 - ใช้ margin หรือ padding ตั้งค่าเป็น .25rem
• 2 - ใช้ margin หรือ padding ตั้งค่าเป็น .5rem
• 3 - ใช้ margin หรือ padding ตั้งค่าเป็น 1rem
• 4 - ใช้ margin หรือ padding ตั้งค่าเป็น 1.5rem
• 5 - ใช้ margin หรือ padding ตั้งค่าเป็น 3rem
• auto - ใช้ margin ตั้งค่าเป็น auto

ตัวอย่าง

<div class="pt-4 bg-warning">ฉันมีเพียงขอบหน้าบริเวณภายในด้านบน (1.5rem)</div>
<div class="p-5 bg-success">ฉันมีขอบหน้าบริเวณภายในทั้งหมด (3rem)</div>
<div class="m-5 pb-5 bg-info">ฉันมีขอบหน้าบริเวณภายนอกทั้งหมด (3rem) และขอบหน้าบริเวณภายในด้านล่าง (3rem)</div>

ทดลองด้วยตัวเอง

ตัวอย่างหน่วยระยะทางเพิ่มเติม

คุณสามารถพบใน คู่มือหน่วยมาตรฐาน CSS อ่านเพิ่มเติมเกี่ยวกับ rem และหน่วยมาตรฐานขนาดต่างๆ ในหน้าเนื้อหานี้。

เงา

ใช้ shadow- ประจำปริมาณสำหรับเพิ่มเงาเข้าในองค์ประกอบ

ตัวอย่าง

<div class="shadow-none p-4 mb-4 bg-light">ไม่มีเงา</div>
<div class="shadow-sm p-4 mb-4 bg-white">เงาเล็ก</div>
<div class="shadow p-4 mb-4 bg-white">เงาปกติ</div>
<div class="shadow-lg p-4 mb-4 bg-white">เงาใหญ่</div>

ทดลองด้วยตัวเอง

การจัดลำดับตามแนวตั้ง

ใช้ align- รูปแบบเปลี่ยนวิธีการจัดลำดับขององค์ประกอบ (มีผลเฉพาะองค์ประกอบ inline, inline-block, inline-table และ cell ของตาราง) ：

ตัวอย่าง

<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

ทดลองด้วยตัวเอง

อัตราส่วน

สร้างวิดีโอหรือสไลด์ที่เป็นปฏิกิริยาตอบสนองตามความกว้างขององค์ประกอบพ่อ

เพิ่ม .ratio รูปแบบกับอัตราส่วนที่คุณเลือก .aspect-ratio-* เพิ่มเข้าไปในองค์ประกอบพ่อ และเพิ่มที่นั้นเข้าไป (วิดีโอหรือ iframe)：

ตัวอย่าง

<!-- Aspect ratio 1:1 -->
<div class="ratio ratio-1x1">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 4:3 -->
<div class="ratio ratio-4x3">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 16:9 -->
<div class="ratio ratio-16x9">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 21:9 -->
<div class="ratio ratio-21x9">
  <iframe src="shanghai.mp4"></iframe>
</div>

ทดลองด้วยตัวเอง

ความเห็น

ใช้ .visible หรือ .invisible รูปแบบสามารถควบคุมความเห็นได้ขององค์ประกอบ：

หมายเหตุ：เหล่ารูปแบบนี้จะไม่เปลี่ยนค่า display ของ CSS พวกมันเพียงแค่เพิ่ม visibility:visible หรือ visibility:hidden。

ตัวอย่าง

<div class="visible">ผมเป็นสิ่งที่เห็น</div>
<div class="invisible">ผมเป็นสิ่งที่ไม่เห็น</div>

ทดลองด้วยตัวเอง

ไอคอนปิด

ใช้ .btn-close ประเภทสามารถตั้งรูปแบบสำหรับไอคอนปิด

ตัวอย่าง

<button type="button" class="btn-close"></button>

ทดลองด้วยตัวเอง

สเครนเราเดอร์

ใช้ .visually-hidden ประเภทสามารถซ่อนอิเล็กทรอนิกส์บนอุปกรณ์ทั้งหมด ยกเว้นเครื่องอ่านสเครน

ตัวอย่าง

<span class="visually-hidden">จะถูกซ่อนทุกหน้าที่ยกเว้นจากสเครนเราเดอร์</span>

ทดลองด้วยตัวเอง

สี

ตามที่กล่าวถึงในบท 'สี' ต่อไปนี้เป็นรายการของประเภทสีข้อความและสีพื้นหลัง

ประเภทสำหรับสีข้อความคือ

• .text-muted
• .text-primary
• .text-success
• .text-info
• .text-warning
• .text-danger
• .text-secondary
• .text-white
• .text-dark
• .text-body（เป็นสีของ body โดยเริ่มต้น / ส่วนใหญ่เป็นสีดำ）
• .text-light

ตัวอย่าง

ทดลองด้วยตัวเอง

ประเภทของข้อความประกอบกันยังสามารถใช้กับลิงก์

ตัวอย่าง

ทดลองด้วยตัวเอง

คุณยังสามารถใช้ .text-black-50 หรือ .text-white-50 ประเภทเพื่อเพิ่มความโปร่งใส 50% ของข้อความสีดำหรือสีขาว

ตัวอย่าง

ทดลองด้วยตัวเอง

สีพื้นหลัง

ประเภทสำหรับสีพื้นหลังคือ

• .bg-primary
• .bg-success
• .bg-info
• .bg-warning
• .bg-danger
• .bg-secondary
• .bg-dark
• .bg-light

โปรดทราบว่า สีพื้นหลังจะไม่ตั้งค่าสีของข้อความ ดังนั้นในบางกรณีคุณจะต้องใช้ .text-* ประกอบกับประเภท

ตัวอย่าง

ทดลองด้วยตัวเอง

กล่องเครื่องมือ

ประเมิน JavaScript

ลิงก์ผู้สนับสนุน