DCRUB

DCRUB

  • Articles: 1367

Bootstrap 4 การใช้งาน List Group

List Group เป็นหนึ่งในคอมโพเนนต์ของ Bootstrap ที่ช่วยจัดการแสดงรายการข้อมูลในรูปแบบที่เป็นระเบียบ และใช้งานได้ง่าย โดย Bootstrap 4 นั้นมีฟีเจอร์ที่ทำให้การใช้งาน List Group มีความหลากหลายและยืดหยุ่น สามารถใช้กับลิงก์ ปุ่ม หรือแม้กระทั่งทำงานร่วมกับคอมโพเนนต์อื่นได้ เช่น Badge หรือ Card การสร้าง List Group พื้นฐาน ในการเริ่มต้นใช้งาน List Group เราสามารถใช้ ul หรือ div ที่มีคลาส list-group และให้รายการแต่ละรายการใช้คลาส list-group-item ดังนี้ รายการจะถูกจัดให้อยู่ในรูปแบบของ List ที่สวยงามตามสไตล์ของ Bootstrap…

Bootstrap 4 Pagination การแบ่งหน้า

Pagination เป็นหนึ่งในองค์ประกอบที่สำคัญสำหรับเว็บไซต์ที่มีข้อมูลจำนวนมากที่ไม่สามารถแสดงทั้งหมดในหน้าเดียว การแบ่งข้อมูลเป็นหลายหน้าด้วย Pagination ช่วยนำทางข้อมูลให้ผู้ใช้งานได้อย่างง่ายดาย โดย Bootstrap 4 ได้เตรียมรูปแบบ Pagination มาให้ใช้งานอย่างง่ายดายและสวยงาม รูปแบบ Pagination พื้นฐาน รูปแบบ Pagination พื้นฐานสามารถสร้างได้ง่าย ๆ ด้วยการใช้คลาส pagination และรายการภายในเป็น <li> บรรจุลิงก์ที่เราต้องการให้ผู้ใช้คลิกเพื่อไปยังหน้าถัดไป การเพิ่มการกำหนดสถานะ Active และ Disabled Bootstrap 4 รองรับการตั้งค่าปุ่มให้มีสถานะ Active สำหรับหน้าปัจจุบัน และ Disabled สำหรับปุ่มที่ไม่สามารถใช้งานได้ (เช่นปุ่ม Previous ที่ไม่มีหน้าให้กลับไป) Pagination ขนาดต่าง…

Bootstrap 4 การใช้งาน Spinner

ใน Bootstrap 4 มีองค์ประกอบที่สามารถใช้งานได้หลากหลายเพื่อสร้างหน้าเว็บไซต์ที่สวยงามและทันสมัย หนึ่งในนั้นคือ Spinner หรือที่เรียกกันว่า ‘Loading Spinner’ ซึ่งใช้เพื่อบอกผู้ใช้งานว่าระบบกำลังทำงาน เช่น กำลังโหลดข้อมูลหรือประมวลผล Spinner มีประโยชน์มากในการแจ้งให้ผู้ใช้ทราบว่ามีการดำเนินการอยู่เบื้องหลัง การใช้งานพื้นฐานของ Spinner Bootstrap 4 มี Spinner สองรูปแบบหลัก คือ Border Spinner และ Growing Spinner ซึ่งสามารถใช้งานได้ง่ายผ่านคลาสของ Bootstrap Border Spinner Border Spinner เป็นวงกลมที่หมุนได้ตลอดเวลา คลาสที่ใช้คือ spinner-border และสามารถใช้งานได้ดังนี้ ในโค้ดตัวอย่างนี้ role=”status” จะช่วยให้เครื่องมืออ่านหน้าจอ…

Bootstrap 4 การใช้งาน Progress Bar

Progress Bar หรือแถบความคืบหน้า (Progress Bar) เป็นส่วนประกอบที่ใช้แสดงสถานะของกระบวนการที่กำลังทำอยู่ โดย Bootstrap 4 มีเครื่องมือให้เราใช้งาน Progress Bar อย่างง่ายดายผ่าน Class และ Attribute ต่าง ๆ ที่เราสามารถปรับแต่งให้เหมาะกับการใช้งานได้ พื้นฐานการใช้งาน Progress Bar การสร้าง Progress Bar แบบพื้นฐานใน Bootstrap 4 สามารถทำได้โดยการใช้โครงสร้างของ HTML ดังนี้ ผลลัพธ์จะเป็นแถบที่แสดงความคืบหน้า 50% Progress Bar แบบกำหนดสี เราสามารถปรับแต่งสีของ Progress Bar ได้โดยการเพิ่มคลาสสีเพิ่มเติมที่…

