Տեղապահներ

Մասին

Տեղապահները կարող են օգտագործվել ձեր հավելվածի փորձը բարելավելու համար: Դրանք կառուցված են միայն 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: Նրանք կարող են փոխարինել տեքստը տարրի ներսում կամ որպես փոփոխող դաս ավելացնել գոյություն ունեցող բաղադրիչին:

Մենք կիրառում ենք լրացուցիչ ոճավորում .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>

Չափսերը

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;