Bootstrap 5

ระบบ Grid ใน Bootstrap 5 ใช้คอลัมน์ (Columns) เป็นส่วนประกอบหลัก ซึ่งถูกจัดเรียงในแถว (Rows)…

สำหรับการกำหนดการแสดงผลเฉพาะสำหรับหน้าจอ Extra Large (XL) สามารถใช้คลาส .col-xl-* ซึ่ง * จะเป็นตัวเลขตั้งแต่ 1…

ใน Bootstrap 5 กำหนดว่าหน้าจอที่มีความกว้างตั้งแต่ 992px ขึ้นไป จะจัดอยู่ในขนาด “Large” โดยใช้คีย์เวิร์ด lg…

การใช้งาน Grid ในหน้าจอขนาด Medium (md) หมายถึงการกำหนดรูปแบบการจัดวางคอลัมน์ (columns) ที่จะเริ่มมีผลเมื่อหน้าจอมีความกว้างตั้งแต่ 768px ขึ้นไป…

Bootstrap 5 เป็น Framework ที่ช่วยในการพัฒนาเว็บไซต์ให้มีความยืดหยุ่นและใช้งานง่ายบนอุปกรณ์หลากหลายขนาด โดยเฉพาะอย่างยิ่งการจัดการ Layout ของหน้าเว็บให้สามารถแสดงผลได้อย่างเหมาะสมในหน้าจอที่มีขนาดแตกต่างกันออกไป สำหรับหน้าจอขนาดเล็ก (Small)…