Bootstrap 4 การใช้งาน Badge

Badge ใน Bootstrap 4 เป็นเครื่องมือที่ใช้สำหรับการแสดงตัวบ่งชี้ (indicator) หรือข้อมูลเพิ่มเติม เช่น จำนวนแจ้งเตือน การแจ้งเตือน หรือข้อมูลเพิ่มเติมที่เล็กกระทัดรัด ซึ่งสามารถแสดงผลร่วมกับปุ่ม ลิสต์ หรือข้อความได้อย่างง่ายดาย Badge มีความยืดหยุ่นในการใช้งานและสามารถตกแต่งเพิ่มเติมให้เหมาะสมกับสไตล์ที่ต้องการได้ การใช้งานเบื้องต้น ในการใช้งาน Badge เบื้องต้น เราใช้คลาส badge เพื่อแสดง Badge และคลาส badge-* สำหรับการกำหนดสีพื้นหลัง ซึ่งมีหลายรูปแบบให้เลือกใช้งาน เช่น badge-primary, badge-secondary, badge-success, badge-danger, badge-warning, badge-info, badge-light, และ badge-dark ตัวอย่างการใช้งานกับข้อความ ในตัวอย่างข้างต้น…

Bootstrap 4 Button Group จัดกลุ่มให้กับปุ่ม

ใน Bootstrap 4 เราสามารถจัดกลุ่มปุ่ม (Button Group) เพื่อนำเสนอปุ่มหลายๆ ปุ่มร่วมกันภายในกลุ่มเดียว โดยจะสามารถจัดกลุ่มเป็นแนวนอนหรือแนวตั้งได้ รวมถึงสามารถนำไปประยุกต์ใช้งานในลักษณะต่างๆ เช่น ปุ่มเมนู ปุ่มควบคุมการทำงานต่างๆ หรือใช้ในการสร้าง navigation ได้ ซึ่งการจัดกลุ่มปุ่มใน Bootstrap 4 มีความยืดหยุ่นและง่ายต่อการใช้งานอย่างมาก วิธีการสร้าง Button Group พื้นฐาน การจัดกลุ่มปุ่มพื้นฐานสามารถทำได้โดยใช้คลาส .btn-group ซึ่งจะทำให้ปุ่มหลายๆ ปุ่มถูกจัดเรียงให้อยู่ในกลุ่มเดียวกัน โดยแต่ละปุ่มจะมีระยะห่างน้อยลง และดูเป็นหนึ่งเดียวกัน ผลลัพธ์คือปุ่มทั้งสามปุ่มจะถูกจัดกลุ่มเรียงต่อกันในลักษณะเป็นแถวแนวนอน Button Group แนวตั้ง ในกรณีที่ต้องการจัดกลุ่มปุ่มในแนวตั้ง เราสามารถใช้คลาส .btn-group-vertical เพื่อจัดกลุ่มปุ่มในแนวตั้งได้ ผลลัพธ์คือปุ่มจะถูกจัดเรียงในแนวตั้ง ปุ่มแบบ…

Bootstrap 4 Button ทำงานกับปุ่มกด

