Bootstrap Web Programming

“คู่มือ Bootstrap 5 ฉบับสมบูรณ์: เรียนรู้ตั้งแต่พื้นฐานจนถึงการใช้งานขั้นสูง”
หนังสือเล่มนี้รวบรวมเนื้อหาเกี่ยวกับ Bootstrap 5 ซึ่งเป็นเฟรมเวิร์กยอดนิยมสำหรับการสร้างเว็บไซต์ที่ตอบสนอง (Responsive) ได้อย่างรวดเร็วและง่ายดาย ครอบคลุมตั้งแต่ความรู้เบื้องต้นเกี่ยวกับ Bootstrap การติดตั้ง และโครงสร้างพื้นฐาน ไปจนถึงระบบกริด (Grid System) การใช้ยูทิลิตี้คลาสต่าง ๆ คอมโพเนนต์พื้นฐาน รวมถึงการจัดการเลย์เอาต์ด้วย Flexbox และ Responsive Design
นอกจากนี้ยังเจาะลึกถึง JavaScript Components, การปรับแต่ง Bootstrap ด้วย SCSS, และการใช้งานร่วมกับ JavaScript Frameworks ชั้นนำ เช่น React และ Vue เหมาะสำหรับนักพัฒนาทุกระดับที่ต้องการพัฒนาเว็บสวยงาม ทันสมัย และมีประสิทธิภาพด้วย Bootstrap 5
________________________________________
สารบัญ
หน้า หัวข้อหลัก
1 บทที่ 1 ความรู้เบื้องต้น
• Bootstrap คืออะไร?
• Bootstrap เหมาะกับใคร?
• ข้อมูลเพิ่มเติมเกี่ยวกับ Bootstrap
• การติดตั้ง Bootstrap
• โครงสร้างพื้นฐานของ Bootstrap |
| 13 | บทที่ 2 กริดและเลเอาท์
• Grid System (ระบบ 12 คอลัมน์) ใน Bootstrap
• ข้อมูลเพิ่มเติมเกี่ยวกับ Bootstrap Grid System
• ตัวอย่างโค้ด Bootstrap Grid System แบบเต็ม
• Container ใน Bootstrap คืออะไร?
• Row & Column ใน Bootstrap
• ข้อมูลเพิ่มเติมเกี่ยวกับ Row และ Column ใน Bootstrap
• Breakpoints & Responsive Design
• ข้อมูลเพิ่มเติมเกี่ยวกับ Breakpoints & Responsive Design ใน Bootstrap |
| 65 | บทที่ 3 ยูทิลิตี้คลาส
• Utilities Classes ใน Bootstrap
• กลุ่มของ Utilities Classes เพิ่มเติมใน Bootstrap
• โครงสร้างของ Spacing Utility Classes
• การจัดตำแหน่ง Text & Display ใน Bootstrap
• สีและพื้นหลังใน Bootstrap 5
• ขนาดตัวอักษรและน้ำหนักตัวอักษรใน Bootstrap (.fs-, .fw-) |
| 117 | บทที่ 4 คอมโพเนนต์
• Bootstrap Components คืออะไร?
• Navbar – เมนูนำทาง คืออะไร?
• Buttons – ปุ่มกดใน Bootstrap
• Forms & Inputs ใน Bootstrap
• Cards ใน Bootstrap คืออะไร?
• Alerts & Badges ใน Bootstrap
• Modals & Popovers – กล่องแจ้งเตือนใน Bootstrap |
| 186 | บทที่ 5 เฟล็กบอกซ์และเรสปอนซีฟดีไซด์
• Flexbox & Responsive Design คืออะไร?
• คุณสมบัติสำคัญของ Flexbox
• ตัวอย่างโค้ด HTML + CSS แบบเต็มที่ใช้ Flexbox
• การซ่อน/แสดงองค์ประกอบในหน้าจอขนาดต่างๆ ด้วย Bootstrap (.d-none, .d-md-block)
• การทำ Responsive Design ต้องทำอย่างไร?
• การใช้ CSS Grid Layout ควบคู่กับ Flexbox |
| 224 | บทที่ 6 เทเบิลและลิสกรู๊ป
• แนวคิดเชิงทฤษฎีเกี่ยวกับ Table และ List Group ใน Bootstrap
• รายละเอียดของ Table และ List Group
• ตารางข้อมูลใน Bootstrap (.table, .table-striped, .table-hover)
• รายการ (.list-group, .list-group-item) ใน Bootstrap คืออะไร? |
| 285 | บทที่ 7 จาวาสคริปต์คอมโพเนนต์
• เนื้อหาเชิงทฤษฎีเกี่ยวกับ JavaScript Components ใน Bootstrap 5
• ข้อมูลเพิ่มเติมเกี่ยวกับ JavaScript Components ใน Bootstrap 5
• Carousel – สไลด์โชว์ภาพ (.carousel) ใน Bootstrap
• Collapse & Accordion – แสดง/ซ่อนข้อมูลใน Bootstrap
• Tooltip & Popover – เพิ่มคำอธิบาย (.tooltip, .popover) |
| 347 | บทที่ 8 คัสตอมไมซ์
• การ Customize Bootstrap
• การใช้ SCSS แทน CSS คืออะไร?
• การคอมไพล์ SCSS เป็น CSS
• ปรับแต่งตัวแปรใน Bootstrap: $primary และ $font-family-base
• การใช้ Bootstrap กับ Dark Mode |
| 399 | บทที่ 9 บูตสแตร็ปกับจาวาสคริปต์เฟรมเวิร์ก
• ทำไมต้องใช้ Bootstrap ร่วมกับ JavaScript Frameworks?
• ข้อมูลเพิ่มเติมเกี่ยวกับ Bootstrap + JavaScript Frameworks
• การใช้ Bootstrap ร่วมกับ jQuery
• การใช้ Bootstrap ร่วมกับ React (React-Bootstrap)
• การใช้ Bootstrap กับ Vue (BootstrapVue) |