DCRUB

การสร้าง Form ด้วย Bootstrap 5 ทำให้เราสามารถสร้างฟอร์มที่มีความสวยงามน่าใช้งานมากขึ้น ดึงดูดความสนใจของผู้ใช้ได้ดีกว่าการสร้างฟอร์มด้วยวิธีปกติ การสร้างฟอร์มพื้นฐาน (Basic Form) Bootstrap 5 มีรูปแบบฟอร์มที่ง่ายต่อการใช้งาน เพียงเพิ่มคลาส .form-control ไปยัง <input> หรือ <textarea> จะทำให้ช่องกรอกข้อมูลถูกจัดรูปแบบให้ดูทันสมัยและสวยงาม การใช้งานฟอร์มที่มีการแบ่งคอลัมน์ (Form Grid) ในบางกรณี การจัดการฟอร์มให้มีหลายคอลัมน์สามารถเพิ่มความสะดวกในการกรอกข้อมูลได้มากขึ้น Bootstrap 5 รองรับการจัดคอลัมน์ของฟอร์มโดยใช้ระบบ Grid ของเฟรมเวิร์ก การใช้ฟอร์มแบบ Inline (Inline Form) ฟอร์มแบบ Inline จะถูกจัดเรียงในแนวนอนแทนการจัดเรียงในแนวตั้ง เหมาะสำหรับกรณีที่ต้องการฟอร์มขนาดเล็กในพื้นที่จำกัด เช่น การค้นหาข้อมูลในเว็บไซต์…

Flexbox ใน Bootstrap 5 ช่วยให้เราสามารถจัดเรียงคอนเทนต์ได้อย่างอิสระ ไม่ว่าจะเป็นแนวตั้งหรือแนวนอน รวมถึงการกระจายพื้นที่ระหว่างองค์ประกอบต่าง ๆ ตามที่เราต้องการ การสร้าง Container แบบ Flex การเริ่มใช้งาน Flexbox ใน Bootstrap 5 สามารถทำได้ง่าย ๆ โดยการเพิ่มคลาส d-flex ให้กับคอนเทนเนอร์ที่ต้องการให้เป็น Flexbox เช่น ในโค้ดด้านบน คอนเทนเนอร์จะถูกตั้งค่าเป็น Flexbox โดยที่ทุกองค์ประกอบภายในจะถูกจัดเรียงอยู่ในแถวเดียวกันตามแนวนอน การจัดเรียงคอนเทนต์แนวนอนและแนวตั้ง Flexbox ช่วยให้เราสามารถกำหนดทิศทางของการจัดเรียงคอนเทนต์ได้โดยใช้คลาส flex-row หรือ flex-column สำหรับจัดเรียงในแนวนอนและแนวตั้งตามลำดับ การจัดกึ่งกลางคอนเทนต์ (Centering) Bootstrap 5…

Dark Mode เป็นคุณลักษณะยอดนิยมในเว็บไซต์และแอปพลิเคชันในปัจจุบัน เนื่องจากช่วยลดการใช้พลังงานหน้าจอ ลดความเมื่อยล้าสายตาในเวลากลางคืน และช่วยเพิ่มความสวยงามและการใช้งานในสภาพแสงน้อย Bootstrap 5 รองรับการสร้าง Dark Mode ได้ง่ายผ่านการจัดการสไตล์ด้วย CSS และ JavaScript การใช้สไตล์ Dark Mode โดยตรง Bootstrap 5 ไม่มีโหมด Dark Mode ในตัว แต่เราสามารถสร้าง Dark Mode ได้โดยการกำหนด CSS Class สำหรับองค์ประกอบต่าง ๆ ในเว็บไซต์ เช่น การใช้ bg-dark สำหรับพื้นหลัง และ text-light…