ใน Bootstrap 4 มีการออกแบบ Button ให้สามารถใช้งานได้หลายรูปแบบ เพื่อให้เหมาะสมกับความต้องการในแต่ละสถานการณ์ ไม่ว่าจะเป็นการเพิ่มปุ่มที่มีสไตล์สีแตกต่างกัน ขนาดต่างๆ รวมไปถึงการทำปุ่มให้มีสถานะต่างๆ เช่น ปุ่มที่ถูกปิดการใช้งานหรือปุ่มที่ทำหน้าที่เป็นลิงก์ รูปแบบพื้นฐานของปุ่ม (Basic Buttons) ใน Bootstrap 4 การสร้างปุ่มสามารถทำได้ง่ายโดยใช้คลาส .btn ร่วมกับคลาสที่กำหนดสีของปุ่ม ในตัวอย่างนี้ btn-primary จะเป็นปุ่มสีน้ำเงิน, btn-success จะเป็นปุ่มสีเขียว, btn-danger จะเป็นปุ่มสีแดง และอื่นๆ ปุ่มขอบ (Outline Buttons) หากต้องการปุ่มที่มีลักษณะโปร่งแสงและมีขอบ เราสามารถใช้คลาส .btn-outline-* ได้ ซึ่งจะเปลี่ยนปุ่มให้มีขอบสีและพื้นหลังโปร่งแสง ในตัวอย่างนี้ ปุ่มจะมีลักษณะของขอบสีที่ต่างกันตามประเภทปุ่ม แต่พื้นหลังจะเป็นสีใส…

Bootstrap 4 Alert การแจ้งเตือน

Alert ใน Bootstrap 4 เป็นเครื่องมือที่ใช้ในการแสดงข้อความแจ้งเตือนผู้ใช้งาน ไม่ว่าจะเป็นการแจ้งเตือนความสำเร็จ ข้อผิดพลาด ข้อมูล หรือคำเตือน ซึ่งสามารถนำไปประยุกต์ใช้ได้ในหลากหลายรูปแบบ เช่น การแจ้งผลการบันทึกข้อมูลสำเร็จหรือข้อผิดพลาดต่าง ๆ การสร้าง Alert พื้นฐาน ในการสร้าง Alert พื้นฐาน สามารถใช้คลาส .alert และคลาส .alert-<ประเภท> เพื่อกำหนดประเภทของ Alert ซึ่งมี 5 ประเภทหลัก ดังนี้: การปิด Alert โดยอัตโนมัติ เราสามารถเพิ่มปุ่มเพื่อปิดข้อความแจ้งเตือนด้วยคลาส .alert-dismissible และเพิ่มปุ่มปิด <button> พร้อมคลาส .close เพื่อให้ผู้ใช้สามารถปิดการแจ้งเตือนเองได้ ตัวอย่าง…

Bootstrap 4 การใช้งาน Jumbotron

Jumbotron ใน Bootstrap 4 คือองค์ประกอบที่ใช้สำหรับแสดงเนื้อหาหรือข้อความที่มีความโดดเด่น เพื่อดึงความสนใจจากผู้ใช้ โดยทั่วไปจะใช้ในหน้าแรกหรือหน้าหลักของเว็บไซต์ เช่น การประกาศข่าวสารสำคัญ โปรโมชัน หรือคำอธิบายเกี่ยวกับเว็บไซต์ ใน Bootstrap 4 เราสามารถใช้งาน Jumbotron ได้ง่ายและมีหลายรูปแบบให้เลือกประยุกต์ตามความต้องการ การสร้าง Jumbotron แบบพื้นฐาน ตัวอย่างการใช้งาน Jumbotron แบบพื้นฐาน สามารถทำได้โดยใช้คลาส .jumbotron ซึ่งจะทำให้ส่วนนี้แสดงเป็นกล่องขนาดใหญ่พร้อมพื้นหลังสีจาง ๆ การใช้ Jumbotron แบบเต็มหน้า (Full Width Jumbotron) โดยปกติแล้ว Jumbotron จะมีการเว้นขอบเล็กน้อย แต่หากต้องการให้ Jumbotron ขยายเต็มหน้าจอ (แบบไม่มีขอบ)…

Bootstrap 4 Image การทำงานกับรูปภาพ

