Chuyển đến nội dung chính Chuyển đến điều hướng tài liệu
in English

Trình giữ chỗ

Sử dụng trình giữ chỗ đang tải cho các thành phần hoặc trang của bạn để cho biết một thứ gì đó có thể vẫn đang tải.

Trên trang này

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.

Placeholder
Tiêu đề thẻ

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

Đi đâu đó 
<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 &nbsp;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>
Việc sử dụng aria-hidden="true"chỉ cho biết rằng phần tử nên được ẩn đối với trình đọc màn hình. Hành vi tải của trình giữ chỗ phụ thuộc vào cách tác giả thực sự sẽ sử dụng các kiểu trình giữ chỗ, cách họ định cập nhật mọi thứ, v.v. Có thể cần một số mã JavaScript để hoán đổi trạng thái của trình giữ chỗ và thông báo cho người dùng AT về bản cập nhật.

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;