ตารางหลักสูตร

อบรม Bootstrap 5

• BS5 การสอน
• BS5 ชั้นต้น
• BS5 ตัวแทน
• BS5 พื้นฐานเครื่องหมายเลข
• BS5 การจัดระเบียบ
• BS5 สี
• BS5 ตาราง
• BS5 รูปภาพ
• BS5 Jumbotron
• BS5 ตัวแทนเตือน
• BS5 ปุ่ม
• BS5 กลุ่มปุ่ม
• BS5 สัญลักษณ์
• BS5 แสดงโดยเส้นโค้ง
• BS5 โหลด
• BS5 หน้าแสดง
• BS5 กลุ่มรายการ
• BS5 แทนบน
• BS5 โซนด้านล่าง
• BS5 ตัวแทนย่อย
• BS5 แถว
• BS5 แถวนำ
• BS5 โซนไซก์
• BS5 โมเดิล
• BS5 ข้อความหมาย
• BS5 โฟล์เตอร์
• BS5 Toast
• BS5 Scrollspy
• BS5 Offcanvas
• เครื่องมือประโยชน์ BS5
• BS5 Flex

Bootstrap 5 ฟอร์ม

• ฟอร์ม BS5
• BS5 ตัวเลือกเมนู
• BS5 ตัวเลือกตัวเลือกและปุ่มเลือก
• BS5 ระยะเวลา
• BS5 กลุ่มช่องบันทึก
• BS5 แทร็กแบนเนอร์
• BS5 การยืนยันฟอร์ม

Bootstrap 5 กริด

• BS5 ระบบเครื่องหมายเลข
• BS5 ตัวแทนเครื่องหมายเลข Stack/Horizontal
• BS5 ตัวแทนเครื่องหมายเลข XSmall
• BS5 ตัวแทนเครื่องหมายเลข Small
• BS5 ตัวแทนเครื่องหมายเลข Medium
• BS5 ตัวแทนเครื่องหมายเลข Large
• BS5 ตัวแทนเครื่องหมายเลข XLarge
• BS5 ตัวแทนเครื่องหมายเลข XXL
• BS5 ตัวแทนเครื่องหมายเลข

Bootstrap 5 อื่นๆ

• BS5 รูปแบบพื้นฐาน
• BS5 ขอบเขต

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

ข้อแนะนำหลักสูตร

• CodeW3C.com ตู้เท้า

Flexbox

ความแตกต่างสำคัญระหว่าง Bootstrap 3 และ Bootstrap 4 & 5 คือ Bootstrap 5 ใช้ flexbox แทน floating ในการจัดการโครงสร้าง

โมดูลเครื่องหมายเลขแบบแฟล็กซ์ที่สามารถออกแบบโครงสร้างเครื่องหมายเลขที่เป็นตอบสนองได้ง่ายขึ้น โดยไม่จำเป็นต้องใช้ floating หรือ positioning

หากคุณไม่เคยเห็น flex ก่อน คุณสามารถเรียนรู้ได้ที่ การสอน CSS Flexbox เรียนรู้

หมายเหตุ:IE9 และเวอร์ชันต่อไปนั้นไม่สนับสนุน Flexbox

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

ตัวอย่าง

เพื่อที่จะสร้างตัวแทน flexbox และแปลงโครงสร้างย่อยๆ ให้เป็น flex ใช้ d-flex รูปแบบ:

<div class="d-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">โครงการยืดเยื้อ 1</div>
  <div class="p-2 bg-warning">โครงการยืดเยื้อ 2</div>
  <div class="p-2 bg-primary">โครงการยืดเยื้อ 3</div>
</div>

ลองเดาเดินทางด้วยตัวเอง

ตัวอย่าง

เพื่อที่จะสร้างตัวแทน flexbox ในแถวเดียว ใช้ d-inline-flex รูปแบบ:

<div class="d-inline-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">โครงการยืดเยื้อ 1</div>
  <div class="p-2 bg-warning">โครงการยืดเยื้อ 2</div>
  <div class="p-2 bg-primary">โครงการยืดเยื้อ 3</div>
</div>

ลองเดาเดินทางด้วยตัวเอง

ทางแนวน้ำเสียของตัวเลข

โปรดใช้ .flex-row แสดงเป้าหมายความยืดหยาคะแนนทางแนวน้ำเสียของตัวเลข (แบ่งย่อย) นี้เป็นการตั้งค่าโดยเริ่มต้น

