DCRUB

Bootstrap 4 มี utility/helper classes สำหรับให้เราใช้ในการตกแต่งเอลิเมนต์ได้อย่างรวดเร็วโดยไม่ต้องเขียนโค้ด CSS มีอะไรบ้างไปดูกันครับ Border ใน Bootstrap 4 การจัดการกับขอบหรือ “Border” สามารถทำได้โดยใช้คลาสที่จัดเตรียมไว้ให้ ซึ่งจะช่วยให้การตกแต่งขอบต่าง ๆ ขององค์ประกอบในเว็บไซต์เป็นเรื่องง่าย โดย Bootstrap 4 มีการจัดการกับขอบอยู่หลายรูปแบบ ดังนี้ คลาสพื้นฐานในการจัดการกับ Border ตัวอย่าง ขอบด้านใดด้านหนึ่ง เราสามารถเพิ่มขอบเฉพาะด้านได้ โดยใช้คลาสที่ระบุด้านที่ต้องการเพิ่มขอบ ตัวอย่าง สีของขอบ Bootstrap 4 ให้เราสามารถปรับสีขอบได้ง่าย ๆ ด้วยการเพิ่มคลาสที่ระบุสีของขอบ ตัวอย่าง ขนาดความหนาของขอบ เราสามารถปรับความหนาของขอบได้โดยใช้คลาสที่ระบุระดับความหนา ตัวอย่าง…

ใน Bootstrap 4 ระบบกริด (Grid system) เป็นเครื่องมือสำคัญที่ช่วยในการออกแบบเว็บไซต์ให้มีการจัดวางคอนเทนต์อย่างเป็นระเบียบทั้งในหน้าจอขนาดเล็กและใหญ่ โดยรูปแบบการใช้งาน Grid แบบ “Stacked-to-horizontal” หมายถึงการจัดวางคอนเทนต์ให้อยู่ในแนวตั้ง (Stacked) เมื่ออยู่ในหน้าจอขนาดเล็ก เช่น มือถือ และปรับเป็นแนวนอน (Horizontal) เมื่ออยู่ในหน้าจอขนาดใหญ่ขึ้น เช่น Tablet หรือ Desktop หลักการทำงานของ Bootstrap Grid System Bootstrap ใช้ระบบกริดที่แบ่งหน้าเป็น 12 คอลัมน์ ทำให้เราสามารถกำหนดขนาดของแต่ละคอลัมน์ได้ โดยในระบบนี้มีการใช้คลาสที่เป็น Prefix ตามขนาดหน้าจอ ได้แก่ เราสามารถกำหนดการจัดวางคอนเทนต์ให้เรียงซ้อนกันในหน้าจอขนาดเล็ก และเรียงเป็นแนวนอนในหน้าจอขนาดใหญ่โดยการใช้คลาสเหล่านี้ร่วมกัน การใช้งานแบบ Stacked…

Bootstrap 4 เป็น Framework สำหรับการพัฒนาเว็บที่ช่วยให้การสร้าง Layout เป็นเรื่องง่ายผ่านระบบ Grid System ซึ่งเป็นเครื่องมือในการจัดโครงสร้างของหน้าเว็บให้เข้ากับอุปกรณ์ที่มีขนาดหน้าจอต่างกัน โดย Grid System จะช่วยให้หน้าเว็บของเราดูดีและเป็นระเบียบมากขึ้น โดยรองรับการออกแบบแบบ Responsive แนวคิดพื้นฐานของ Grid System ใน Bootstrap 4 รูปแบบการใช้งานพื้นฐานของ Grid System 1. การใช้งาน Container หรือถ้าต้องการให้ Container กินพื้นที่เต็มจอ สามารถใช้ container-fluid แทน 2. การใช้งาน Row และ Column ภายใน…

