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

ใน Bootstrap 4 เราสามารถใช้งานสีได้ผ่านคลาสที่ Bootstrap ได้เตรียมไว้ให้

สีตัวอักษร

ถ้าต้องการกำหนดสีให้กับตัวอักษร สามารถใช้งานคลาสที่ Bootstrap ได้เตรียมไว้ให้ใช้งานดังนี้ .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">
    <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>

สีพื้นหลัง

คลาสที่ใช้กำหนดสีพื้นหลังใน Bootstrap 4 มีดังนี้ .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark และ .bg-light

  <div class="container">
    <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>
Tags

เรื่องที่น่าสนใจ