Input คือ ข้อมูลที่ผู้ใช้ใส่หรือกรอกลงในโปรแกรมหรือระบบคอมพิวเตอร์ เพื่อให้โปรแกรมนั้นทำงานต่อไป โดยทั่วไป “Input” จะถูกนำมาใช้ในฟอร์มหรืออินเทอร์เฟซของเว็บไซต์หรือแอปพลิเคชันเพื่อเก็บข้อมูลจากผู้ใช้ เช่น การกรอกข้อความ การเลือกตัวเลือก การกรอกตัวเลข หรือการอัปโหลดไฟล์ การใช้ Input ใน…
Form (ฟอร์ม) ในบริบทของการพัฒนาเว็บ คือองค์ประกอบ (element) ของหน้าเว็บที่ใช้ในการรับข้อมูลจากผู้ใช้งาน โดยข้อมูลที่ผู้ใช้กรอกหรือเลือกในฟอร์มจะถูกส่งไปยังเซิร์ฟเวอร์เพื่อประมวลผล ฟอร์มมักจะประกอบด้วยองค์ประกอบหลายประเภท เช่น ช่องกรอกข้อความ (input field), ปุ่มกด (button), กล่องเลือก…
Bootstrap 4 เป็นเฟรมเวิร์กยอดนิยมสำหรับการพัฒนาเว็บไซต์ที่ช่วยให้นักพัฒนาสามารถสร้างส่วนติดต่อผู้ใช้ที่สวยงามและใช้งานง่าย โดยเฉพาะอย่างยิ่งในส่วนของ Navigation Bar (แถบนำทาง) ที่มีความสำคัญในการช่วยให้ผู้ใช้สามารถเข้าถึงเนื้อหาของเว็บไซต์ได้อย่างรวดเร็ว บทความนี้จะอธิบายการใช้งาน Navigation Bar ใน Bootstrap 4 พร้อมตัวอย่างที่หลากหลาย…
Bootstrap 4 เป็นเฟรมเวิร์กยอดนิยมที่ช่วยในการออกแบบเว็บไซต์ โดยเฉพาะการสร้างเมนูนำทาง (Navigation) ที่สวยงามและตอบสนองได้ดี ในบทความนี้ เราจะอธิบายการใช้งาน Nav ด้วย Bootstrap 4 พร้อมยกตัวอย่างการใช้งานในรูปแบบต่าง ๆ ที่สามารถประยุกต์ใช้ได้…
Bootstrap 4 เป็นเฟรมเวิร์ก CSS ที่ช่วยในการสร้างเว็บที่ตอบสนองได้ง่ายและรวดเร็ว ฟีเจอร์หนึ่งที่มีประโยชน์มากคือ Collapse ซึ่งใช้สำหรับซ่อนหรือแสดงเนื้อหาต่างๆ ตามความต้องการของผู้ใช้ การตั้งค่า Collapse ในการใช้งาน Collapse เราจะต้องใช้ class…
ใน Bootstrap 4 นั้น Dropdown ถือเป็นหนึ่งในองค์ประกอบที่ช่วยให้การสร้างเมนูหรือตัวเลือกแบบเลื่อนลง (Dropdown) ทำได้ง่ายและสวยงาม โดยไม่จำเป็นต้องเขียน CSS หรือ JavaScript เองทั้งหมด เนื่องจาก Bootstrap…
Card เป็นหนึ่งในองค์ประกอบที่มีความยืดหยุ่นสูงใน Bootstrap 4 ที่สามารถใช้ในการจัดกลุ่มเนื้อหาและการออกแบบที่หลากหลาย เช่น แสดงเนื้อหาที่เป็นข้อความ รูปภาพ ปุ่ม และอื่น ๆ โดยที่สามารถจัดวางให้ดูเรียบร้อยและสวยงามได้ง่าย ๆ พื้นฐานการใช้งาน Card…
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) บนหน้าจอขนาดเล็ก (เช่น โทรศัพท์มือถือ)…