Bootstrap

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 นั้น…

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

Navbar หรือแถบนำทาง เป็นองค์ประกอบหนึ่งที่ใช้สำหรับการจัดการนำทางบนเว็บไซต์ ซึ่ง Bootstrap 5 ได้ออกแบบและพัฒนา Navbar ให้มีความยืดหยุ่นสูงและง่ายต่อการใช้งาน พร้อมทั้งรองรับการปรับแต่งต่าง…

Navs เป็นหนึ่งในองค์ประกอบของ Bootstrap 5 ที่ใช้สำหรับสร้างเมนูการนำทาง (Navigation) ในหน้าเว็บ ซึ่งมีลักษณะต่าง ๆ ที่สามารถปรับแต่งและประยุกต์ใช้งานได้หลากหลายรูปแบบ…

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

Dropdown Menu คือเมนูที่อนุญาตให้ผู้ใช้สามารถคลิกเลือกรายการ 1 เมนู จากรายการเมนูทั้งหมดที่บราจุอยู่ด้านใน ถ้าต้องการสร้างตัวคั่นระหว่างรายการเมนู สามารถทำได้โดยใช้คลาส .dropdown-divider ร่วมกับแท็ก…

Card คือกล่องที่ประกอบไปด้วยส่วนหัว Header ส่วนเนื้อหา Body และส่วนท้าย Footer แสดงผลเป็นกล่องแบบมีกรอบและ Padding สามารถนำมาใช้งานได้หลากหลายวัตถุประสงค์และสวยงามดูดี…

โดยปกติ การสร้าง List รายการทั่วไป เราจะใช้เอลิเมนต์ <ul> ครอบเอลิเมนต์ <li> ดังนี้ เราสามารถใช้…

ถ้าเราสร้างเว็บเพจที่ต้องมีการแบ่งหน้าเว็บออกเป็นหลาย ๆ หน้า Bootstrap 5 สามารถช่วยเราตกแต่ง Pagination ให้สวยงามได้ การสร้างการแบ่งหน้า หรือ…

Spinner คือสัญลักษณ์วงกลมที่หมุนไปเรื่อย ๆ สำหรับแสดงสถานะว่าระบบกำลังทำงาน กำลังโหลด เป็นต้น เพื่อให้ผู้ใช้งานรู้ว่าเว็บไซต์ของเราทำงานอยู่นะ ไม่ได้ค้างหรืออะไร ให้รอหน่อย เป็นต้น…

Progress Bar ก็คือ แถบสถานะที่บ่งบอกความคืบหน้าของงานหรือกิจกรรมบางอย่าง เพื่อให้รู้ว่างานนั้น ๆ คืบหน้าไปแล้วเท่าไหร่ ใกล้เสร็จหรือยัง เป็นต้น เราสามารถใช้…

Badge มีไว้สำหรับแสดงข้อมูลเพิ่มเติมต่อจากข้อมูลหลัก เช่น แสดงจำนวนตัวเลขการแจ้งเตือนใหม่ เป็นต้น หรือใช้งานอย่างอื่นในลักษณะเป็นป้าย การสร้าง Badge สามารถทำได้โดยการใช้คลาส .badge…

ด้วยการใช้ Bootstrap 5 เราสามารถรวมปุ่มกดให้อยู่รวมกันเป็นกลุ่มในบรรทัดเดียวกันได้ โดยการใช้คลาส .btn-group ภายในเอลิเมนต์ <div> ดังนี้ โดยปกติ…

Bootstrap 5 มีคลาสสำหรับตกแต่งปุ่มกด Button จำนวนหนึ่ง โดยให้ใช้คลาส .btn เพื่อตกแต่งปุ่มกดตามสไตล์ของ Bootstrap หากต้องการปุ่มกดที่มีสีพื้นหลังแบบต่าง…

เราสามารถตกแต่งข้อความแจ้งเตือนที่โดดเด่นดูดีด้วย Bootstrap 5 โดยใช้คลาส .alert ตามด้วย contextual class ตัวใดตัวหนึ่ง ดังนี้…

ใน Bootstrap 3 และ Bootstrap 4 จะมีคลาส .jumbotron ให้เราใช้สำหรับการแสดงผลข้อความให้มีความโดดเด่น โดยการทำให้เอลิเมนต์แสดงผลเป็นเหมือนกล่องขนาดใหญ่และกำหนด…

เราสามารถใช้ Bootstrap 5 ตกแต่งรูปทรงการแสดงผลของรูปภาพได้ 3 แบบ คือ แบบสี่เหลี่ยมมุมใน (Rounded Corners)…

ใน Bootstrap 5 มีคลาสสำหรับตกแต่งตารางจำนวนหนึ่ง ซึ่งมีรายละเอียดการใช้งานดังนี้ การตกแต่งตารางขั้นพื้นฐาน สำหรับการตกแต่งตารางขั้นพื้นฐาน ให้ใช้คลาส .table กำกับแท็ก…

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