متغیرهای

در باره

از Placeholders می توان برای افزایش تجربه برنامه شما استفاده کرد. آنها فقط با HTML و CSS ساخته شده اند، به این معنی که برای ایجاد آنها نیازی به جاوا اسکریپت ندارید. با این حال، برای تغییر قابلیت مشاهده آنها به جاوا اسکریپت سفارشی نیاز دارید. ظاهر، رنگ و اندازه آنها را می توان به راحتی با کلاس های کاربردی ما سفارشی کرد.

مثال

در مثال زیر، یک جزء کارت معمولی را می‌گیریم و آن را با متغیرهایی که برای ایجاد یک «کارت بارگیری» اعمال می‌شوند، دوباره ایجاد می‌کنیم. اندازه و نسبت بین این دو یکسان است.

<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. آنها می توانند متن را در یک عنصر جایگزین کنند یا به عنوان یک کلاس اصلاح کننده به یک جزء موجود اضافه شوند.

ما یک ظاهر طراحی اضافی را به .btns از طریق اعمال می کنیم ::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>

عرض

می‌توانید 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>

ساس

متغیرها

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