
ตกแต่งสีข้อความและพื้นหลัง ด้วย Bootstrap 5
Bootstrap 5 ได้เตรียมคลาสไว้ให้เราใช้สำหรับตกแต่งเอลิเมนต์ต่าง ๆ ในหน้าเว็บเพจจำนวนหนึ่ง สำหรับตกแต่งสีข้อความและสีพื้นหลัง
คลาสสำหรับตกแต่งสีข้อความ Text Colors
สำหรับคลาสที่ Bootstrap 5 เตรียมไว้สำหรับการตกแต่งสีข้อความ ประกอบด้วยคลาส .text-muted
, .text-primary
, .text-success
, .text-info
, .text-warning
, .text-danger
, .text-secondary
, .text-white
, .text-dark
, .text-body
และ .text-light
ตัวอย่างการใช้งานคลาสสำหรับตกแต่งสีข้อความ
<div class="container mt-3"> <h2>การตกแต่งสีข้อความด้วยคลาสของ Bootstrap 5</h2> <p>คลาสแต่ละคลาสจะแสดงผลสีดังนี้</p> <p class="text-muted">ข้อความนี้ตกแต่งด้วยคลาส text-muted</p> <p class="text-primary">ข้อความนี้ตกแต่งด้วยคลาส text-primary</p> <p class="text-success">ข้อความนี้ตกแต่งด้วยคลาส text-success</p> <p class="text-info">ข้อความนี้ตกแต่งด้วยคลาส text-info</p> <p class="text-warning">ข้อความนี้ตกแต่งด้วยคลาส text-warning</p> <p class="text-danger">ข้อความนี้ตกแต่งด้วยคลาส text-danger</p> <p class="text-secondary">ข้อความนี้ตกแต่งด้วยคลาส text-secondary</p> <p class="text-dark">ข้อความนี้ตกแต่งด้วยคลาส text-dark</p> <p class="text-body">ข้อความนี้ตกแต่งด้วยคลาส text-body</p> <p class="text-light">ข้อความนี้ตกแต่งด้วยคลาส text-light</p> <p class="text-white">ข้อความนี้ตกแต่งด้วยคลาส text-white</p> </div>
ผลลัพธ์

เราสามารถกำหนดความโปร่ง (opacity) 50% สำหรับคลาส .text-black
และ .text-white
ได้ด้วย
<div class="container mt-3"> <h2>การตกแต่งสีข้อความด้วยคลาสของ Bootstrap 5</h2> <p class="text-black-50">ข้อความนี้ตกแต่งด้วยคลาส text-black-50</p> <p class="text-white-50 bg-dark">ข้อความนี้ตกแต่งด้วยคลาส text-white-50</p> </div>

คลาสสำหรับตกแต่งสีพื้นหลัง Background Colors
สำหรับคลาสสำหรับตกแต่งสีพื้นหลังของ Bootstrap 5 ประกอบด้วยคลาสเหล่านี้ .bg-primary
, .bg-success
, .bg-info
, .bg-warning
, .bg-danger
, .bg-secondary
, .bg-dark
และ .bg-light
ตัวอย่างการใช้งาน
<div class="container mt-3"> <h2>คลาสสำหรับตกแต่งสีพื้นหลังของเอลิเมนต์</h2> <p>ใช้งานคลาสที่ Bootstrap 5 เตรียมไว้ให้เพื่อตกแต่งสีพื้นหลัง</p> <p class="bg-primary text-white">เอลิเมนต์นี้กำหนดสีพื้นหลังด้วยคลาส bg-primary</p> <p class="bg-success text-white">เอลิเมนต์นี้กำหนดสีพื้นหลังด้วยคลาส bg-success</p> <p class="bg-info text-white">เอลิเมนต์นี้กำหนดสีพื้นหลังด้วยคลาส bg-info</p> <p class="bg-warning text-white">เอลิเมนต์นี้กำหนดสีพื้นหลังด้วยคลาส bg-warning</p> <p class="bg-danger text-white">เอลิเมนต์นี้กำหนดสีพื้นหลังด้วยคลาส bg-danger</p> <p class="bg-secondary text-white">เอลิเมนต์นี้กำหนดสีพื้นหลังด้วยคลาส bg-secondary</p> <p class="bg-dark text-white">เอลิเมนต์นี้กำหนดสีพื้นหลังด้วยคลาส bg-dark</p> <p class="bg-light text-dark">เอลิเมนต์นี้กำหนดสีพื้นหลังด้วยคลาส bg-light</p> </div>

เมื่อใช้คลาสสำหรับกำหนดสีพื้นหลัง อาจจะต้องใช้คลาสสำหรับกำหนดสีข้อความด้วยนะครับ เพื่อให้สีข้อความกับพื้นหลังตัดกันชัดเจน
- Bootstrap 5 Get Started
- Bootstrap 5 Container
- Bootstrap 5 Grid Basic
- Bootstrap 5 Typography
- Bootstrap 5 Colors
- Bootstrap 5 Tables
- Bootstrap 5 Images
- Bootstrap 5 Jambotron
- Bootstrap 5 Alerts
- Bootstrap 5 สร้างปุ่มกดสวย ๆ
- Bootstrap 5 การจัดกลุ่มให้ปุ่มกด
- Bootstrap 5 การสร้าง Badge
- Bootstrap 5 การสร้าง Progress Bar
- Bootstrap 5 การสร้าง Spinner
- Bootstrap 5 กับการแบ่งหน้า
- Bootstrap 5 การสร้าง List Groups
- Bootstrap 5 การใช้งาน Card
- Bootstrap 5 การสร้าง Dropdown Menu
- Bootstrap 5 Collapse
- Bootstrap 5 Navs
- Bootstrap 5 Navbars
- Bootstrap 5 Carousel
- Bootstrap 5 Modal
- Bootstrap 5 Tooltip
- Bootstrap 5 Popover
- Bootstrap 5 Toasts
- Bootstrap 5 Scrollspy
- Bootstrap 5 Offcanvas
- Bootstrap 5 Utilities
- Bootstrap 5 Flex
- Bootstrap 5 Forms
- Bootstrap 5 Select
- Bootstrap 5 Checkboxes and Radio buttons
- Bootstrap 5 Range
- Bootstrap 5 Input Groups
- Bootstrap 5 Form Floating Labels
- Bootstrap 5 Form Validation
- Bootstrap 5 Grid System
- Bootstrap 5 Grid Stacked to horizontal
- Bootstrap 5 Grid Extra Small
- Bootstrap 5 Grid Small
- Bootstrap 5 Grid Medium
- Bootstrap 5 Grid Large
- Bootstrap 5 Grid Extra Large
- Bootstrap 5 Grid XXL
- Bootstrap 5 Grid Examples