ตกแต่งข้อความแจ้งเตือน Alerts สวย ๆ ด้วย Bootstrap 5

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

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

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

ตกแต่งการแสดงผลรูปภาพด้วย Bootstrap 5

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

ตกแต่งตารางด้วย Bootstrap 5

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

ตกแต่งสีข้อความและพื้นหลัง ด้วย Bootstrap 5

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

ตกแต่งข้อความ Text/Typography ด้วย Bootstrap 5

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

ทำความเข้าใจระบบ Grid พื้นฐาน ใน Bootstrap 5

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

ทำความรู้จักกับ Container ใน Bootstrap 5

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

เริ่มต้นใช้งาน Bootstrap 5

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

การสร้างตารางด้วย Bootstrap 4

การสร้างตารางด้วย Bootstrap 4 Bootstrap 4 มีคลาสให้เราเลือกใช้สำหรับการสร้างตารางสวย ๆ หลายรูปแบบด้วยกัน Basic Table ตารางขั้นพื้นฐาน ถ้าต้องการสร้างตารางแบบเบสิค สามารถใช้คลาส .table ในการสร้างตารางได้เลย บรรทัดที่…

ใช้งานสีใน Bootstrap 4

ใช้งานสีใน Bootstrap 4 ใน Bootstrap 4 เราสามารถใช้งานสีได้ผ่านคลาสที่ Bootstrap ได้เตรียมไว้ให้ สีตัวอักษร ถ้าต้องการกำหนดสีให้กับตัวอักษร สามารถใช้งานคลาสที่ Bootstrap ได้เตรียมไว้ให้ใช้งานดังนี้ .text-muted, .text-primary,…

Bootstrap 4 จัดรูปแบบข้อความและตัวอักษร

Bootstrap 4 จัดรูปแบบข้อความและตัวอักษร โดยปกติ Bootstrap 4 จะกำหนัดขนาดฟอนต์ไว้ที่ 16px ความสูงของเส้นเท่ากับ 1.5 และใช้ฟอนต์ “Helvetica Neue”, Helvetica, Arial, sans-serif…

Bootstrap 4 Grids ระบบกริดในบูทสแตร็ป 4

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

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

Bootstrap 4 การใช้งาน Containers ใน Bootstrap 4 เราต้องกำหนดเอลิเมนต์สำหรับเป็น Container ขึ้นมา 1 เอลิเมนต์ เพื่อบรรจุเอลิเมนต์ตัวอื่น ๆ ไว้ด้านใน และใน…

เริ่มต้นใช้งาน Bootstrap 4

เริ่มต้นใช้งาน Bootstrap 4 Bootstrap คือ Fron-End Framework ที่เราสามารถใช้งานได้ฟรี เพื่ออำนวยความสะดวกให้การพัฒนาเว็บไซต์ทำได้อย่างงายและรวดเร็วยิ่งขึ้น มีเทมเพลทสำหรับสร้างฟอร์ม (forms), ปุ่มกด (buttons), ตาราง (tables) เป็นต้น…