Cov chaw tuav

Siv cov chaw thau khoom rau koj cov khoom lossis cov nplooj ntawv los qhia qee yam tseem yuav thauj khoom.

Ntawm nplooj ntawv no

Txog

Cov chaw tso cai tuaj yeem siv los txhim kho qhov kev paub ntawm koj daim ntawv thov. Lawv tsuas yog tsim nrog HTML thiab CSS, txhais tau tias koj tsis tas yuav muaj JavaScript los tsim lawv. Txawm li cas los xij, koj yuav xav tau qee qhov kev cai JavaScript los hloov lawv qhov pom. Lawv cov tsos, xim, thiab qhov loj me tuaj yeem kho tau yooj yim nrog peb cov chav kawm siv hluav taws xob.

Piv txwv

Hauv qhov piv txwv hauv qab no, peb muab daim npav ib txwm siv thiab rov tsim nws nrog cov neeg siv khoom siv los tsim "daim npav thauj khoom". Qhov loj thiab proportions yog tib yam ntawm ob.

Daim npav npe

Qee cov ntawv piv txwv ceev los tsim cov npe ntawm daim npav thiab ua kom muaj ntau ntawm daim npav cov ntsiab lus.

Mus qhov twg

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

Nws ua haujlwm li cas

Tsim cov chaw tuav nrog cov .placeholderchav kawm thiab cov kab ke kab ke (piv txwv li, .col-6) los teeb width. Lawv tuaj yeem hloov cov ntawv hauv ib lub ntsiab lus lossis muab ntxiv ua cov chav hloov kho rau cov khoom uas twb muaj lawm.

Peb thov ntxiv styling rau .btns ntawm ::beforelos xyuas kom meej qhov kev heighthwm. Koj tuaj yeem txuas tus qauv no rau lwm qhov xwm txheej raws li xav tau, lossis ntxiv ib qho  hauv lub ntsiab lus kom pom qhov siab thaum cov ntawv nyeem tau muab tso rau hauv nws qhov chaw.

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>

Kev siv aria-hidden="true"tsuas yog qhia tias lub ntsiab lus yuav tsum tau muab zais rau kev tshuaj ntsuam nyeem. Tus cwj pwm thauj khoom ntawm qhov chaw nyob yog nyob ntawm seb cov neeg sau ntawv yuav siv qhov chaw nyob li cas, lawv npaj yuav hloov kho li cas, thiab lwm yam. Qee qhov JavaScript code yuav xav tau los pauv lub xeev ntawm qhov chaw thiab qhia AT cov neeg siv ntawm qhov hloov tshiab.

Dav

Koj tuaj yeem hloov cov widthchav kawm hauv kab kab sib chaws, dav siv hluav taws xob, lossis cov qauv hauv kab.

html

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

Xim

Raws li lub neej ntawd, kev placeholdersiv currentColor. Qhov no tuaj yeem hla dhau nrog cov xim kev cai lossis chav kawm siv hluav taws xob.

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>

Qhov loj me

Qhov luaj li cas ntawm .placeholders yog raws li typographic style ntawm niam txiv lub caij. Customize lawv nrog sizing modifiers: .placeholder-lg, .placeholder-sm, los yog .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

Animate placeholders nrog .placeholder-glowlos yog .placeholder-wavekom zoo dua qhia qhov kev nkag siab ntawm ib yam dab tsi uas nquag loaded.

html

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

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

Sass

Hloov pauv

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