Filter หรือฟังก์ชันการกรองข้อมูลใน Bootstrap 4 ใช้เพื่อช่วยผู้ใช้กรองเนื้อหาหรือข้อมูลที่ต้องการให้แสดงผลได้อย่างรวดเร็ว การสร้าง Filter เบื้องต้น สำหรับการสร้าง Filter เราสามารถใช้ส่วนประกอบเช่น form, input, และ button ซึ่งเป็นองค์ประกอบพื้นฐานในการรับข้อมูลจากผู้ใช้ นอกจากนี้ยังสามารถปรับใช้คลาสของ Bootstrap เพื่อให้รูปแบบการแสดงผลสวยงามยิ่งขึ้น ในตัวอย่างข้างต้น เราได้สร้างฟอร์มค้นหาข้อมูลแบบเบื้องต้น ซึ่งประกอบด้วยช่อง input และปุ่ม Search ที่ผู้ใช้สามารถกรอกข้อมูลที่ต้องการค้นหาได้ การสร้าง Filter สำหรับ Table หากต้องการสร้าง Filter สำหรับการกรองข้อมูลในตาราง เราสามารถใช้การค้นหาภายใน table โดยการรับค่าจาก input และใช้ JavaScript ในการกรองข้อมูล…

Bootstrap 4 มีส่วนประกอบที่เรียกว่า Media Object ซึ่งช่วยให้เราสามารถแสดงผลเนื้อหาที่มีองค์ประกอบสื่อ เช่น รูปภาพหรือวิดีโอ พร้อมกับเนื้อหาข้อความได้อย่างเป็นระเบียบและมีรูปแบบสวยงาม การจัดวางเนื้อหาผ่าน Media Object จะช่วยให้เว็บไซต์ของเรามีการแสดงผลที่เป็นมืออาชีพมากขึ้น รูปแบบพื้นฐานของ Media Object Media Object ถูกออกแบบมาให้มีรูปแบบที่เรียบง่าย โดยการใช้คลาส .media เป็นตัวกำหนดโครงสร้างหลักของการแสดงผล และใช้คลาส .media-body สำหรับเนื้อหาข้อความ ในตัวอย่างนี้ เราใช้คลาส .mr-3 เพื่อเว้นระยะด้านขวาของรูปภาพออกจากเนื้อหา และรูปภาพถูกกำหนดขนาดด้วย style=”width: 64px;” การจัดเรียง Media Object แบบซ้อนกัน Bootstrap 4 อนุญาตให้เราจัดเรียง Media…

Flexbox เป็นเครื่องมือที่มีประสิทธิภาพในการจัดการการแสดงผลและจัดวางองค์ประกอบในหน้าเว็บ โดย Bootstrap 4 ได้รองรับการใช้งาน Flexbox อย่างเต็มที่ผ่านชุดคลาสที่ทำให้การจัดวางและจัดรูปแบบองค์ประกอบเป็นเรื่องง่าย การใช้งาน Flex Container การเริ่มต้นใช้งาน Flexbox ใน Bootstrap 4 ต้องกำหนด container ที่มีคุณสมบัติเป็น Flex โดยใช้คลาส .d-flex บนองค์ประกอบที่ต้องการให้เป็น Flex container ซึ่ง Flex container นี้จะควบคุมลูกของมันทั้งหมด การจัดวางทิศทางของ Flex Items Flexbox รองรับการกำหนดทิศทางของ Flex items ใน container ซึ่งสามารถใช้คลาสเหล่านี้เพื่อกำหนดทิศทาง การจัดวาง…

Scrollspy เป็นฟีเจอร์ใน Bootstrap 4 ที่ช่วยให้เว็บไซต์สามารถระบุได้ว่าผู้ใช้เลื่อนหน้าเว็บไปถึงส่วนไหนแล้ว โดยจะอัปเดตลิงก์ในเมนูนำทาง (Navbar) ให้สัมพันธ์กับส่วนของเนื้อหาที่ถูกเลื่อนเข้ามาในมุมมองของผู้ใช้ ฟีเจอร์นี้มักถูกใช้ควบคู่กับเมนูนำทางแบบคงที่ (Fixed Navbar) หรือเมนูนำทางด้านข้าง (Sidebar Navigation) เพื่อช่วยนำทางผู้ใช้ไปยังส่วนต่าง ๆ ของหน้าได้อย่างง่ายดาย ขั้นตอนการใช้งาน Scrollspy ด้วย Bootstrap 4 1. สร้างโครงสร้าง HTML สำหรับการนำทาง เริ่มต้นด้วยการสร้างเมนูนำทางที่มีการเชื่อมโยงไปยังส่วนต่าง ๆ ของเนื้อหา โดยการเชื่อมโยงเหล่านี้จะอ้างอิงตาม ID ของแต่ละส่วนในเนื้อหา 2. สร้างเนื้อหา (Content Sections) แต่ละส่วนของเนื้อหาที่จะเลื่อนถึงต้องมี ID เพื่อที่จะเชื่อมโยงกับลิงก์ในเมนูนำทาง 3.…

