متغیرهای

  1. رابط کاربری پایه
  2. متغیرهای

پیش‌فرض جای‌بان

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

کارت ایمگ
عنوان کارت

چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.

برو یه جایی 
 <!-- Base Examples -->
<div class="card">
    <img src="assets/images/small/img-1.jpg" class="card-img-top" alt="card img">
    
    <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="assets/images/small/img-2.jpg" class="card-img-top" alt="card dummy img">
    <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>
      </p>
      <a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
    </div>
</div>

عرض

استفاده کنید w-25,w-50,w-75 یا w-100 کلاس به کلاس مکان نگهدار برای تنظیم عرض های مختلف به مکان نگهدار.

 <!-- Width Sizing-->
<div class="live-preview">
    <span class="placeholder col-6"></span>
    <span class="placeholder w-75"></span>
    <span class="placeholder" style="width: 25%;"></span>
</div>

سایز بندی

استفاده کنید placeholder-lg ، placeholder-sm ، یا placeholder-xs کلاس به کلاس متغیرهایی برای تنظیم متغیرهایی با اندازه های مختلف.

 <!-- Sizing -->
<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>

رنگ

استفاده کنید bg- کلاس با تنوع رنگ زیر برای تنظیم یک رنگ سفارشی.

 <!-- Color -->
<span class="placeholder col-12 mb-3"></span> 

 <span class="placeholder col-12 mb-3 bg-primary"></span> 

 <span class="placeholder col-12 mb-3 bg-secondary"></span> 

 <span class="placeholder col-12 mb-3 bg-success"></span> 

 <span class="placeholder col-12 mb-3 bg-danger"></span> 

 <span class="placeholder col-12 mb-3 bg-warning"></span> 

 <span class="placeholder col-12 mb-3 bg-info"></span> 

 <span class="placeholder col-12 mb-3 bg-light"></span> 

 <span class="placeholder col-12 mb-3 bg-dark"></span>
© Velzon.
طراحی و توسعه توسط مرداد