Cov chaw tuav
Siv cov chaw thau khoom rau koj cov khoom lossis cov nplooj ntawv los qhia qee yam tseem yuav thauj khoom.
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 .placeholder
chav 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 .btn
s ntawm ::before
los xyuas kom meej qhov kev height
hwm. Koj tuaj yeem txuas tus qauv no rau lwm qhov xwm txheej raws li xav tau, lossis ntxiv ib qho
hauv cov ntsiab lus kom pom qhov siab thaum cov ntawv nyeem tau muab tso rau hauv nws qhov chaw.
<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"
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 width
chav kawm hauv kab kab sib chaws, dav siv hluav taws xob, lossis cov qauv hauv kab.
<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 placeholder
siv currentColor
. Qhov no tuaj yeem hla dhau nrog cov xim kev cai lossis chav kawm siv hluav taws xob.
<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 .placeholder
s yog raws li typographic style ntawm niam txiv lub caij. Customize lawv nrog sizing modifiers: .placeholder-lg
, .placeholder-sm
, los yog .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>
Animation
Animate placeholders nrog .placeholder-glow
los yog .placeholder-wave
kom zoo dua qhia qhov kev nkag siab ntawm ib yam dab tsi uas nquag loaded.
<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;