Placeer eýeleri

Komponentleriňiz ýa-da sahypalaryňyz üçin bir zadyň ýüklenýänligini görkezmek üçin ýükleýjileri ulanyň.

Bu sahypada

Takmynan

Placer eýeleri, anketaňyzyň tejribesini ýokarlandyrmak üçin ulanylyp bilner. Diňe HTML we CSS bilen gurlan, olary döretmek üçin JavaScript gerek däl. Şeýle-de bolsa, görnükliligini üýtgetmek üçin size ýörite JavaScript gerek bolar. Olaryň daşky görnüşi, reňki we ululygy peýdaly synplarymyz bilen aňsatlaşdyrylyp bilner.

Mysal

Aşakdaky mysalda, adaty kartoçkany alýarys we “kartoçka ýüklemek” üçin ulanylýan ýer eýeleri bilen döredýäris. Ölçegi we ululygy ikisiniň arasynda deňdir.

Kartyň ady

Kartyň adyna esaslanmak we kartyň mazmunynyň esasy bölegini düzmek üçin käbir çalt mysal teksti.

Bir ýere git

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

Bu nähili işleýär

.placeholderToplumy düzmek üçin synp we gözenek sütün synpy (meselem .col-6) bilen ýer eýelerini dörediň width. Bir elementiň içindäki teksti çalşyp bilerler ýa-da bar bolan komponente üýtgediji synp hökmünde goşup bilerler.

.btnHormatlanylmagyny ::beforeüpjün etmek üçin goşmaça stil ulanýarys height. Zerur bolanda beýleki ýagdaýlar üçin bu nagşy uzaldyp bilersiňiz ýa-da  hakyky tekst ýerine ýerine ýetirilende beýikligi görkezmek üçin element goşup bilersiňiz.

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>

Diňe ulanmak aria-hidden="true"elementiň ekran okyjylaryna gizlenmelidigini görkezýär. Placeer eýesiniň ýükleniş häsiýeti, awtorlaryň ýer eýesiniň stillerini hakykatdanam nähili ulanjakdygyna, zatlary nädip täzelemegi meýilleşdirýändiklerine we ş.m. baglydyr, ýer eýesiniň ýagdaýyny üýtgetmek we AT ulanyjylaryna täzelenme barada habar bermek üçin käbir JavaScript kody zerur bolup biler.

Ini

widthGrid sütün synplaryny, ini kömekçi enjamlary ýa-da içerki görnüşleri üýtgedip bilersiňiz .

html

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

Reňk

Düzgüne görä placeholderulanylýar currentColor. Customörite reňk ýa-da peýdaly synp bilen muny ýok edip bolýar.

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>

Ölçeg

S ululygy esasy .placeholderelementiň tipografiki stiline esaslanýar. Olary ululykdaky üýtgedijiler bilen sazlaň: .placeholder-lg,, .placeholder-smýa-da .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>

Animasiýa

Işjeň ýüklenýän zadyň duýgusyny has gowy ýetirmek üçin .placeholder-glowýer eýelerini janlandyryň ..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>

Sass

Üýtgeýjiler

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