Урын ияләре

Сезнең компонентлар яки битләр өчен йөкләү урыннарын кулланыгыз, нәрсәдер йөкләнгән булырга мөмкин.

Бу биттә

Турында

Урнаштыручылар сезнең заявка тәҗрибәсен арттыру өчен кулланылырга мөмкин. Алар 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. Алар элемент эчендәге текстны алыштырырга яки булган компонентка үзгәртүче класс итеп өстәргә мөмкин.

Без хөрмәт итүне тәэмин итү өчен өстәмә стилизация кулланабыз .btn. Сез кирәк булганда бүтән ситуацияләр өчен бу үрнәкне киңәйтә аласыз, яисә аның урынына фактик текст күрсәтелгәндә биеклекне чагылдыру өчен элемент эчендә өсти аласыз.::beforeheight 

html

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

Куллану aria-hidden="true"элементны экран укучылары өчен яшерергә кирәклеген күрсәтә. Урын хуҗасының йөкләү тәртибе авторларның урын хуҗаларының стильләрен ничек куллануларына, әйберләрне ничек яңартырга планлаштыруларына бәйле. Һәм кайбер JavaScript коды урын хуҗасының торышын алыштыру һәм AT кулланучыларына яңарту турында хәбәр итү өчен кирәк булырга мөмкин.

Киңлек

Сез widthчелтәр баганасы класслары, киңлек инженериясе яки эчке стильләр аша үзгәртә аласыз.

html

<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>

Төс

Килешү буенча placeholderкуллану currentColor. Бу гадәти төс яки файдалы класс белән кире кагылырга мөмкин.

html

<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.

html

<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яхшырак җиткерү өчен урын ияләре .

html

<p class="placeholder-glow">
  <span class="placeholder col-12"></span>
</p>

<p class="placeholder-wave">
  <span class="placeholder col-12"></span>
</p>

Сасс

Variзгәрешләр

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