Toast เป็นคอมโพเนนต์ใน Bootstrap 4 ที่ใช้แสดงข้อความแจ้งเตือน (Notification) อย่างเรียบง่ายและสามารถแสดงผลได้ทันทีบนหน้าเว็บโดยไม่ทำให้ผู้ใช้ต้องมีการโต้ตอบแบบซับซ้อน Toast ถูกออกแบบมาให้แสดงข้อความแบบชั่วคราวและหายไปเองเมื่อเวลาผ่านไป โครงสร้างพื้นฐานของ Toast โครงสร้างของ Toast ประกอบไปด้วย div ที่มี class .toast และส่วนประกอบย่อยอีกหลายส่วน เช่น header, body และปุ่มปิด ในตัวอย่างนี้ จะเห็นว่า Toast มีทั้ง header และ body ที่แยกกันอย่างชัดเจน และมีปุ่มปิดที่ผู้ใช้สามารถกดปิดได้ การใช้งาน Toast แบบอัตโนมัติ Toast สามารถตั้งค่าให้แสดงผลและหายไปเองโดยอัตโนมัติได้ โดยไม่ต้องกดปิด ในตัวอย่างนี้ data-delay=”5000″…

Popover เป็นหนึ่งในองค์ประกอบสำคัญของ Bootstrap 4 ที่ใช้ในการแสดงข้อมูลเพิ่มเติมหรือคำอธิบายเสริมจากปุ่มหรือลิงก์ โดยจะปรากฏเป็นกรอบข้อความคล้ายๆ กับ Tooltip แต่มีความสามารถในการใส่เนื้อหามากกว่า เช่น รูปภาพ, ลิงก์ หรือ HTML อื่นๆ การใช้งาน Popover การตั้งค่า HTML สำหรับ Popover: Popover สามารถใช้งานได้โดยการเพิ่ม data-toggle=”popover” ไปยังองค์ประกอบที่ต้องการให้ Popover ปรากฏ เช่น ปุ่มหรือลิงก์ ตัวอย่าง การเริ่มใช้งาน Popover ด้วย JavaScript: Popover ต้องการการทำงานร่วมกับ JavaScript โดยสามารถเปิดการใช้งานได้ด้วยคำสั่ง jQuery ตัวอย่างรูปแบบการใช้งาน…

Tooltip เป็นองค์ประกอบของ UI ที่ช่วยให้ผู้ใช้สามารถเห็นข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบต่างๆ บนหน้าเว็บไซต์เมื่อชี้เมาส์ไปที่องค์ประกอบนั้น ใน Bootstrap 4 การใช้งาน Tooltip เป็นเรื่องง่ายและสามารถปรับแต่งได้หลายรูปแบบ การสร้าง Tooltip เพื่อสร้าง Tooltip เราสามารถใช้ HTML Element และกำหนดแอตทริบิวต์ data-toggle และ title ดังนี้ การเปิดใช้งาน Tooltip หลังจากสร้าง Tooltip แล้ว เราต้องเปิดใช้งานด้วย JavaScript ตัวอย่าง Tooltip ที่แตกต่างกัน Tooltip ด้านบน Tooltip ด้านล่าง Tooltip ด้านซ้าย Tooltip…

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

Carousel เป็นองค์ประกอบที่ช่วยให้เราสามารถแสดงเนื้อหาหรือภาพหลายๆ ชิ้นในรูปแบบที่เลื่อนหรือหมุนได้อย่างน่าสนใจ ใน Bootstrap 4, การสร้าง Carousel เป็นเรื่องที่ง่ายมาก โดยเราสามารถใช้โครงสร้าง HTML และคลาสที่เตรียมไว้ให้เพื่อสร้าง Carousel ได้อย่างรวดเร็ว โครงสร้าง Carousel เราสามารถสร้าง Carousel โดยใช้โค้ด HTML ดังนี้ อธิบายโครงสร้าง การประยุกต์ใช้งาน Carousel คลาสต่าง ๆ ที่สามารถใช้ได้ ชื่อคลาส คำอธิบาย carousel คลาสหลักสำหรับ Carousel carousel-inner คอนเทนเนอร์สำหรับรายการ Carousel Items carousel-item ใช้สำหรับแต่ละสไลด์ใน Carousel active…