ใน Bootstrap 4 มีเครื่องมือและคลาสที่ช่วยในการจัดการกับรูปภาพ (Image) ให้สามารถแสดงผลได้อย่างมีประสิทธิภาพและรองรับการแสดงผลในทุกขนาดหน้าจอ รูปภาพที่ตอบสนอง (Responsive Images) Bootstrap มีคลาส .img-fluid ที่สามารถทำให้รูปภาพปรับขนาดตามความกว้างของหน้าจออุปกรณ์ได้อย่างอัตโนมัติ รูปภาพจะมีความกว้างสูงสุดที่ 100% ของคอนเทนเนอร์ และจะปรับขนาดลงตามขนาดของหน้าจอ ผลลัพธ์: รูปภาพจะปรับขนาดตามขนาดของหน้าจอ แต่ยังคงรักษาอัตราส่วนของภาพเดิมไว้ การจัดรูปภาพให้มีลักษณะกลม (Rounded Image) คลาส .rounded จะทำให้รูปภาพมีขอบโค้งมน (Radius) ช่วยให้ภาพมีลักษณะนุ่มนวล ผลลัพธ์: รูปภาพจะมีขอบโค้งมน แต่ไม่เป็นทรงกลม รูปภาพทรงกลม (Circle Image) ถ้าต้องการให้รูปภาพเป็นทรงกลม สามารถใช้คลาส .rounded-circle ได้ คลาสนี้จะทำให้รูปภาพมีขอบโค้งแบบวงกลม ผลลัพธ์:…

Bootstrap 5 การใช้งาน Grid กับหน้าจอ Extra Extra Large (XXL)

ระบบ Grid ใน Bootstrap 5 ใช้คอลัมน์ (Columns) เป็นส่วนประกอบหลัก ซึ่งถูกจัดเรียงในแถว (Rows) และกรอบงานนี้จะถูกจัดวางภายในคอนเทนเนอร์ (Container) ระบบ Grid ของ Bootstrap แบ่งออกเป็น 12 คอลัมน์ ซึ่งผู้ใช้สามารถกำหนดจำนวนคอลัมน์ที่ต้องการใช้ได้ตามที่เหมาะสม โดยการใช้งาน Grid สำหรับหน้าจอขนาดต่าง ๆ รวมถึงขนาด XXL เราสามารถใช้ตัวระบุขนาดหน้าจอแบบเฉพาะเจาะจงได้ เช่น: ตัวอย่างการใช้งาน Grid กับหน้าจอ XXL ต่อไปนี้คือตัวอย่างการใช้งาน Grid แบบต่าง ๆ กับหน้าจอขนาด XXL การแบ่งคอลัมน์แบบสมดุล การแบ่งคอลัมน์อย่างง่ายโดยแบ่งพื้นที่ให้แต่ละคอลัมน์อย่างสมดุลกัน…

Bootstrap 5 การใช้งาน Grid กับหน้าจอ Extra Large (XL)

สำหรับการกำหนดการแสดงผลเฉพาะสำหรับหน้าจอ Extra Large (XL) สามารถใช้คลาส .col-xl-* ซึ่ง * จะเป็นตัวเลขตั้งแต่ 1 ถึง 12 ที่บ่งบอกจำนวนพื้นที่ในกริดระบบ 12 คอลัมน์ แบ่งคอลัมน์ตามสัดส่วนในหน้าจอ XL ในตัวอย่างนี้ เมื่อหน้าจอมีความกว้างตั้งแต่ 1200px ขึ้นไป คอลัมน์ที่ 1 จะมีความกว้าง 4 ส่วนจาก 12 ส่วน และคอลัมน์ที่ 2 จะมีความกว้าง 8 ส่วนจาก 12 ส่วน การใช้งานออฟเซ็ต (Offset) ในหน้าจอ XL ในตัวอย่างนี้…

Bootstrap 5 การใช้งาน Grid กับหน้าจอขนาดใหญ่ (Large)

ใน Bootstrap 5 กำหนดว่าหน้าจอที่มีความกว้างตั้งแต่ 992px ขึ้นไป จะจัดอยู่ในขนาด “Large” โดยใช้คีย์เวิร์ด lg ในการกำหนดการแสดงผลของ Grid รูปแบบการใช้งาน Grid บนหน้าจอ Large การกำหนดความกว้างของคอลัมน์ เราสามารถกำหนดจำนวนคอลัมน์ที่จะใช้ในแต่ละหน้าจอได้ตามความต้องการ เช่น ในตัวอย่างนี้ คอลัมน์จะถูกแบ่งออกเป็น 3 ส่วน (4+4+4 = 12) โดยแต่ละคอลัมน์จะมีความกว้าง 4 ส่วนบนหน้าจอขนาด Large การใช้งาน Auto-layout Grid Bootstrap 5 รองรับการจัดการ Layout แบบอัตโนมัติ (Auto-layout) โดยไม่จำเป็นต้องระบุขนาดของคอลัมน์…

