รวมบทความ สอน Bootstrap 5 ตั้งแต่พื้นฐานการจัดโครงสร้างเลย์เอาต์ การใช้คอมโพเนนต์ใหม่ ๆ การจัดการ Grid System ไปจนถึงการสร้างเว็บไซต์ Responsive ที่สวยงาม ทันสมัย และรองรับทุกอุปกรณ์อย่างมืออาชีพ
Carousel ใน Bootstrap 5 เป็นส่วนประกอบที่ใช้ในการแสดงภาพหรือเนื้อหาเป็นสไลด์ โดยสามารถเลื่อนไปมาได้อัตโนมัติหรือด้วยการควบคุมของผู้ใช้ Carousel มักใช้ในการแสดงภาพหรือเนื้อหาที่ต้องการให้ผู้ใช้เห็นเป็นช่วงๆ ในเว็บไซต์หรือแอปพลิเคชัน คุณสมบัติของ…
Navbar หรือแถบนำทาง เป็นองค์ประกอบหนึ่งที่ใช้สำหรับการจัดการนำทางบนเว็บไซต์ ซึ่ง Bootstrap 5 ได้ออกแบบและพัฒนา Navbar ให้มีความยืดหยุ่นสูงและง่ายต่อการใช้งาน พร้อมทั้งรองรับการปรับแต่งต่าง…
Navs เป็นหนึ่งในองค์ประกอบของ Bootstrap 5 ที่ใช้สำหรับสร้างเมนูการนำทาง (Navigation) ในหน้าเว็บ ซึ่งมีลักษณะต่าง ๆ ที่สามารถปรับแต่งและประยุกต์ใช้งานได้หลากหลายรูปแบบ…
Collapse เป็นหนึ่งในคอมโพเนนต์ของ Bootstrap 5 ที่ช่วยให้เราสามารถแสดงและซ่อนข้อมูลหรือเนื้อหาได้อย่างง่ายดายด้วยการคลิก ซึ่ง Collapse มักจะใช้ในกรณีที่ต้องการซ่อนข้อมูลบางส่วนไว้ และให้ผู้ใช้งานสามารถกดดูเพิ่มเติมหรือซ่อนข้อมูลนั้น ๆ…
Dropdown Menu คือเมนูที่อนุญาตให้ผู้ใช้สามารถคลิกเลือกรายการ 1 เมนู จากรายการเมนูทั้งหมดที่บราจุอยู่ด้านใน ถ้าต้องการสร้างตัวคั่นระหว่างรายการเมนู สามารถทำได้โดยใช้คลาส .dropdown-divider ร่วมกับแท็ก…
Card คือกล่องที่ประกอบไปด้วยส่วนหัว Header ส่วนเนื้อหา Body และส่วนท้าย Footer แสดงผลเป็นกล่องแบบมีกรอบและ Padding สามารถนำมาใช้งานได้หลากหลายวัตถุประสงค์และสวยงามดูดี…
โดยปกติ การสร้าง List รายการทั่วไป เราจะใช้เอลิเมนต์ <ul> ครอบเอลิเมนต์ <li> ดังนี้ เราสามารถใช้…
ถ้าเราสร้างเว็บเพจที่ต้องมีการแบ่งหน้าเว็บออกเป็นหลาย ๆ หน้า Bootstrap 5 สามารถช่วยเราตกแต่ง Pagination ให้สวยงามได้ การสร้างการแบ่งหน้า หรือ…
Spinner คือสัญลักษณ์วงกลมที่หมุนไปเรื่อย ๆ สำหรับแสดงสถานะว่าระบบกำลังทำงาน กำลังโหลด เป็นต้น เพื่อให้ผู้ใช้งานรู้ว่าเว็บไซต์ของเราทำงานอยู่นะ ไม่ได้ค้างหรืออะไร ให้รอหน่อย เป็นต้น…
Progress Bar ก็คือ แถบสถานะที่บ่งบอกความคืบหน้าของงานหรือกิจกรรมบางอย่าง เพื่อให้รู้ว่างานนั้น ๆ คืบหน้าไปแล้วเท่าไหร่ ใกล้เสร็จหรือยัง เป็นต้น เราสามารถใช้…
Badge มีไว้สำหรับแสดงข้อมูลเพิ่มเติมต่อจากข้อมูลหลัก เช่น แสดงจำนวนตัวเลขการแจ้งเตือนใหม่ เป็นต้น หรือใช้งานอย่างอื่นในลักษณะเป็นป้าย การสร้าง Badge สามารถทำได้โดยการใช้คลาส .badge…
ด้วยการใช้ Bootstrap 5 เราสามารถรวมปุ่มกดให้อยู่รวมกันเป็นกลุ่มในบรรทัดเดียวกันได้ โดยการใช้คลาส .btn-group ภายในเอลิเมนต์ <div> ดังนี้ โดยปกติ…
Bootstrap 5 มีคลาสสำหรับตกแต่งปุ่มกด Button จำนวนหนึ่ง โดยให้ใช้คลาส .btn เพื่อตกแต่งปุ่มกดตามสไตล์ของ Bootstrap หากต้องการปุ่มกดที่มีสีพื้นหลังแบบต่าง…
เราสามารถตกแต่งข้อความแจ้งเตือนที่โดดเด่นดูดีด้วย Bootstrap 5 โดยใช้คลาส .alert ตามด้วย contextual class ตัวใดตัวหนึ่ง ดังนี้…
ใน Bootstrap 3 และ Bootstrap 4 จะมีคลาส .jumbotron ให้เราใช้สำหรับการแสดงผลข้อความให้มีความโดดเด่น โดยการทำให้เอลิเมนต์แสดงผลเป็นเหมือนกล่องขนาดใหญ่และกำหนด…
เราสามารถใช้ Bootstrap 5 ตกแต่งรูปทรงการแสดงผลของรูปภาพได้ 3 แบบ คือ แบบสี่เหลี่ยมมุมใน (Rounded Corners)…
ใน Bootstrap 5 มีคลาสสำหรับตกแต่งตารางจำนวนหนึ่ง ซึ่งมีรายละเอียดการใช้งานดังนี้ การตกแต่งตารางขั้นพื้นฐาน สำหรับการตกแต่งตารางขั้นพื้นฐาน ให้ใช้คลาส .table กำกับแท็ก…
Bootstrap 5 ได้เตรียมคลาสไว้ให้เราใช้สำหรับตกแต่งเอลิเมนต์ต่าง ๆ ในหน้าเว็บเพจจำนวนหนึ่ง สำหรับตกแต่งสีข้อความและสีพื้นหลัง คลาสสำหรับตกแต่งสีข้อความ Text Colors สำหรับคลาสที่…
เมื่อใช้ Bootstrap 5 ในการตกแต่งเว็บไซต์ โดยค่าเริ่มต้นขนาดตัวอักษรจะถูกกำหนดไว้ที่ 1rem (16px) และความสูงของบรรทัดจะอยู่ที่ 1.5rem ถ้าเราใช้แท็ก…
Bootstrap แสดงผลในแบบ Grid โดยใช้ flexbox ทำให้การแสดงผลเป็นแบบ Responsive คือปรับขนาดตามความละเอียดของหน้าจอ โดย Grid…
การใช้งานคลาสต่าง ๆ ของ Bootstrap เพื่อตกแต่งเว็บไซต์ ต้องทำภายใต้ตัวบรรลุ หรือที่เรียกว่า Container ซึ่งใน Bootstrap…
Bootstrap เป็น front-end framework ที่ได้รับความนิยมเป็นอย่างมาก เพราะทำงานได้เร็ว ใช้งานง่าย ที่สำคัญ ใช้ได้ฟรีด้วย การใช้งาน…