Input Group คือองค์ประกอบหนึ่งใน Bootstrap 4 ที่ใช้ในการรวมฟิลด์ป้อนข้อมูล (input fields) เข้ากับองค์ประกอบอื่นๆ เช่น ป้ายชื่อ (label), ปุ่ม (button), ไอคอน (icon), หรือข้อความเสริม (addon) ไว้ในแถวเดียวกันอย่างเป็นระเบียบ Input Group ถูกออกแบบมาเพื่อช่วยให้อินพุตดูมีโครงสร้างที่สวยงาม สะดวกต่อการใช้งาน และง่ายต่อการเข้าใจข้อมูลที่ผู้ใช้ต้องกรอก วัตถุประสงค์หลักของ Input Group ขั้นตอนการใช้งาน Input Group ตัวอย่างการใช้งาน Input Group Input Group พร้อมป้ายชื่อ ในตัวอย่างนี้ ฟิลด์ป้อนข้อมูลมีสัญลักษณ์ “@” เพื่อแสดงว่าผู้ใช้ควรกรอกชื่อผู้ใช้…

Input คือ ข้อมูลที่ผู้ใช้ใส่หรือกรอกลงในโปรแกรมหรือระบบคอมพิวเตอร์ เพื่อให้โปรแกรมนั้นทำงานต่อไป โดยทั่วไป “Input” จะถูกนำมาใช้ในฟอร์มหรืออินเทอร์เฟซของเว็บไซต์หรือแอปพลิเคชันเพื่อเก็บข้อมูลจากผู้ใช้ เช่น การกรอกข้อความ การเลือกตัวเลือก การกรอกตัวเลข หรือการอัปโหลดไฟล์ การใช้ Input ใน Bootstrap 4 มีหลายรูปแบบและวิธีการประยุกต์ใช้งาน โดย Bootstrap 4 มาพร้อมกับคลาสและเครื่องมือที่ช่วยให้การออกแบบ Input ในฟอร์มเป็นไปอย่างง่ายดายและมีความสวยงาม มาดูรูปแบบการใช้งานต่างๆ ของ Input ใน Bootstrap 4 กันครับ Input แบบพื้นฐาน (Basic Input) ฟอร์ม Input แบบพื้นฐานสามารถใช้งานได้ด้วยการเพิ่มคลาส form-control ลงใน…

Form (ฟอร์ม) ในบริบทของการพัฒนาเว็บ คือองค์ประกอบ (element) ของหน้าเว็บที่ใช้ในการรับข้อมูลจากผู้ใช้งาน โดยข้อมูลที่ผู้ใช้กรอกหรือเลือกในฟอร์มจะถูกส่งไปยังเซิร์ฟเวอร์เพื่อประมวลผล ฟอร์มมักจะประกอบด้วยองค์ประกอบหลายประเภท เช่น ช่องกรอกข้อความ (input field), ปุ่มกด (button), กล่องเลือก (checkbox, radio button), และรายการเลือก (dropdown list) เพื่อให้ผู้ใช้กรอกหรือเลือกข้อมูลตามความต้องการ การสร้าง Form พื้นฐาน Bootstrap 4 มีคลาสที่ช่วยในการจัดการกับ Form ได้ง่าย โดยการใช้คลาส form-group, form-control, และ form-check สำหรับการสร้างฟอร์มแบบพื้นฐาน ตัวอย่างเช่น Stacked Form Stacked…

Bootstrap 4 เป็นเฟรมเวิร์กยอดนิยมสำหรับการพัฒนาเว็บไซต์ที่ช่วยให้นักพัฒนาสามารถสร้างส่วนติดต่อผู้ใช้ที่สวยงามและใช้งานง่าย โดยเฉพาะอย่างยิ่งในส่วนของ Navigation Bar (แถบนำทาง) ที่มีความสำคัญในการช่วยให้ผู้ใช้สามารถเข้าถึงเนื้อหาของเว็บไซต์ได้อย่างรวดเร็ว บทความนี้จะอธิบายการใช้งาน Navigation Bar ใน Bootstrap 4 พร้อมตัวอย่างที่หลากหลาย การสร้าง Navigation Bar พื้นฐาน เริ่มจากการสร้าง Navigation Bar ที่เรียบง่ายโดยใช้คลาส navbar ของ Bootstrap 4 ในตัวอย่างนี้ เราสร้าง Navigation Bar ที่มีแบรนด์ ชื่อฟีเจอร์ และลิงก์ต่างๆ ซึ่งมีการจัดเรียงที่สวยงามโดยใช้คลาส navbar-light และ bg-light Navigation Bar…