คำเตือน：ใช้ .flex-row-reverse สามารถจัดลำดับของเป้าหมายความยืดหยาคะแนนทางด้านขวาของแนวน้ำเสียของตัวเลขได้

ตัวอย่าง

<div class="d-flex flex-row bg-secondary">
  <div class="p-2 bg-info">โครงการยืดเยื้อ 1</div>
  <div class="p-2 bg-warning">โครงการยืดเยื้อ 2</div>
  <div class="p-2 bg-primary">โครงการยืดเยื้อ 3</div>
</div>
<div class="d-flex flex-row-reverse bg-secondary">
  <div class="p-2 bg-info">โครงการยืดเยื้อ 1</div>
  <div class="p-2 bg-warning">โครงการยืดเยื้อ 2</div>
  <div class="p-2 bg-primary">โครงการยืดเยื้อ 3</div>
</div>

ลองเดาเดินทางด้วยตัวเอง

ทางตั้งแต่ด้านบนลง

โปรดใช้ .flex-column แสดงเป้าหมายความยืดหยาคะแนนทางตั้งแต่ด้านบนลง (ซ้อนกัน) หรือใช้ .flex-column-reverse คว่ำแบบทางตั้งแต่ด้านล่างขึ้น

ตัวอย่าง

<div class="d-flex flex-column">
  <div class="p-2 bg-info">โครงการยืดเยื้อ 1</div>
  <div class="p-2 bg-warning">โครงการยืดเยื้อ 2</div>
  <div class="p-2 bg-primary">โครงการยืดเยื้อ 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2 bg-info">โครงการยืดเยื้อ 1</div>
  <div class="p-2 bg-warning">โครงการยืดเยื้อ 2</div>
  <div class="p-2 bg-primary">โครงการยืดเยื้อ 3</div>
</div>

ลองเดาเดินทางด้วยตัวเอง

จัดตัวเนื้อหา

ใช้ .justify-content-* รูปแบบหรือคลาสส์สามารถเปลี่ยนรูปแบบการจัดลำดับของเป้าหมายความยืดหยาคะแนนได้:

• start（โดยเริ่มต้น）
• end
• center
• between
• around

ตัวอย่าง

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

ลองเดาเดินทางด้วยตัวเอง

ขนาดเท่ากัน

ใช้บนโครงการ flex .flex-fill สามารถบังคับให้มีขนาดเท่ากัน

ตัวอย่าง

<div class="d-flex">
  <div class="p-2 bg-info flex-fill">เป้าหมายของความยืดหยาคะแนน 1</div>
  <div class="p-2 bg-warning flex-fill">เป้าหมายของความยืดหยาคะแนน 2</div>
  <div class="p-2 bg-primary flex-fill">เป้าหมายของความยืดหยาคะแนน 3</div>
</div>

ลองเดาเดินทางด้วยตัวเอง

ขยาย

ใช้บนโครงการ flex .flex-grow-1 สามารถใช้พื้นที่เกินได้

ตัวอย่าง

<div class="d-flex">
  <div class="p-2 bg-info">โครงการยืดเยื้อ 1</div>
  <div class="p-2 bg-warning">โครงการยืดเยื้อ 2</div>
  <div class="p-2 bg-primary flex-grow-1">โครงการยืดเยื้อ 3</div>
</div>

ลองเดาเดินทางด้วยตัวเอง

คำเตือน：ใช้บนโครงการ flex .flex-shrink-1 ควบคุมให้มันย่อตัวเมื่อมีความจำเป็น

ลำดับ

ใช้ .order คลาสสามารถเปลี่ยนความจัดลำดับทาง視覚ของโครงการ flex แบบเฉพาะได้

ตัวอย่าง

<div class="d-flex bg-secondary">
  <div class="p-2 bg-info order-3">โครงการยืดเยื้อ 1</div>
  <div class="p-2 bg-warning order-2">โครงการยืดเยื้อ 2</div>
  <div class="p-2 bg-primary order-1">โครงการยืดเยื้อ 3</div>
</div>

ลองเดาเดินทางด้วยตัวเอง

ของด้านนอกอัตโนมัติ

ใช้ .ms-autoหรือใช้ .me-auto（ย้ายโครงการไปทางซ้าย）สามารถเพิ่มเมื่อเราต้องการของด้านนอกอัตโนมัติง่ายๆ ได้

ตัวอย่าง

<div class="d-flex bg-secondary">
  <div class="p-2 ms-auto bg-info">โครงการยืดเยื้อ 1</div>
  <div class="p-2 bg-warning">โครงการยืดเยื้อ 2</div>
  <div class="p-2 bg-primary">โครงการยืดเยื้อ 3</div>
