Placeer eýeleri
Komponentleriňiz ýa-da sahypalaryňyz üçin bir zadyň ýüklenýänligini görkezmek üçin ýükleýjileri ulanyň.
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ňsatlyk bilen düzülip bilner.
Mysal
Aşakdaky mysalda, adaty kartoçkany alýarys we “ýükleme kartasy” döretmek üç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
.placeholder
Toplumy 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.
.btn
Hormat goýulmagyny ::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.
<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"
elementiň ekran okyjylaryna gizlenmelidigini görkezýär. Placeer eýesiniň
ýükleniş häsiýeti, awtorlaryň ýer eýesiniň stillerini nädip ulanjakdygyna, zatlary nädip täzelemegi meýilleşdirýändiklerine we ş.m. baglydyr. Placeer eýesiniň ýagdaýyny üýtgetmek we AT ulanyjylaryna täzelenme barada habar bermek üçin käbir JavaScript kody gerek bolup
biler .
Ini
width
Grid sütün synplaryny, ini kömekçi enjamlary ýa-da içerki stilleri üýtgedip bilersiňiz .
<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ä, placeholder
ulanylýar currentColor
. Customörite reňk ýa-da peýdaly synp bilen muny ýok edip bolýar.
<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 .placeholder
elementiň tipografiki stiline esaslanýar. Olary ululykdaky üýtgedijiler bilen sazlaň: .placeholder-lg
,, .placeholder-sm
ýa-da .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>
Animasiýa
Işjeň ýüklenýän zadyň duýgusyny has gowy ýetirmek üçin .placeholder-glow
ýer eýelerini janlandyryň ..placeholder-wave
<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;