Awọn oniduro

Lo awọn aaye gbigba ikojọpọ fun awọn paati tabi awọn oju-iwe lati tọka si nkan ti o tun le jẹ ikojọpọ.

Lori iwe yi

Nipa

Awọn oniduro le ṣee lo lati mu iriri ohun elo rẹ pọ si. Wọn ṣe pẹlu HTML ati CSS nikan, afipamo pe o ko nilo JavaScript eyikeyi lati ṣẹda wọn. Iwọ yoo, sibẹsibẹ, nilo diẹ ninu JavaScript aṣa lati yi hihan wọn pada. Irisi wọn, awọ, ati iwọn le jẹ adani ni irọrun pẹlu awọn kilasi ohun elo wa.

Apeere

Ninu apẹẹrẹ ti o wa ni isalẹ, a mu paati kaadi aṣoju kan ati tun ṣe pẹlu awọn ti o ni aaye ti a lo lati ṣẹda “kaadi ikojọpọ”. Iwọn ati awọn iwọn jẹ kanna laarin awọn meji.

Akọle kaadi

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

Lọ ibikan

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

Bawo ni o ṣe n ṣiṣẹ

Ṣẹda awọn oniduro pẹlu .placeholderkilasi ati kilasi iwe akoj (fun apẹẹrẹ, .col-6) lati ṣeto width. Wọn le rọpo ọrọ inu ohun kan tabi ṣafikun bi kilasi modifier si paati ti o wa tẹlẹ.

A lo afikun iselona si .btns nipasẹ ::beforelati rii daju pe heighta bọwọ fun. O le faagun apẹẹrẹ yii fun awọn ipo miiran bi o ṣe nilo, tabi ṣafikun kan  laarin ipin lati ṣe afihan giga nigbati ọrọ gangan ba wa ni ipo rẹ.

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

Lilo aria-hidden="true"nikan tọkasi pe eroja yẹ ki o farapamọ si awọn oluka iboju. Ihuwasi ikojọpọ ti ibi da lori bii awọn onkọwe yoo ṣe lo awọn aṣa ibi-aye nitootọ, bii wọn ṣe gbero lati ṣe imudojuiwọn awọn nkan, ati bẹbẹ lọ Diẹ ninu koodu JavaScript le nilo lati paarọ ipo ipo ibi ati sọfun awọn olumulo AT imudojuiwọn naa.

Ìbú

O le yipada widthnipasẹ awọn kilasi iwe akoj, awọn ohun elo iwọn, tabi awọn aza laini.

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

Àwọ̀

Nipa aiyipada, awọn placeholderlilo currentColor. Eyi le bori pẹlu awọ aṣa tabi kilasi ohun elo.

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

Titobi

Awọn iwọn ti .placeholders wa ni orisun lori awọn typographic ara ti awọn obi ano. Ṣe akanṣe wọn pẹlu awọn iyipada iwọn: .placeholder-lg, .placeholder-sm, tabi .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>

Idaraya

Animate placeholders pẹlu .placeholder-glowtabi .placeholder-wavelati mu dara awọn Iro ti nkankan ti wa ni ti kojọpọ.

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

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

Sass

Awọn oniyipada

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