ສີ & ພື້ນຫຼັງ

ກຳນົດສີພື້ນຫຼັງດ້ວຍສີພື້ນໜ້າທີ່ກົງກັນຂ້າມ.

ໃນໜ້ານີ້

ພາບລວມ

ເພີ່ມໃນ v5.2.0

ຜູ້ຊ່ວຍສີແລະພື້ນຫລັງປະສົມປະສານພະລັງງານຂອງອຸ .text-*ປະກອນ ແລະ .bg-*ເຄື່ອງໃຊ້ ຂອງພວກເຮົາ ໃນຊັ້ນດຽວ. ການນໍາໃຊ້ຟັງຊັນ Sass ຂອງພວກເຮົາ color-contrast(), ພວກເຮົາກໍານົດອັດຕະໂນມັດກົງກັນຂ້າມ colorສໍາລັບສະເພາະໃດຫນຶ່ງ background-color.

ລະວັງ! ໃນປັດຈຸບັນບໍ່ມີການສະຫນັບສະຫນູນສໍາລັບຟັງຊັນ CSS-native color-contrast, ດັ່ງນັ້ນພວກເຮົາໃຊ້ຂອງພວກເຮົາເອງຜ່ານ Sass. ນີ້ຫມາຍຄວາມວ່າການປັບແຕ່ງສີຫົວຂໍ້ຂອງພວກເຮົາຜ່ານຕົວແປ CSS ອາດຈະເຮັດໃຫ້ເກີດບັນຫາຄວາມຄົມຊັດຂອງສີກັບຜົນປະໂຫຍດເຫຼົ່ານີ້.

ປະຖົມທີ່ມີສີກົງກັນຂ້າມ

ຮອງດ້ວຍສີທີ່ກົງກັນຂ້າມ

ປະສົບຜົນສໍາເລັດກັບສີທີ່ກົງກັນຂ້າມ

ອັນຕະລາຍທີ່ມີສີທີ່ກົງກັນຂ້າມ

ຄຳເຕືອນດ້ວຍສີທີ່ກົງກັນຂ້າມ

ຂໍ້ມູນທີ່ມີສີທີ່ກົງກັນຂ້າມ

ແສງສະຫວ່າງທີ່ມີສີທີ່ກົງກັນຂ້າມ

ຊ້ໍາດ້ວຍສີທີ່ກົງກັນຂ້າມ

html

<div class="text-bg-primary p-3">Primary with contrasting color</div>
<div class="text-bg-secondary p-3">Secondary with contrasting color</div>
<div class="text-bg-success p-3">Success with contrasting color</div>
<div class="text-bg-danger p-3">Danger with contrasting color</div>
<div class="text-bg-warning p-3">Warning with contrasting color</div>
<div class="text-bg-info p-3">Info with contrasting color</div>
<div class="text-bg-light p-3">Light with contrasting color</div>
<div class="text-bg-dark p-3">Dark with contrasting color</div>

ມີອົງປະກອບ

ໃຊ້ພວກມັນແທນການລວມກັນ .text-*ແລະ .bg-*ຫ້ອງຮຽນ, ເຊັ່ນ: ປ້າຍ ຊື່ :

ປະຖົມ ຂໍ້ມູນ

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-info">Info</span>

ຫຼືໃນ ບັດ :

ສ່ວນຫົວ

ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.

ສ່ວນຫົວ

html

<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>