Bootstrap 5 นำเสนอระบบ Utilities / Helper Classes ที่มีความยืดหยุ่นและง่ายต่อการใช้งาน ซึ่งออกแบบมาให้สามารถปรับแต่ง UI ได้อย่างรวดเร็วโดยไม่จำเป็นต้องเขียน CSS เพิ่มเอง Utilities เหล่านี้ครอบคลุมทั้งการจัดการ layout, การจัดการ spacing, การควบคุมสี, ขนาดตัวอักษร, และอื่นๆ Spacing (Margin และ Padding) Utilities สำหรับจัดการกับระยะห่างใน Bootstrap 5 คือการใช้ m สำหรับ margin และ p สำหรับ padding โดยตามด้วยขนาด เช่น 0,…

Offcanvas เป็นองค์ประกอบของ Bootstrap 5 ที่ช่วยให้เราสามารถสร้างเมนูหรือตัวเลือกที่ซ่อนอยู่ด้านข้าง และสามารถเลื่อนเข้ามาในหน้าเมื่อมีการเรียกใช้งานได้ โดย Offcanvas เหมาะสำหรับการสร้างเมนูข้างหรือ sidebar บนหน้าจอเล็ก ๆ เช่น โทรศัพท์มือถือ ทำให้สามารถเพิ่มพื้นที่ในการแสดงเนื้อหาได้เต็มที่ในหน้าจอ โครงสร้างพื้นฐานของ Offcanvas ใน Bootstrap 5 โครงสร้างพื้นฐานของ Offcanvas จะประกอบไปด้วย: ตัวอย่างโค้ดพื้นฐานของ Offcanvas มีดังนี้ ในตัวอย่างนี้ เมื่อคลิกที่ปุ่ม “เปิดเมนู” จะมีเมนูเลื่อนเข้ามาจากทางด้านซ้าย โดยคุณสามารถเพิ่มเนื้อหาหรือเมนูที่คุณต้องการในส่วนของ <div class=”offcanvas-body”> ลักษณะการประยุกต์ใช้งาน Offcanvas Offcanvas ใน Bootstrap 5 สามารถประยุกต์ใช้งานได้หลายลักษณะ…

Scrollspy เป็นฟีเจอร์หนึ่งใน Bootstrap 5 ที่ช่วยให้หน้าเว็บสามารถตรวจสอบและไฮไลท์เนื้อหาที่อยู่บนหน้าจอขณะเลื่อนดูหน้าเว็บ โดย Scrollspy จะผูกกับเมนูนำทาง (Navbar หรือเมนูแบบอื่น ๆ) และแสดงตำแหน่งของเนื้อหาที่แสดงบนหน้าจอในขณะนั้นอย่างชัดเจน ซึ่งเป็นฟีเจอร์ที่มีประโยชน์ในการสร้างเว็บไซต์ที่มีเนื้อหายาวหรือการทำ One-page website ที่มีหลายส่วน วิธีการใช้งาน Scrollspy Scrollspy ใน Bootstrap 5 สามารถใช้ได้ง่ายโดยทำตามขั้นตอนดังนี้ สร้างโครงสร้าง HTML เริ่มต้นด้วยการสร้างโครงสร้าง HTML ที่ประกอบด้วยเมนูนำทาง (Navbar) และเนื้อหาที่ต้องการให้ Scrollspy ตรวจสอบ ตัวอย่างการประยุกต์ใช้งาน Scrollspy 1. ใช้งานกับ One-page Website Scrollspy มักใช้ในเว็บไซต์ที่มีหลายส่วนในหน้าเดียว…

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

Popover เป็นส่วนหนึ่งของ Bootstrap 5 ที่ใช้ในการแสดงข้อมูลเพิ่มเติมหรือข้อความช่วยเหลือเมื่อผู้ใช้ทำการคลิกหรือโฟกัสที่องค์ประกอบใดองค์ประกอบหนึ่ง Popover คล้ายกับ Tooltip แต่สามารถรองรับเนื้อหาที่ซับซ้อนกว่า เช่น ข้อความที่มีหลายบรรทัด รูปภาพ หรือ HTML อื่นๆ การใช้งาน Popover เบื้องต้น การสร้าง Popover สามารถทำได้ง่ายๆ โดยใช้แอตทริบิวต์ data-bs-toggle และ data-bs-content เพื่อกำหนดข้อความที่จะปรากฏใน Popover ตัวอย่าง: การแสดง Popover บนปุ่ม การกำหนดตำแหน่งของ Popover Bootstrap รองรับการกำหนดตำแหน่งของ Popover หลายแบบ เช่น ด้านบน (top),…