Grid ใน Bootstrap 5 เป็นระบบที่ใช้จัดการโครงสร้างเลย์เอาต์ของหน้าเว็บเพื่อให้แสดงผลได้อย่างมีประสิทธิภาพบนอุปกรณ์ที่มีขนาดหน้าจอต่าง ๆ โดยในกรณีของหน้าจอ Extra Small (ขนาดหน้าจอน้อยกว่า…

ใน Bootstrap 5 เราสามารถใช้ระบบกริด (Grid) เพื่อจัดการการแสดงผลเนื้อหาให้ปรับเปลี่ยนตามขนาดหน้าจอได้ โดยรูปแบบ “Stacked to Horizontal”…

ใน Bootstrap 5 ระบบ Grid คือเครื่องมือที่ช่วยในการออกแบบ Layout ของหน้าเว็บไซต์อย่างยืดหยุ่นและง่ายดาย โดยใช้การจัดวางองค์ประกอบต่าง ๆ…

การทำ Form Validation (การตรวจสอบความถูกต้องของแบบฟอร์ม) เป็นสิ่งสำคัญในการสร้างเว็บแอปพลิเคชันที่มีความปลอดภัยและเชื่อถือได้ การใช้ Bootstrap 5 ในการตรวจสอบความถูกต้องของฟอร์มช่วยให้เราสามารถปรับแต่งและออกแบบฟอร์มได้ง่ายขึ้น และมีฟังก์ชันการตรวจสอบที่ใช้งานง่ายพร้อมทั้งสนับสนุนความเข้ากันได้กับ…

ใน Bootstrap 5 ได้เพิ่มฟีเจอร์ใหม่ที่เรียกว่า Floating Label สำหรับฟอร์ม ซึ่งเป็นการจัดการให้ป้ายข้อความ (Label) ของฟอร์มซ้อนอยู่ในฟิลด์ของอินพุต…

Input Group ใน Bootstrap 5 เป็นเครื่องมือที่ช่วยให้เราสามารถรวมองค์ประกอบต่าง ๆ เข้ากับฟอร์มของเราเพื่อเพิ่มความสะดวกในการใช้งาน ไม่ว่าจะเป็นการเพิ่มปุ่ม ไอคอน…

ใน Bootstrap 5 ได้มีการเพิ่มฟีเจอร์ Range หรือ range input ที่สามารถใช้ในการรับค่าตัวเลขที่สามารถเลื่อนเลือกค่าได้จากขอบเขตที่กำหนด ตัวอย่างการใช้งาน…

ใน Bootstrap 5 เราสามารถใช้งาน Checkbox ได้อย่างง่ายดาย และสะดวกต่อการออกแบบ UI ที่สวยงาม รวมถึงรองรับการทำงานในทุกอุปกรณ์…

ใน Bootstrap 5 การใช้ Select หรือปุ่มเลือกข้อมูลที่ให้ผู้ใช้เลือกจากรายการที่มีอยู่เป็นสิ่งที่จำเป็นในฟอร์มต่าง ๆ เพื่อให้สามารถเลือกรายการที่ต้องการได้ง่ายขึ้น การสร้าง Select…

การสร้าง Form ด้วย Bootstrap 5 ทำให้เราสามารถสร้างฟอร์มที่มีความสวยงามน่าใช้งานมากขึ้น ดึงดูดความสนใจของผู้ใช้ได้ดีกว่าการสร้างฟอร์มด้วยวิธีปกติ การสร้างฟอร์มพื้นฐาน (Basic Form)…

Flexbox ใน Bootstrap 5 ช่วยให้เราสามารถจัดเรียงคอนเทนต์ได้อย่างอิสระ ไม่ว่าจะเป็นแนวตั้งหรือแนวนอน รวมถึงการกระจายพื้นที่ระหว่างองค์ประกอบต่าง ๆ ตามที่เราต้องการ การสร้าง…

Dark Mode เป็นคุณลักษณะยอดนิยมในเว็บไซต์และแอปพลิเคชันในปัจจุบัน เนื่องจากช่วยลดการใช้พลังงานหน้าจอ ลดความเมื่อยล้าสายตาในเวลากลางคืน และช่วยเพิ่มความสวยงามและการใช้งานในสภาพแสงน้อย Bootstrap 5 รองรับการสร้าง Dark…

Bootstrap 5 นำเสนอระบบ Utilities / Helper Classes ที่มีความยืดหยุ่นและง่ายต่อการใช้งาน ซึ่งออกแบบมาให้สามารถปรับแต่ง UI…

Offcanvas เป็นองค์ประกอบของ Bootstrap 5 ที่ช่วยให้เราสามารถสร้างเมนูหรือตัวเลือกที่ซ่อนอยู่ด้านข้าง และสามารถเลื่อนเข้ามาในหน้าเมื่อมีการเรียกใช้งานได้ โดย Offcanvas เหมาะสำหรับการสร้างเมนูข้างหรือ sidebar…

Scrollspy เป็นฟีเจอร์หนึ่งใน Bootstrap 5 ที่ช่วยให้หน้าเว็บสามารถตรวจสอบและไฮไลท์เนื้อหาที่อยู่บนหน้าจอขณะเลื่อนดูหน้าเว็บ โดย Scrollspy จะผูกกับเมนูนำทาง (Navbar หรือเมนูแบบอื่น…

ใน Bootstrap 5 มีองค์ประกอบหนึ่งที่น่าสนใจและใช้งานง่ายมาก นั่นคือ Toast ซึ่งเป็นการแสดงผลการแจ้งเตือนแบบเล็ก ๆ ที่ปรากฏบนหน้าจอระหว่างที่ผู้ใช้ทำงาน โดย…

Popover เป็นส่วนหนึ่งของ Bootstrap 5 ที่ใช้ในการแสดงข้อมูลเพิ่มเติมหรือข้อความช่วยเหลือเมื่อผู้ใช้ทำการคลิกหรือโฟกัสที่องค์ประกอบใดองค์ประกอบหนึ่ง Popover คล้ายกับ Tooltip แต่สามารถรองรับเนื้อหาที่ซับซ้อนกว่า เช่น…

ใน Bootstrap 5 นั้น Tooltip เป็นเครื่องมือที่มีประโยชน์มากสำหรับการแสดงข้อมูลเสริมหรือคำอธิบายเพิ่มเติมเมื่อผู้ใช้เลื่อนเมาส์ไปวางบนองค์ประกอบต่าง ๆ ของหน้าเว็บ โดย Tooltip…

Modal เป็นส่วนหนึ่งของ Bootstrap ที่ช่วยในการสร้างหน้าต่างป็อปอัพ (popup) เพื่อแสดงข้อมูลเพิ่มเติมโดยไม่ต้องโหลดหน้าเว็บใหม่ ซึ่งผู้ใช้สามารถทำการยืนยันข้อมูล หรือตอบโต้การใช้งานได้โดยตรงในหน้าต่าง Modal นั้น…