Trình giữ chỗ

Về

Phần giữ chỗ có thể được sử dụng để nâng cao trải nghiệm ứng dụng của bạn. Chúng chỉ được tạo bằng HTML và CSS, có nghĩa là bạn không cần bất kỳ JavaScript nào để tạo chúng. Tuy nhiên, bạn sẽ cần một số JavaScript tùy chỉnh để chuyển đổi khả năng hiển thị của chúng. Hình thức, màu sắc và kích thước của chúng có thể dễ dàng tùy chỉnh với các lớp tiện ích của chúng tôi.

Thí dụ

Trong ví dụ dưới đây, chúng tôi lấy một thành phần thẻ điển hình và tạo lại nó với các phần giữ chỗ được áp dụng để tạo “thẻ nạp”. Kích thước và tỷ lệ giống nhau giữa hai loại.

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

Làm thế nào nó hoạt động

Tạo trình giữ chỗ với .placeholderlớp và lớp cột lưới (ví dụ .col-6:) để đặt width. Chúng có thể thay thế văn bản bên trong một phần tử hoặc được thêm vào như một lớp bổ trợ cho một thành phần hiện có.

Chúng tôi áp dụng kiểu dáng bổ sung cho .btns via ::befoređể đảm bảo trang heightđược tôn trọng. Bạn có thể mở rộng mẫu này cho các trường hợp khác nếu cần, hoặc thêm một  trong phần tử để phản ánh chiều cao khi văn bản thực tế được hiển thị ở vị trí của nó.

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

Bề rộng

Bạn có thể thay đổi các widthlớp cột thông qua lưới, tiện ích chiều rộng hoặc kiểu nội tuyến.

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

Màu sắc

Theo mặc định, việc placeholdersử dụng currentColor. Điều này có thể được ghi đè bằng màu tùy chỉnh hoặc lớp tiện ích.

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

Định cỡ

Kích thước của .placeholders dựa trên kiểu chữ của phần tử mẹ. Tùy chỉnh chúng bằng các công cụ sửa đổi kích thước .placeholder-lg:, .placeholder-smhoặc .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>

Hoạt hình

Tạo hiệu ứng cho các trình giữ chỗ bằng .placeholder-glowhoặc .placeholder-waveđể truyền đạt tốt hơn nhận thức về một thứ gì đó đang được tải tích cực .

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

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

Sass

Biến

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