List Group เป็นหนึ่งในคอมโพเนนต์ของ Bootstrap ที่ช่วยจัดการแสดงรายการข้อมูลในรูปแบบที่เป็นระเบียบ และใช้งานได้ง่าย โดย Bootstrap 4 นั้นมีฟีเจอร์ที่ทำให้การใช้งาน List Group มีความหลากหลายและยืดหยุ่น สามารถใช้กับลิงก์ ปุ่ม…
Pagination เป็นหนึ่งในองค์ประกอบที่สำคัญสำหรับเว็บไซต์ที่มีข้อมูลจำนวนมากที่ไม่สามารถแสดงทั้งหมดในหน้าเดียว การแบ่งข้อมูลเป็นหลายหน้าด้วย Pagination ช่วยนำทางข้อมูลให้ผู้ใช้งานได้อย่างง่ายดาย โดย Bootstrap 4 ได้เตรียมรูปแบบ Pagination มาให้ใช้งานอย่างง่ายดายและสวยงาม รูปแบบ Pagination พื้นฐาน รูปแบบ…
ใน Bootstrap 4 มีองค์ประกอบที่สามารถใช้งานได้หลากหลายเพื่อสร้างหน้าเว็บไซต์ที่สวยงามและทันสมัย หนึ่งในนั้นคือ Spinner หรือที่เรียกกันว่า ‘Loading Spinner’ ซึ่งใช้เพื่อบอกผู้ใช้งานว่าระบบกำลังทำงาน เช่น กำลังโหลดข้อมูลหรือประมวลผล Spinner มีประโยชน์มากในการแจ้งให้ผู้ใช้ทราบว่ามีการดำเนินการอยู่เบื้องหลัง การใช้งานพื้นฐานของ…
Progress Bar หรือแถบความคืบหน้า (Progress Bar) เป็นส่วนประกอบที่ใช้แสดงสถานะของกระบวนการที่กำลังทำอยู่ โดย Bootstrap 4 มีเครื่องมือให้เราใช้งาน Progress Bar อย่างง่ายดายผ่าน Class และ…
Badge ใน Bootstrap 4 เป็นเครื่องมือที่ใช้สำหรับการแสดงตัวบ่งชี้ (indicator) หรือข้อมูลเพิ่มเติม เช่น จำนวนแจ้งเตือน การแจ้งเตือน หรือข้อมูลเพิ่มเติมที่เล็กกระทัดรัด ซึ่งสามารถแสดงผลร่วมกับปุ่ม ลิสต์ หรือข้อความได้อย่างง่ายดาย Badge…
ใน Bootstrap 4 เราสามารถจัดกลุ่มปุ่ม (Button Group) เพื่อนำเสนอปุ่มหลายๆ ปุ่มร่วมกันภายในกลุ่มเดียว โดยจะสามารถจัดกลุ่มเป็นแนวนอนหรือแนวตั้งได้ รวมถึงสามารถนำไปประยุกต์ใช้งานในลักษณะต่างๆ เช่น ปุ่มเมนู ปุ่มควบคุมการทำงานต่างๆ หรือใช้ในการสร้าง navigation…
ใน Bootstrap 4 มีการออกแบบ Button ให้สามารถใช้งานได้หลายรูปแบบ เพื่อให้เหมาะสมกับความต้องการในแต่ละสถานการณ์ ไม่ว่าจะเป็นการเพิ่มปุ่มที่มีสไตล์สีแตกต่างกัน ขนาดต่างๆ รวมไปถึงการทำปุ่มให้มีสถานะต่างๆ เช่น ปุ่มที่ถูกปิดการใช้งานหรือปุ่มที่ทำหน้าที่เป็นลิงก์ รูปแบบพื้นฐานของปุ่ม (Basic Buttons)…
Alert ใน Bootstrap 4 เป็นเครื่องมือที่ใช้ในการแสดงข้อความแจ้งเตือนผู้ใช้งาน ไม่ว่าจะเป็นการแจ้งเตือนความสำเร็จ ข้อผิดพลาด ข้อมูล หรือคำเตือน ซึ่งสามารถนำไปประยุกต์ใช้ได้ในหลากหลายรูปแบบ เช่น การแจ้งผลการบันทึกข้อมูลสำเร็จหรือข้อผิดพลาดต่าง ๆ การสร้าง Alert…
Jumbotron ใน Bootstrap 4 คือองค์ประกอบที่ใช้สำหรับแสดงเนื้อหาหรือข้อความที่มีความโดดเด่น เพื่อดึงความสนใจจากผู้ใช้ โดยทั่วไปจะใช้ในหน้าแรกหรือหน้าหลักของเว็บไซต์ เช่น การประกาศข่าวสารสำคัญ โปรโมชัน หรือคำอธิบายเกี่ยวกับเว็บไซต์ ใน Bootstrap 4 เราสามารถใช้งาน…
ใน Bootstrap 4 มีเครื่องมือและคลาสที่ช่วยในการจัดการกับรูปภาพ (Image) ให้สามารถแสดงผลได้อย่างมีประสิทธิภาพและรองรับการแสดงผลในทุกขนาดหน้าจอ รูปภาพที่ตอบสนอง (Responsive Images) Bootstrap มีคลาส .img-fluid ที่สามารถทำให้รูปภาพปรับขนาดตามความกว้างของหน้าจออุปกรณ์ได้อย่างอัตโนมัติ รูปภาพจะมีความกว้างสูงสุดที่ 100%…
ระบบ Grid ใน Bootstrap 5 ใช้คอลัมน์ (Columns) เป็นส่วนประกอบหลัก ซึ่งถูกจัดเรียงในแถว (Rows) และกรอบงานนี้จะถูกจัดวางภายในคอนเทนเนอร์ (Container) ระบบ Grid ของ…
สำหรับการกำหนดการแสดงผลเฉพาะสำหรับหน้าจอ Extra Large (XL) สามารถใช้คลาส .col-xl-* ซึ่ง * จะเป็นตัวเลขตั้งแต่ 1 ถึง 12 ที่บ่งบอกจำนวนพื้นที่ในกริดระบบ 12 คอลัมน์…
ใน Bootstrap 5 กำหนดว่าหน้าจอที่มีความกว้างตั้งแต่ 992px ขึ้นไป จะจัดอยู่ในขนาด “Large” โดยใช้คีย์เวิร์ด lg ในการกำหนดการแสดงผลของ Grid รูปแบบการใช้งาน Grid บนหน้าจอ…
การใช้งาน Grid ในหน้าจอขนาด Medium (md) หมายถึงการกำหนดรูปแบบการจัดวางคอลัมน์ (columns) ที่จะเริ่มมีผลเมื่อหน้าจอมีความกว้างตั้งแต่ 768px ขึ้นไป โดยใช้คลาส .col-md-* เพื่อควบคุมการแบ่งส่วนหน้าจอ ตัวอย่างการใช้งาน ในตัวอย่างนี้…
Bootstrap 5 เป็น Framework ที่ช่วยในการพัฒนาเว็บไซต์ให้มีความยืดหยุ่นและใช้งานง่ายบนอุปกรณ์หลากหลายขนาด โดยเฉพาะอย่างยิ่งการจัดการ Layout ของหน้าเว็บให้สามารถแสดงผลได้อย่างเหมาะสมในหน้าจอที่มีขนาดแตกต่างกันออกไป สำหรับหน้าจอขนาดเล็ก (Small) Bootstrap มีระบบ Grid ที่รองรับการใช้งานอย่างสะดวก และทำให้นักพัฒนาสามารถควบคุม…
Grid ใน Bootstrap 5 เป็นระบบที่ใช้จัดการโครงสร้างเลย์เอาต์ของหน้าเว็บเพื่อให้แสดงผลได้อย่างมีประสิทธิภาพบนอุปกรณ์ที่มีขนาดหน้าจอต่าง ๆ โดยในกรณีของหน้าจอ Extra Small (ขนาดหน้าจอน้อยกว่า 576px เช่น โทรศัพท์มือถือขนาดเล็ก) Bootstrap จะใช้คลาส…
ใน Bootstrap 5 เราสามารถใช้ระบบกริด (Grid) เพื่อจัดการการแสดงผลเนื้อหาให้ปรับเปลี่ยนตามขนาดหน้าจอได้ โดยรูปแบบ “Stacked to Horizontal” เป็นการจัดการแสดงผลที่เนื้อหาจะเรียงกันในแนวตั้ง (Stacked) บนหน้าจอขนาดเล็ก (เช่น โทรศัพท์มือถือ)…
ใน Bootstrap 5 ระบบ Grid คือเครื่องมือที่ช่วยในการออกแบบ Layout ของหน้าเว็บไซต์อย่างยืดหยุ่นและง่ายดาย โดยใช้การจัดวางองค์ประกอบต่าง ๆ ของหน้าเว็บในรูปแบบแถว (Row) และคอลัมน์ (Column) ทำให้สามารถกำหนดขนาดและการแสดงผลของแต่ละองค์ประกอบตามขนาดหน้าจอที่แตกต่างกันได้…
การทำ Form Validation (การตรวจสอบความถูกต้องของแบบฟอร์ม) เป็นสิ่งสำคัญในการสร้างเว็บแอปพลิเคชันที่มีความปลอดภัยและเชื่อถือได้ การใช้ Bootstrap 5 ในการตรวจสอบความถูกต้องของฟอร์มช่วยให้เราสามารถปรับแต่งและออกแบบฟอร์มได้ง่ายขึ้น และมีฟังก์ชันการตรวจสอบที่ใช้งานง่ายพร้อมทั้งสนับสนุนความเข้ากันได้กับ HTML5 form validation API ขั้นตอนการใช้งาน…
ใน Bootstrap 5 ได้เพิ่มฟีเจอร์ใหม่ที่เรียกว่า Floating Label สำหรับฟอร์ม ซึ่งเป็นการจัดการให้ป้ายข้อความ (Label) ของฟอร์มซ้อนอยู่ในฟิลด์ของอินพุต (Input Field) เมื่อผู้ใช้เริ่มกรอกข้อมูล ป้ายข้อความนี้จะเลื่อนขึ้นไปด้านบนของฟิลด์ ทำให้ฟอร์มดูสะอาดตาและใช้งานได้ง่ายขึ้น…
Input Group ใน Bootstrap 5 เป็นเครื่องมือที่ช่วยให้เราสามารถรวมองค์ประกอบต่าง ๆ เข้ากับฟอร์มของเราเพื่อเพิ่มความสะดวกในการใช้งาน ไม่ว่าจะเป็นการเพิ่มปุ่ม ไอคอน หรือข้อความต่าง ๆ ก่อนหรือหลังช่องกรอกข้อมูล (input field)…
ใน Bootstrap 5 ได้มีการเพิ่มฟีเจอร์ Range หรือ range input ที่สามารถใช้ในการรับค่าตัวเลขที่สามารถเลื่อนเลือกค่าได้จากขอบเขตที่กำหนด ตัวอย่างการใช้งาน range นี้สามารถนำไปประยุกต์ใช้ในหลายรูปแบบ เช่น การปรับระดับเสียง การปรับระดับความสว่าง…
ใน Bootstrap 5 เราสามารถใช้งาน Checkbox ได้อย่างง่ายดาย และสะดวกต่อการออกแบบ UI ที่สวยงาม รวมถึงรองรับการทำงานในทุกอุปกรณ์ ไม่ว่าจะเป็นเดสก์ท็อปหรือมือถือ Checkbox เป็นองค์ประกอบสำคัญในฟอร์มที่ใช้สำหรับให้ผู้ใช้งานเลือกตัวเลือกที่หลากหลายได้พร้อมกัน การสร้าง Checkbox…
ใน Bootstrap 5 การใช้ Select หรือปุ่มเลือกข้อมูลที่ให้ผู้ใช้เลือกจากรายการที่มีอยู่เป็นสิ่งที่จำเป็นในฟอร์มต่าง ๆ เพื่อให้สามารถเลือกรายการที่ต้องการได้ง่ายขึ้น การสร้าง Select เบื้องต้น การสร้าง Select เบื้องต้นใน Bootstrap…