ใน Bootstrap 5 นั้น Tooltip เป็นเครื่องมือที่มีประโยชน์มากสำหรับการแสดงข้อมูลเสริมหรือคำอธิบายเพิ่มเติมเมื่อผู้ใช้เลื่อนเมาส์ไปวางบนองค์ประกอบต่าง ๆ ของหน้าเว็บ โดย Tooltip สามารถช่วยให้ผู้ใช้ได้รับข้อมูลที่เป็นประโยชน์โดยไม่ต้องแสดงข้อมูลเหล่านั้นตลอดเวลา ทำให้หน้าเว็บดูสะอาดและไม่รก การใช้งาน Tooltip ขั้นพื้นฐาน การสร้าง Tooltip สามารถทำได้ง่าย ๆ โดยการเพิ่มแอตทริบิวต์ data-bs-toggle=”tooltip” ลงในองค์ประกอบ HTML ที่ต้องการ และกำหนดข้อความของ Tooltip ผ่านแอตทริบิวต์ title ตัวอย่างนี้เป็นการสร้างปุ่มที่เมื่อผู้ใช้เลื่อนเมาส์ไปวางจะเห็น Tooltip ขึ้นมา การเปิดใช้งาน Tooltip ด้วย JavaScript เนื่องจาก Tooltip ไม่เปิดใช้งานอัตโนมัติ เราจำเป็นต้องใช้ JavaScript…

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

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

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

Navs เป็นหนึ่งในองค์ประกอบของ Bootstrap 5 ที่ใช้สำหรับสร้างเมนูการนำทาง (Navigation) ในหน้าเว็บ ซึ่งมีลักษณะต่าง ๆ ที่สามารถปรับแต่งและประยุกต์ใช้งานได้หลากหลายรูปแบบ เช่น เมนูแบบแถวนอน (Horizontal Navs), เมนูแบบแนวตั้ง (Vertical Navs), เมนูแบบแท็บ (Tabs) และเมนูแบบปุ่มสลับ (Pills) เมนูแบบแถวนอน (Horizontal Navs) การสร้างเมนูแบบแถวนอนใน Bootstrap 5 สามารถทำได้ง่าย ๆ โดยการใช้คลาส .nav ร่วมกับ .nav-item และ .nav-link เมนูแบบแนวตั้ง (Vertical Navs) สามารถสร้างเมนูแบบแนวตั้งได้โดยการเพิ่มคลาส .flex-column…

Collapse เป็นหนึ่งในคอมโพเนนต์ของ Bootstrap 5 ที่ช่วยให้เราสามารถแสดงและซ่อนข้อมูลหรือเนื้อหาได้อย่างง่ายดายด้วยการคลิก ซึ่ง Collapse มักจะใช้ในกรณีที่ต้องการซ่อนข้อมูลบางส่วนไว้ และให้ผู้ใช้งานสามารถกดดูเพิ่มเติมหรือซ่อนข้อมูลนั้น ๆ ตามต้องการ เช่น เมนูเนื้อหาที่ซ่อนอยู่หรือการแสดงข้อมูลรายละเอียดเพิ่มเติมในหน้าต่างต่าง ๆ วิธีการใช้งาน Collapse เบื้องต้น ในการใช้งาน Collapse ด้วย Bootstrap 5 เราจำเป็นต้องใช้โครงสร้าง HTML ที่กำหนดไว้อย่างถูกต้อง และใช้งานร่วมกับ JavaScript ของ Bootstrap ที่ทำให้เนื้อหาสามารถเปิดและปิดได้ตามที่เราต้องการ ตัวอย่าง ปุ่มเปิด/ปิด (Toggle Button) ปุ่มนี้เป็นตัวควบคุมการเปิดหรือปิดของเนื้อหาที่ถูกซ่อนอยู่ โดยใช้ data-bs-toggle=”collapse” ซึ่งจะทำให้ปุ่มทำงานร่วมกับคอมโพเนนต์ Collapse ของ…