คอร์สเรียน Bootstrap 5 เพื่อการสร้างเว็บที่ง่ายกว่าเดิม

บทนำ

• แนะนำคอร์สเรียน Bootstrap 5

  09:45 นาที

• ดาวน์โหลดสูตรโกง (Cheatsheet)

  02:23 นาที

บทที่ 1 เตรียมใช้งาน Bootstrap 5

• 1.1 Emmet - การใช้เครื่องมือสร้างโค้ด HTML อย่างรวดเร็ว

  09:57 นาที

• 1.2 Installation - ติดตั้ง Bootstrap 5

  15:10 นาที

• 1.3 VSCode: HTML CSS Support - ติดตั้งส่วนเสริมสำหรับช่วยเหลือการใช้ CSS Framework

  02:20 นาที

บทที่ 2 การจัดวางตำแหน่ง (Layouts) และ Utility Class ต่าง ๆ

• 2.1 Color - ระบบสี

  07:24 นาที

• 2.2 Sizing - การกำหนดขนาด

  10:18 นาที

• 2.3 Container & Breakpoint - การจัดตำแหน่งเนื้อหาร่วมกับขนาดหน้าจอบนอุปกรณ์ต่าง ๆ

  08:52 นาที

• 2.4 Grid - การจัดตำแหน่งเนื้อหาแบบตาราง

  24:36 นาที

• 2.5 Flex - การจัดตำแหน่งด้วย Flexbox

  10:30 นาที

• 2.6 Stack - การจัดตำแหน่งแบบเรียงต่อกัน

  02:24 นาที

• 2.7 Spacing - การกำหนดระยะห่างหรือขยายขนาด

  06:39 นาที

• 2.8 Border - การทำขอบ

  04:58 นาที

• 2.9 Typography - ข้อความทั่วไป

  15:13 นาที

• 2.10 Image - รูปภาพ

  05:45 นาที

• 2.11 Figure - การจัดวางคำอธิบาย

  04:08 นาที

• 2.12 Table - ตาราง

  09:22 นาที

• 2.13 Pagination - รายการหน้าต่าง ๆ

  04:58 นาที

• 2.14 Display - การแสดงผล

  07:45 นาที

• 2.15 Float - เนื้อหาลอยตัว

  05:12 นาที

• 2.16 Position - กำหนดตำแหน่ง

  16:15 นาที

• 2.17 Shadow - การสร้างเงา

  01:55 นาที

• 2.18 Interaction - การปฏิสัมพันธ์กับอุปกรณ์ Input

  04:13 นาที

• 2.19 Stretched Link - การสร้างลิงก์แบบครอบคลุม

  07:16 นาที

บทที่ 3 ส่วนประกอบเพิ่มเติม (Components)

• 3.1 Button - ปุ่ม

  15:58 นาที

• 3.2 Badge - แท็ก

  05:17 นาที

• 3.3 Breadcrumb - แถบนำทางย่อย

  08:44 นาที

• 3.4 Alert - การแจ้งเตือน

  24:31 นาที

• 3.5 Toast - การแจ้งเตือนแบบลอย

  19:24 นาที

• 3.6 Card - การ์ด

  11:43 นาที

• 3.7 Collapse - ซ่อน/ขยาย

  22:08 นาที

• 3.8 Accordion - รายการซ่อน/ขยาย

  06:10 นาที

• 3.9 Dropdown - กล่องเครื่้องมือเพิ่มเติม

  08:20 นาที

• 3.10 Tooltip & Popover - ข้อความช่วยเหลือพิเศษ

  14:18 นาที

• 3.11 Carousel - ภาพสไลด์

  06:52 นาที

• 3.12 Modal - กล่องข้อความ

  25:38 นาที

• 3.13 List Group - รายการแบบกลุ่ม

  20:15 นาที

• 3.14 Nav & Tab - แถบนำทางและแท็บ

  06:34 นาที

• 3.15 Navbar - แถบนำทางหลัก

  15:26 นาที

• 3.16 Offcanvas - กล่องข้างจอ

  06:43 นาที

• 3.17 Scrollspy - การติดตาม Scroll

  14:19 นาที

• 3.18 Placeholder - จำลองข้อมูลชั่วคราว

  24:59 นาที

• 3.19 Progress & Spinner - สถานะการโหลด

  09:33 นาที

บทที่ 4 แบบฟอร์ม

• 4.1 Form Control - Input หลัก

  08:22 นาที

• 4.2 Input Group - กลุ่มของ Input

  02:31 นาที

• 4.3 Check & Radio - การทำเครื่องหมาย

  06:22 นาที

• 4.4 Select - การเลือกตัวเลือก

  01:48 นาที

• 4.5 Range - การกำหนดขนาด

  06:45 นาที

• 4.6 Validation - การตรวจสอบความถูกต้องข้อมูล

  46:59 นาที

บทที่ 5 เนื้อหาเพิ่มเติม

• 5.1 Sass - การปรับแต่ง Bootstrap ให้เป็นของเราเอง

  39:59 นาที

• 5.2 Bootstrap Icons - ไอคอนเสริม

  08:14 นาที

• 5.3 Workshop Copycat - คัดลอกโครงสร้างหน้าเว็บ

  53:16 นาที

• 5.4 Workshop Check Email - ระบบตรวจสอบการใช้งานได้ของอีเมล

  16:36 นาที

• 5.5 Workshop COVID19 - หน้าเว็บตรวจจำนวนผู้ติดเชื้อโควิด-19

  18:32 นาที

• 5.6 บทส่งท้าย

  10:34 นาที