</div>
<div class="d-flex bg-secondary">
  <div class="p-2 bg-info">โครงการยืดเยื้อ 1</div>
  <div class="p-2 bg-warning">โครงการยืดเยื้อ 2</div>
  <div class="p-2 me-auto bg-primary">โครงการยืดเยื้อ 3</div>
</div>

ลองเดาเดินทางด้วยตัวเอง

ควบคุมการเปลี่ยนแปลงบรรทัด

ผ่าน .flex-nowrap（เริ่มต้น）、.flex-wrap หรือ .flex-wrap-reverseควบคุมวิธีที่โครงการ flex จะหุ้มเนื่องในตัวแทน flex ของเรา。

ตัวอย่าง

<div class="d-flex flex-wrap">..</div>
<div class="d-flex flex-wrap-reverse">..</div>
<div class="d-flex flex-nowrap">..</div>

ลองเดาเดินทางด้วยตัวเอง

จัดตัวเนื้อหา

โปรดใช้ .align-content-* ควบคุมการจัดตัวตรงของโครงการความยืดเยื้อตั้งแต่กลาง

• .align-content-start（โดยเริ่มต้น）
• .align-content-end
• .align-content-center
• .align-content-between
• .align-content-around
• .align-content-stretch

หมายเหตุ:รูปแบบเหล่านี้ไม่มีผลต่อชนิดที่มีความยืดหยุ่นเส้นทางเดียว

โปรดกดปุ่มด้านล่างเพื่อดูความแตกต่างระหว่างห้ารูปแบบโดยเปลี่ยนการจัดลำดับตัวอักษรตั้งฝั่งของชนิดที่มีความยืดหยุ่นในตัวอย่าง

ตัวอย่าง

<div class="d-flex flex-wrap align-content-start">..</div>
<div class="d-flex flex-wrap align-content-end">..</div>
<div class="d-flex flex-wrap align-content-center">..</div>
<div class="d-flex flex-wrap align-content-around">..</div>
<div class="d-flex flex-wrap align-content-stretch">..</div>

ลองเดาเดินทางด้วยตัวเอง

จัดตัวองค์ประกอบ

โปรดใช้ .align-items-* การควบคุมรูปแบบเส้นทางเดียวการจัดลำดับตัวอักษรตั้งฝั่งสำหรับชนิดที่มีความยืดหยุ่น

• .align-items-start
• .align-items-end
• .align-items-center
• .align-items-baseline
• .align-items-stretch（โดยเริ่มต้น）

โปรดกดปุ่มด้านล่างเพื่อดูความแตกต่างระหว่างห้ารูปแบบ

ตัวอย่าง

<div class="d-flex align-items-start">..</div>
<div class="d-flex align-items-end">..</div>
<div class="d-flex align-items-center">..</div>
<div class="d-flex align-items-baseline">..</div>
<div class="d-flex align-items-stretch">..</div>

ลองเดาเดินทางด้วยตัวเอง

การจัดลำดับตัวอักษรตั้งตัวเอง

โปรดใช้ .align-self-* การควบคุมรูปแบบกำหนดชนิดที่มีความยืดหยุ่นการจัดลำดับตัวอักษรตั้งฝั่ง

• .align-self-start
• .align-self-end
• .align-self-center
• .align-self-baseline
• .align-self-stretch（โดยเริ่มต้น）

คลิกที่ปุ่มด้านล่างเพื่อดูความแตกต่างระหว่างห้าคลาส...

ตัวอย่าง

<div class="d-flex bg-light" style="height:150px">
  <div class="p-2 border">รายการ flex 1</div>
  <div class="p-2 border align-self-start">รายการ flex 2</div>
  <div class="p-2 border">รายการ flex 3</div>
</div>

ลองเดาเดินทางด้วยตัวเอง

ประเภท flex ตอบสนอง

ทุกประเภท flex มีคลาสตอบสนองเพิ่มเติม ทำให้ง่ายต่อการตั้งค่า flex ในขนาดหน้าจอเฉพาะ

* สามารถแทนด้วย sm, md, lg, xl หรือ xxl ตามลำดับ ซึ่งแสดงถึงหน้าจอขนาดเล็ก, ขนาดปานกลาง, ขนาดใหญ่, ขนาดใหญ่มาก และ ขนาดใหญ่ยิ่ง

ค้นหาประเภท flex ที่เฉพาะ...

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

เกมส์ทดสอบ JavaScript

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