ตัวยึด

เกี่ยวกับ

สามารถใช้ตัวยึดตำแหน่งเพื่อปรับปรุงประสบการณ์การใช้งานของคุณ สร้างขึ้นด้วย 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 via ::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คลาสคอลัมน์ผ่านกริด ยูทิลิตี้ความกว้าง หรือสไตล์อินไลน์ได้

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

สี

โดยค่าเริ่มต้น การplaceholderใช้งานcurrentColor. สามารถแทนที่ด้วยสีที่กำหนดเองหรือคลาสยูทิลิตี้

<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;