Bootstrap 5 การใช้งาน Grid กับหน้าจอขนาดกลาง (Medium)

การใช้งาน Grid ในหน้าจอขนาด Medium (md) หมายถึงการกำหนดรูปแบบการจัดวางคอลัมน์ (columns) ที่จะเริ่มมีผลเมื่อหน้าจอมีความกว้างตั้งแต่ 768px ขึ้นไป โดยใช้คลาส .col-md-* เพื่อควบคุมการแบ่งส่วนหน้าจอ ตัวอย่างการใช้งาน ในตัวอย่างนี้ เมื่อหน้าจอมีขนาด 768px ขึ้นไป คอลัมน์ 1 และคอลัมน์ 2 จะถูกแบ่งกันคนละ 50% (หรือครึ่งหนึ่งของหน้าจอ) แต่ถ้าหน้าจอมีขนาดน้อยกว่า 768px คอลัมน์จะเรียงต่อกันลงมาในแนวตั้ง การแบ่งคอลัมน์แบบเท่ากัน ในกรณีที่ต้องการแบ่งคอลัมน์ให้มีขนาดเท่ากันทั้งหมด เราสามารถใช้ .col-md โดยไม่ต้องระบุขนาด ในตัวอย่างนี้คอลัมน์ทั้ง 3 จะถูกแบ่งเท่าๆ กัน การแบ่งคอลัมน์แบบไม่เท่ากัน บางครั้งเราอาจต้องการแบ่งคอลัมน์แบบไม่เท่ากัน เช่น…

Bootstrap 5 การใช้งาน Grid กับหน้าจอขนาดเล็ก (Small)

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

Bootstrap 5 การใช้งาน Grid กับหน้าจอ Extra Small

Grid ใน Bootstrap 5 เป็นระบบที่ใช้จัดการโครงสร้างเลย์เอาต์ของหน้าเว็บเพื่อให้แสดงผลได้อย่างมีประสิทธิภาพบนอุปกรณ์ที่มีขนาดหน้าจอต่าง ๆ โดยในกรณีของหน้าจอ Extra Small (ขนาดหน้าจอน้อยกว่า 576px เช่น โทรศัพท์มือถือขนาดเล็ก) Bootstrap จะใช้คลาส .col- เพื่อกำหนดความกว้างของคอลัมน์ให้เหมาะสม แนวคิดหลักของ Bootstrap Grid Bootstrap ใช้โครงสร้างตาราง (Grid System) ที่แบ่งพื้นที่การแสดงผลออกเป็น 12 ส่วนเท่า ๆ กัน ซึ่งเราสามารถเลือกใช้จำนวนคอลัมน์ที่ต้องการได้ โดยคอลัมน์จะถูกจัดเรียงอัตโนมัติตามขนาดหน้าจอ สำหรับหน้าจอขนาดเล็ก (Extra Small) สามารถใช้คลาส .col- ซึ่งจะหมายถึงหน้าจอที่มีขนาดเล็กกว่า 576px นอกจากนี้ยังสามารถใช้คลาส .col-sm-,…

Bootstrap 5 การใช้งาน Grid แบบ Stacked to horizontal

ใน Bootstrap 5 เราสามารถใช้ระบบกริด (Grid) เพื่อจัดการการแสดงผลเนื้อหาให้ปรับเปลี่ยนตามขนาดหน้าจอได้ โดยรูปแบบ “Stacked to Horizontal” เป็นการจัดการแสดงผลที่เนื้อหาจะเรียงกันในแนวตั้ง (Stacked) บนหน้าจอขนาดเล็ก (เช่น โทรศัพท์มือถือ) แต่จะเปลี่ยนเป็นการเรียงแนวนอน (Horizontal) เมื่ออยู่บนหน้าจอขนาดใหญ่กว่า (เช่น แท็บเล็ตหรือเดสก์ท็อป) หลักการของ Grid System ใน Bootstrap 5 Grid System ใน Bootstrap 5 แบ่งหน้าจอเป็น 12 คอลัมน์ โดยเราสามารถกำหนดความกว้างของแต่ละคอลัมน์ได้ตามที่ต้องการ ซึ่งจะช่วยให้เราออกแบบเลย์เอาต์ได้ตามความต้องการ นอกจากนี้เรายังสามารถควบคุมลักษณะการแสดงผลให้คอลัมน์แสดงในแนวตั้ง (Stacked) หรือในแนวนอน (Horizontal)…

