Placeholders

Shandisa kurodha zvibatiso zvezvikamu zvako kana mapeji kuratidza chimwe chinhu chingangove chiri kurodha.

Pa peji ino

About

Zvibatiso zvinogona kushandiswa kusimudzira ruzivo rwechishandiso chako. Iwo anovakwa chete neHTML neCSS, zvichireva kuti haudi chero JavaScript kuti uzvigadzire. Iwe, zvakadaro, uchada imwe tsika JavaScript yekushandura kuoneka kwavo. Chitarisiko chavo, ruvara, uye saizi zvinogona kugadziridzwa zviri nyore nemakirasi edu ekushandisa.

Muenzaniso

Mumuenzaniso uri pazasi, tinotora chikamu chekadhi chakajairwa tochigadzira zvakare nezvibatiso zvakaiswa kugadzira "kadhi rekurodha". Saizi uye zviyero zvakafanana pakati pezviviri.

Kadhi zita

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

Enda kune imwe nzvimbo

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

Zvinoshanda sei

Gadzira zvibatiso .placeholdernekirasi uye grid column kirasi (semuenzaniso, .col-6) kuseta iyo width. Ivo vanogona kutsiva iwo mameseji mukati mechimwe chinhu kana kuwedzerwa sechigadziriso kirasi kune chiripo chikamu.

Isu tinoshandisa mamwe masitaera kune .btns kuburikidza ::beforenekuona kuti heightinoremekedzwa. Unogona kuwedzera iyi pateni kune mamwe mamiriro sezvinodiwa, kana kuwedzera  mukati mechinhu kuratidza hurefu kana mavara chaiwo achipihwa panzvimbo yawo.

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>

Iko kushandiswa kweiyo aria-hidden="true"chete kunoratidza kuti chinhu chinofanirwa kuvanzwa kune vanoverenga skrini. Maitiro ekurodha emubati wenzvimbo anoenderana nekuti vanyori vachanyatso shandisa sei zvitaera zvechibatiso, marongero avanoronga kuvandudza zvinhu, nezvimwewo. Imwe JavaScript code inogona kudiwa kuti uchinje mamiriro enzvimbo uye kuzivisa vashandisi veAT nezvekuvandudzwa.

Upamhi

Iwe unogona kushandura iyo widthkuburikidza negridhi column makirasi, hupamhi zvinoshandiswa, kana inline masitaera.

html

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

Color

Nekusagadzikana, izvo placeholderzvinoshandiswa currentColor. Izvi zvinogona kudhindwa neyakajairwa ruvara kana utility kirasi.

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>

Kukura

Saizi ye .placeholders yakavakirwa pane typographic maitiro echinhu chemubereki. Gadzirisa iwo nemasaizi modhifita: .placeholder-lg, .placeholder-sm, kana .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>

Animation

Hwirudza zvibatiso zvenzvimbo ne .placeholder-glowkana .placeholder-wavekuratidza zvirinani mafungire echinhu chiri kutakurwa zvine simba .

html

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

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

Sass

Variables

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