نگهدارنده مکان
از نگهدارنده مکان بارگذاری برای کامپوننت ها یا صفحه های خود استفاده کنید تا نشان دهید ممکن است چیزی همچنان در حال بارگذاری باشد.
مثال ها
در مثال زیر، یک کامپوننت کارت معمولی را می گیریم و آن را با نگهدارنده مکان که برای ایجاد یک "کارت بارگذاری" اعمال می شوند، دوباره ایجاد می کنیم. اندازه و نسبت بین این دو یکسان است.
عنوان کارت
چند مثال متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.
رفتن به جاییمثال کد
<div class="card card-bordered">
<img src="./images/slides/slide-a.jpg" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">عنوان کارت</h5>
<p class="card-text">چند مثال متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.</p>
<a href="#" class="btn btn-primary">رفتن به جایی</a>
</div>
</div>
<div class="card card-bordered placeholder-glow" aria-hidden="true">
<img src="./images/slides/slide-a.jpg" class="card-img-top placeholder" 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 class="btn btn-primary disabled placeholder col-6" aria-disabled="true"></a>
</div>
</div>
نحوه کار کردن
نگهدارنده مکان را با کلاس .placeholder و یک کلاس ستون شبکه (به عنوان مثال، .col-6) ایجاد کنید تا width را تنظیم کنید. آن ها می توانند متن را در یک عنصر جایگزین کنند یا به عنوان یک کلاس اصلاح کننده به یک کامپوننت موجود اضافه شوند.
برای اطمینان از رعایت height، سبک اضافی را از طریق ::before به .btns اعمال می کنیم. می توانید در صورت نیاز این الگو را برای موقعیت های دیگر گسترش دهید، یا یک در عنصر اضافه کنید تا زمانی که متن واقعی در جای خود ارائه می شود، ارتفاع را منعکس کند.
مثال کد
<p aria-hidden="true">
<span class="placeholder col-6"></span>
</p>
<a class="btn btn-primary disabled placeholder col-4" aria-disabled="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>
