ຂ້າມໄປຫາເນື້ອຫາຕົ້ນຕໍ ຂ້າມໄປຫາການນຳທາງເອກະສານ
in English

ຕົວຍຶດບ່ອນ

ໃຊ້ຕົວຍຶດບ່ອນໂຫຼດສໍາລັບອົງປະກອບຫຼືຫນ້າຂອງທ່ານເພື່ອຊີ້ບອກວ່າບາງສິ່ງບາງຢ່າງອາດຈະຍັງໂຫລດຢູ່.

ໃນໜ້ານີ້

ກ່ຽວກັບ

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

ຕົວຢ່າງ

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

Placeholder
ຊື່ບັດ

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

ໄປບ່ອນໃດບ່ອນນຶ່ງ 
<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ເຄົາລົບ. ທ່ານສາມາດຂະຫຍາຍຮູບແບບນີ້ສໍາລັບສະຖານະການອື່ນໆຕາມຄວາມຕ້ອງການ, ຫຼືເພີ່ມ &nbsp;ພາຍໃນອົງປະກອບເພື່ອສະທ້ອນຄວາມສູງໃນເວລາທີ່ຂໍ້ຄວາມຕົວຈິງຖືກສະແດງຢູ່ໃນສະຖານທີ່ຂອງມັນ.

<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>
The use of aria-hidden="true" only indicates that the element should be hidden to screen readers. The loading behavior of the placeholder depends on how authors will actually use the placeholder styles, how they plan to update things, etc. Some JavaScript code may be needed to swap the state of the placeholder and inform AT users of the update.

Width

You can change the width through grid column classes, width utilities, or inline styles.

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

Color

By default, the placeholder uses currentColor. This can be overridden with a custom color or 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>

Sizing

The size of .placeholders are based on the typographic style of the parent element. Customize them with sizing modifiers: .placeholder-lg, .placeholder-sm, or .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>

Animation

ຕົວຍຶດອະນິເມຊັນດ້ວຍ .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;