Bootstrap 5 การใช้งาน Grid System

ใน Bootstrap 5 ระบบ Grid คือเครื่องมือที่ช่วยในการออกแบบ Layout ของหน้าเว็บไซต์อย่างยืดหยุ่นและง่ายดาย โดยใช้การจัดวางองค์ประกอบต่าง ๆ ของหน้าเว็บในรูปแบบแถว (Row) และคอลัมน์ (Column) ทำให้สามารถกำหนดขนาดและการแสดงผลของแต่ละองค์ประกอบตามขนาดหน้าจอที่แตกต่างกันได้ เช่น หน้าจอมือถือ แท็บเล็ต หรือเดสก์ท็อป โครงสร้างพื้นฐานของ Grid System ใน Bootstrap 5 ระบบ Grid ใน Bootstrap 5 จะใช้การแบ่งหน้าออกเป็น 12 ส่วนเท่ากัน โดยแต่ละคอลัมน์ (Column) จะมีขนาดแตกต่างกันตามที่เรากำหนด ซึ่งสามารถใช้คลาส .container, .row และ…

Bootstrap 5 การใช้งาน Form Validation

การทำ Form Validation (การตรวจสอบความถูกต้องของแบบฟอร์ม) เป็นสิ่งสำคัญในการสร้างเว็บแอปพลิเคชันที่มีความปลอดภัยและเชื่อถือได้ การใช้ Bootstrap 5 ในการตรวจสอบความถูกต้องของฟอร์มช่วยให้เราสามารถปรับแต่งและออกแบบฟอร์มได้ง่ายขึ้น และมีฟังก์ชันการตรวจสอบที่ใช้งานง่ายพร้อมทั้งสนับสนุนความเข้ากันได้กับ HTML5 form validation API ขั้นตอนการใช้งาน Form Validation ด้วย Bootstrap 5 ใน Bootstrap 5 การตรวจสอบความถูกต้องของฟอร์มสามารถทำได้โดยการเพิ่ม class .was-validated ลงใน <form> เมื่อผู้ใช้กรอกข้อมูลลงในฟอร์มแล้วคลิกปุ่ม submit โดย Bootstrap จะทำการเพิ่มข้อความเตือนและเปลี่ยนสีของขอบฟอร์มเพื่อแสดงข้อผิดพลาด อธิบายโค้ด 1. HTML Structure 2. Validation Feedback…

Bootstrap 5 การใช้งาน Form Floating Label

ใน Bootstrap 5 ได้เพิ่มฟีเจอร์ใหม่ที่เรียกว่า Floating Label สำหรับฟอร์ม ซึ่งเป็นการจัดการให้ป้ายข้อความ (Label) ของฟอร์มซ้อนอยู่ในฟิลด์ของอินพุต (Input Field) เมื่อผู้ใช้เริ่มกรอกข้อมูล ป้ายข้อความนี้จะเลื่อนขึ้นไปด้านบนของฟิลด์ ทำให้ฟอร์มดูสะอาดตาและใช้งานได้ง่ายขึ้น การเริ่มต้นใช้งาน Floating Label เพื่อใช้งาน Floating Label ในฟอร์มของ Bootstrap 5 จำเป็นต้องมีโครงสร้าง HTML ที่ถูกต้อง โดยใช้คลาส .form-floating ซึ่งจะครอบอินพุตและป้ายข้อความไว้ ตัวอย่างโครงสร้างพื้นฐาน หมายเหตุ: placeholder ในอินพุตจำเป็นต้องมี แต่มันจะถูกซ่อนไว้หลังจากที่ Floating Label ทำงาน Floating Label…

Bootstrap 5 การใช้งาน Input Group

