ตกแต่งข้อความแจ้งเตือน Alerts สวย ๆ ด้วย Bootstrap 5 เราสามารถตกแต่งข้อความแจ้งเตือนที่โดดเด่นดูดีด้วย Bootstrap 5 โดยใช้คลาส .alert ตามด้วย contextual class ตัวใดตัวหนึ่ง…

การใช้งาน Jumbotron ใน Bootstrap 5 ใน Bootstrap 3 และ Bootstrap 4 จะมีคลาส .jumbotron ให้เราใช้สำหรับการแสดงผลข้อความให้มีความโดดเด่น โดยการทำให้เอลิเมนต์แสดงผลเป็นเหมือนกล่องขนาดใหญ่และกำหนด Padding…

ตกแต่งการแสดงผลรูปภาพด้วย Bootstrap 5 เราสามารถใช้ Bootstrap 5 ตกแต่งรูปทรงการแสดงผลของรูปภาพได้ 3 แบบ คือ แบบสี่เหลี่ยมมุมใน (Rounded Corners) แบบวงกลม (Circle) และแบบทัมบ์เนล…

ตกแต่งตารางด้วย Bootstrap 5 ใน Bootstrap 5 มีคลาสสำหรับตกแต่งตารางจำนวนหนึ่ง ซึ่งมีรายละเอียดการใช้งานดังนี้ การตกแต่งตารางขั้นพื้นฐาน สำหรับการตกแต่งตารางขั้นพื้นฐาน ให้ใช้คลาส .table กำกับแท็ก <table> ดังนี้ ตารางที่ตกแต่งด้วยคลาส…

ตกแต่งสีข้อความและพื้นหลัง ด้วย Bootstrap 5 Bootstrap 5 ได้เตรียมคลาสไว้ให้เราใช้สำหรับตกแต่งเอลิเมนต์ต่าง ๆ ในหน้าเว็บเพจจำนวนหนึ่ง สำหรับตกแต่งสีข้อความและสีพื้นหลัง คลาสสำหรับตกแต่งสีข้อความ Text Colors สำหรับคลาสที่ Bootstrap 5…

ตกแต่งข้อความ Text/Typography ด้วย Bootstrap 5 เมื่อใช้ Bootstrap 5 ในการตกแต่งเว็บไซต์ โดยค่าเริ่มต้นขนาดตัวอักษรจะถูกกำหนดไว้ที่ 1rem (16px) และความสูงของบรรทัดจะอยู่ที่ 1.5rem ถ้าเราใช้แท็ก <p>…

ทำความเข้าใจระบบ Grid พื้นฐาน ใน Bootstrap 5 Bootstrap แสดงผลในแบบ Grid โดยใช้ flexbox ทำให้การแสดงผลเป็นแบบ Responsive คือปรับขนาดตามความละเอียดของหน้าจอ โดย Grid…

ทำความรู้จักกับ Container ใน Bootstrap 5 การใช้งานคลาสต่าง ๆ ของ Bootstrap เพื่อตกแต่งเว็บไซต์ ต้องทำภายใต้ตัวบรรลุ หรือที่เรียกว่า Container ซึ่งใน Bootstrap 5…

เริ่มต้นใช้งาน Bootstrap 5 Bootstrap เป็น front-end framework ที่ได้รับความนิยมเป็นอย่างมาก เพราะทำงานได้เร็ว ใช้งานง่าย ที่สำคัญ ใช้ได้ฟรีด้วย การใช้งาน Bootstrap ทำให้เราสามารถออกแบบ ฟอร์ม…