ຕົວຍຶດບ່ອນ

ກ່ຽວກັບ

ສະຖານທີ່ສາມາດຖືກນໍາໃຊ້ເພື່ອເພີ່ມປະສົບການຂອງຄໍາຮ້ອງສະຫມັກຂອງທ່ານ. ພວກມັນຖືກສ້າງຂຶ້ນດ້ວຍ HTML ແລະ CSS, ຊຶ່ງຫມາຍຄວາມວ່າທ່ານບໍ່ຕ້ອງການ JavaScript ເພື່ອສ້າງພວກມັນ. ຢ່າງໃດກໍຕາມ, ທ່ານຈະຕ້ອງການບາງ JavaScript ແບບກໍານົດເອງເພື່ອສະຫຼັບການເບິ່ງເຫັນຂອງພວກເຂົາ. ຮູບລັກສະນະ, ສີ, ແລະຂະຫນາດຂອງພວກມັນສາມາດປັບແຕ່ງໄດ້ງ່າຍດ້ວຍຫ້ອງຮຽນປະໂຫຍດຂອງພວກເຮົາ.

ຕົວຢ່າງ

ໃນຕົວຢ່າງຂ້າງລຸ່ມນີ້, ພວກເຮົາເອົາອົງປະກອບບັດແບບປົກກະຕິແລະສ້າງໃຫມ່ດ້ວຍຕົວຍຶດທີ່ໃຊ້ເພື່ອສ້າງ "ບັດໂຫຼດ". ຂະຫນາດແລະອັດຕາສ່ວນແມ່ນຄືກັນລະຫວ່າງສອງ.

<div class="card">
  <img src="..." class="card-img-top" alt="...">

  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <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>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card" aria-hidden="true">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title placeholder-glow">
      <span class="placeholder col-6"></span>
    </h5>
    <p class="card-text placeholder-glow">
      <span class="placeholder col-7"></span>
      <span class="placeholder col-4"></span>
      <span class="placeholder col-4"></span>
      <span class="placeholder col-6"></span>
      <span class="placeholder col-8"></span>
    </p>
    <a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
  </div>
</div>

ມັນເຮັດວຽກແນວໃດ

ສ້າງຕົວຍຶດກັບ .placeholderຊັ້ນແລະຊັ້ນຖັນຕາຕະລາງ (ເຊັ່ນ, .col-6) ເພື່ອກໍານົດ width. ພວກເຂົາສາມາດປ່ຽນແທນຂໍ້ຄວາມພາຍໃນອົງປະກອບຫຼືຖືກເພີ່ມເປັນປະເພດຕົວແກ້ໄຂໃຫ້ກັບອົງປະກອບທີ່ມີຢູ່ແລ້ວ.

ພວກເຮົານໍາໃຊ້ຄໍເຕົ້າໄຂ່ທີ່ເພີ່ມເຕີມຕໍ່ກັບ .btns ຜ່ານ ::beforeເພື່ອຮັບປະກັນການ heightເຄົາລົບ. ທ່ານສາມາດຂະຫຍາຍຮູບແບບນີ້ສໍາລັບສະຖານະການອື່ນໆຕາມຄວາມຕ້ອງການ, ຫຼືເພີ່ມ  ພາຍໃນອົງປະກອບເພື່ອສະທ້ອນຄວາມສູງໃນເວລາທີ່ຂໍ້ຄວາມຕົວຈິງຖືກສະແດງຢູ່ໃນສະຖານທີ່ຂອງມັນ.

<p aria-hidden="true">
  <span class="placeholder col-6"></span>
</p>

<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-4" aria-hidden="true"></a>

ກວ້າງ

ທ່ານ​ສາ​ມາດ​ມີ​ການ​ປ່ຽນ​ແປງ width​ໂດຍ​ຜ່ານ​ຊັ້ນ​ຖັນ​ຕາ​ຂ່າຍ​ໄຟ​ຟ້າ​, ຜົນ​ປະ​ໂຫຍດ​ຄວາມ​ກວ້າງ​, ຫຼື​ຮູບ​ແບບ inline​.

<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>

ສີ

ໂດຍຄ່າເລີ່ມຕົ້ນ, ການ placeholderນໍາໃຊ້ currentColor. ນີ້ສາມາດ overridden ດ້ວຍສີ custom ຫຼື utility class.

<span class="placeholder col-12"></span>

<span class="placeholder col-12 bg-primary"></span>
<span class="placeholder col-12 bg-secondary"></span>
<span class="placeholder col-12 bg-success"></span>
<span class="placeholder col-12 bg-danger"></span>
<span class="placeholder col-12 bg-warning"></span>
<span class="placeholder col-12 bg-info"></span>
<span class="placeholder col-12 bg-light"></span>
<span class="placeholder col-12 bg-dark"></span>

ຂະໜາດ

ຂະໜາດຂອງ .placeholders ແມ່ນອີງໃສ່ຮູບແບບຕົວພິມຂອງອົງປະກອບຫຼັກ. ປັບແຕ່ງພວກມັນດ້ວຍຕົວປັບຂະໜາດ: .placeholder-lg, .placeholder-sm, ຫຼື .placeholder-xs.

<span class="placeholder col-12 placeholder-lg"></span>
<span class="placeholder col-12"></span>
<span class="placeholder col-12 placeholder-sm"></span>
<span class="placeholder col-12 placeholder-xs"></span>

ພາບເຄື່ອນໄຫວ

ຕົວຍຶດອະນິເມຊັນດ້ວຍ .placeholder-glowຫຼື .placeholder-waveເພື່ອຖ່າຍທອດຄວາມຮັບຮູ້ຂອງບາງສິ່ງບາງຢ່າງທີ່ກຳລັງ ໂຫລດ ຢ່າງຈິງຈັງ .

<p class="placeholder-glow">
  <span class="placeholder col-12"></span>
</p>

<p class="placeholder-wave">
  <span class="placeholder col-12"></span>
</p>

ຊາສ

ຕົວແປ

$placeholder-opacity-max:           .5;
$placeholder-opacity-min:           .2;