انگلیسی
فرانسوی
اسپانیایی
آلمانی
ایتالیایی
کارتهای جایبان
در مثال زیر، یک جزء کارت معمولی را میگیریم و آن را با متغیرهایی که برای ایجاد یک «کارت بارگیری» اعمال میشوند، دوباره ایجاد میکنیم. اندازه و نسبت بین این دو یکسان است.
<div class="row gy-3">
<div class="col-md-6 col-xl-4">
<div class="card mb-0 h-100" aria-hidden="true">
<img class="card-img-top h-200px img-fluid object-fit-cover" loading="lazy" src="assets/images/small/img-2.jpg" alt="#">
<div class="card-body" id="cardContent">
<h6 class="card-title">عنوان کارت</h6>
<p class="card-text c-o-light">Some quick example text to build on the عنوان کارت and make up the bulk of the card's content.</p>
<a class="btn btn-primary" href="#!">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="card text-secondary mb-0 h-100" aria-hidden="true"><img class="card-img-top h-200px img-fluid object-fit-cover" src="assets/images/placeholder-3.jpg" alt="#">
<div class="card-body">
<h6 class="card-title text-secondary"><span class="placeholder col-6 placeholder-light"></span></h6>
<div class="card-text mb-3">
<div class="placeholder col-7 placeholder-light"></div>
<div class="placeholder col-4 placeholder-light"></div>
<div class="placeholder col-4 placeholder-light"></div>
<div class="placeholder col-6 placeholder-light"></div>
<div class="placeholder col-8 placeholder-light"></div>
</div><a class="btn btn-primary disabled placeholder col-6" href="#!"></a>
</div>
</div>
</div>
</div><!--End row-->عرض جای خالی
میتوانید عرض را از طریق کلاسهای ستون شبکه، ابزارهای عرض یا سبکهای درون خطی تغییر دهید. (like: w-25 , w-50 , w-75 , w-100 )
<div>
<span class="placeholder w-50 placeholder-light"></span>
<span class="placeholder w-75 placeholder-light"></span>
<span class="placeholder w-100 placeholder-light"></span>
<span class="placeholder w-25 placeholder-light"></span>
</div>اندازه جای خالی
اندازه از نگهدارنده مکان بر اساس سبک تایپوگرافی عنصر والد هستند. آنها را با اصلاح کننده های اندازه سفارشی کنید: placeholder-lg، placeholder-sm یا placeholder-xs.
<div>
<span class="placeholder col-12 placeholder-lg placeholder-light"></span>
<span class="placeholder col-12 placeholder-light"></span>
<span class="placeholder col-12 placeholder-sm placeholder-light"></span>
<span class="placeholder col-12 placeholder-xs placeholder-light"></span>
</div>انیمیشنهای مکاندار
با استفاده از .placeholder-glow یا .placeholder-wave کلاس هایی برای جلوه بارگذاری روان در حین بارگذاری محتوا.
<div>
<p class="placeholder-glow mb-0"><span class="placeholder col-12 placeholder-light"></span></p>
<p class="placeholder-wave mb-0"><span class="placeholder col-12 placeholder-light"></span></p>
</div>جای خالی رنگ ها
به طور پیش فرض، نگهدارنده مکان استفاده می کند رنگ فعلی. این را می توان با یک رنگ سفارشی یا کلاس کاربردی لغو کرد.
<div class="placeholder-glow">
<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>
</div>متغیرهای سفارشی انیمیشن
با موج - خطوط چپ انیمیشن سفارشی، ممکن است از متغیرهایی در طراحی منحصر به فرد شما استفاده شود.
<div class="d-flex flex-column gap-5">
<div class="placeholder-body">
<div class="placeholder-start square"></div>
<div class="placeholder-end">
<div class="placeholder-line placeholder w-25"></div>
<div class="placeholder-line placeholder placeholder-xs w-100"></div>
<div class="placeholder-line placeholder placeholder-xs w-100"></div>
<div class="placeholder-line placeholder placeholder-xs w-50"></div>
</div>
</div>
<div class="placeholder-body">
<div class="placeholder-start circle"></div>
<div class="placeholder-end">
<div class="placeholder-line placeholder-lg w-25"></div>
<div class="placeholder-line placeholder placeholder-xs w-100"></div>
<div class="placeholder-line placeholder placeholder-xs w-100"></div>
<div class="placeholder-line placeholder placeholder-xs w-25"></div>
</div>
</div>
</div>جای خالی
با استفاده از دکمه ها یا پیوندها، متغیرهایی تعاملی در Bootstrap ایجاد کنید. هنگامی که روی آن کلیک می شود، محتوای مکان نگهدار با محتوای واقعی جایگزین می شود و یک اثر بارگذاری را شبیه سازی می کند.