Орлуулагч
Ямар нэг зүйл ачаалагдаж байж болзошгүйг харуулахын тулд өөрийн бүрэлдэхүүн хэсгүүд эсвэл хуудаснууддаа ачаалах орлуулагчийг ашиглана уу.
тухай
Орлуулагчийг таны хэрэглээний туршлагыг сайжруулахад ашиглаж болно. Тэдгээр нь зөвхөн 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
. Тэдгээрийг элемент доторх текстийг орлуулах эсвэл одоо байгаа бүрэлдэхүүн хэсэгт өөрчлөх анги болгон нэмж болно.
Бид үүнийг хүндэтгэхийн тулд .btn
s 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>
aria-hidden="true"
тухайн элементийг дэлгэц уншигчдад нуух ёстойг илтгэнэ. Орлуулагчийг
ачаалах ажиллагаа нь зохиогчид орлуулагчийн хэв маягийг хэрхэн ашиглах, ямар нэгэн зүйлийг хэрхэн шинэчлэхээр төлөвлөж байгаа зэргээс шалтгаална. Орлуулагчийн
төлөвийг солих , AT хэрэглэгчдэд шинэчлэлтийн талаар мэдэгдэхийн тулд зарим JavaScript код шаардлагатай байж магадгүй.
Өргөн
Та 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>
Хэмжээ тогтоох
s- ийн хэмжээ нь .placeholder
эх элементийн хэвлэх хэв маягт суурилдаг. Хэмжээ тохируулагчаар тэдгээрийг тохируулна уу: .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;