Input Group ใน Bootstrap 5 เป็นเครื่องมือที่ช่วยให้เราสามารถรวมองค์ประกอบต่าง ๆ เข้ากับฟอร์มของเราเพื่อเพิ่มความสะดวกในการใช้งาน ไม่ว่าจะเป็นการเพิ่มปุ่ม ไอคอน หรือข้อความต่าง ๆ ก่อนหรือหลังช่องกรอกข้อมูล (input field) เพื่อให้การออกแบบฟอร์มดูสวยงามและมีฟังก์ชันการทำงานที่สมบูรณ์ยิ่งขึ้น วิธีการใช้งาน Input Group เบื้องต้น การใช้งาน Input Group ใน Bootstrap 5 สามารถทำได้โดยการใช้คลาส .input-group ร่วมกับคลาสอื่น ๆ เพื่อจัดเรียงองค์ประกอบต่าง ๆ ให้ปรากฏก่อนหรือหลังช่องกรอกข้อมูล ตัวอย่างเช่น ในตัวอย่างข้างต้น เราได้ใช้คลาส .input-group-text เพื่อเพิ่มสัญลักษณ์ @ ก่อนช่องกรอกข้อมูล…

Bootstrap 5 การใช้งาน Range

ใน Bootstrap 5 ได้มีการเพิ่มฟีเจอร์ Range หรือ range input ที่สามารถใช้ในการรับค่าตัวเลขที่สามารถเลื่อนเลือกค่าได้จากขอบเขตที่กำหนด ตัวอย่างการใช้งาน range นี้สามารถนำไปประยุกต์ใช้ในหลายรูปแบบ เช่น การปรับระดับเสียง การปรับระดับความสว่าง หรือการเลือกช่วงของตัวเลข เป็นต้น การสร้าง Range Input เบื้องต้น ตัวอย่างการสร้าง range input พื้นฐานที่ใช้ใน Bootstrap 5 มีลักษณะดังนี้ ในตัวอย่างข้างต้น เราจะใช้ class=”form-range” เพื่อกำหนดให้ input มีลักษณะเป็นแถบเลื่อน (slider) โดยสามารถใช้งานได้ทันทีหลังจากเรียกใช้งาน Bootstrap กำหนดค่าต่ำสุด (min), ค่าสูงสุด…

Bootstrap 5 การใช้งาน Checkbox

ใน Bootstrap 5 เราสามารถใช้งาน Checkbox ได้อย่างง่ายดาย และสะดวกต่อการออกแบบ UI ที่สวยงาม รวมถึงรองรับการทำงานในทุกอุปกรณ์ ไม่ว่าจะเป็นเดสก์ท็อปหรือมือถือ Checkbox เป็นองค์ประกอบสำคัญในฟอร์มที่ใช้สำหรับให้ผู้ใช้งานเลือกตัวเลือกที่หลากหลายได้พร้อมกัน การสร้าง Checkbox แบบพื้นฐาน (Basic Checkbox) Checkbox แบบพื้นฐานใน Bootstrap 5 สามารถสร้างได้ง่ายโดยใช้คลาส .form-check และ .form-check-input สำหรับ Checkbox และ .form-check-label สำหรับป้ายชื่อ (Label) Checkbox แบบเลือกไม่ได้ (Disabled Checkbox) ในกรณีที่ต้องการแสดง Checkbox แต่ไม่อนุญาตให้ผู้ใช้งานทำการเลือก สามารถใช้คลาส…

Bootstrap 5 การใช้งาน Select

ใน Bootstrap 5 การใช้ Select หรือปุ่มเลือกข้อมูลที่ให้ผู้ใช้เลือกจากรายการที่มีอยู่เป็นสิ่งที่จำเป็นในฟอร์มต่าง ๆ เพื่อให้สามารถเลือกรายการที่ต้องการได้ง่ายขึ้น การสร้าง Select เบื้องต้น การสร้าง Select เบื้องต้นใน Bootstrap 5 สามารถทำได้โดยการใช้แท็ก <select> และ <option> เหมือน HTML ปกติ แต่ Bootstrap จะทำให้ดูเรียบง่ายและใช้งานง่ายขึ้น ในตัวอย่างข้างต้น เราใช้ class=”form-select” ของ Bootstrap เพื่อทำให้ Select สวยงามและใช้งานง่ายขึ้น การทำ Select แบบ Disabled หากเราต้องการทำให้ Select…