Bootstrap 4 เป็นเฟรมเวิร์กยอดนิยมที่ช่วยในการออกแบบเว็บไซต์ โดยเฉพาะการสร้างเมนูนำทาง (Navigation) ที่สวยงามและตอบสนองได้ดี ในบทความนี้ เราจะอธิบายการใช้งาน Nav ด้วย Bootstrap 4 พร้อมยกตัวอย่างการใช้งานในรูปแบบต่าง ๆ ที่สามารถประยุกต์ใช้ได้ Nav Menus การสร้างเมนูนำทางพื้นฐานสามารถทำได้โดยใช้คลาส nav ของ Bootstrap Aligned Nav เพื่อจัดแนวเมนูให้ไปทางซ้าย ขวา หรือกลาง สามารถใช้คลาส justify-content-* Vertical Nav หากต้องการทำเมนูแนวตั้ง สามารถใช้ nav ร่วมกับ flex-column Tabs การสร้างแท็บสามารถทำได้โดยใช้คลาส nav-tabs Pills การสร้างเมนูแบบ…

Bootstrap 4 เป็นเฟรมเวิร์ก CSS ที่ช่วยในการสร้างเว็บที่ตอบสนองได้ง่ายและรวดเร็ว ฟีเจอร์หนึ่งที่มีประโยชน์มากคือ Collapse ซึ่งใช้สำหรับซ่อนหรือแสดงเนื้อหาต่างๆ ตามความต้องการของผู้ใช้ การตั้งค่า Collapse ในการใช้งาน Collapse เราจะต้องใช้ class collapse และกำหนด data-toggle เป็น collapse ในปุ่มหรือองค์ประกอบที่เราต้องการให้มีการซ่อนหรือแสดงเนื้อหา การใช้งาน Collapse กับ Accordion Accordion เป็นรูปแบบการใช้งาน Collapse ที่ช่วยให้เนื้อหาหลายส่วนแสดงผลได้อย่างเป็นระเบียบ โดยผู้ใช้สามารถเปิดเนื้อหาหนึ่งและปิดเนื้อหาอื่นๆ ได้ การใช้งาน Collapse เพื่อสร้างเมนูแบบ Drop-down เราสามารถนำ Collapse มาใช้ในการสร้างเมนูแบบ Drop-down เพื่อให้ผู้ใช้สามารถเลือกดูเนื้อหาต่างๆ…

ใน Bootstrap 4 นั้น Dropdown ถือเป็นหนึ่งในองค์ประกอบที่ช่วยให้การสร้างเมนูหรือตัวเลือกแบบเลื่อนลง (Dropdown) ทำได้ง่ายและสวยงาม โดยไม่จำเป็นต้องเขียน CSS หรือ JavaScript เองทั้งหมด เนื่องจาก Bootstrap มีคลาสที่ช่วยจัดการให้พร้อมใช้งานได้ทันที การใช้งานพื้นฐานของ Dropdown Dropdown พื้นฐานจะประกอบไปด้วยปุ่มที่เมื่อคลิกจะมีตัวเลือกแสดงออกมาข้างล่าง ปุ่มนี้ถูกสร้างโดยใช้คลาส dropdown-toggle และตัวเลือกใน Dropdown ถูกจัดกลุ่มไว้ในคลาส dropdown-menu แต่ละตัวเลือกถูกระบุโดยคลาส dropdown-item ตัวอย่าง Dropdown พื้นฐาน Dropdown แบบแบ่งกลุ่ม (Dropdown Divider) บางครั้งอาจต้องการแบ่งกลุ่มของตัวเลือกใน Dropdown เพื่อให้ผู้ใช้มองเห็นความแตกต่างของแต่ละกลุ่ม Bootstrap 4…

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