Fonók
Egy komponens vagy oldal betöltési állapotának jelzése Bootstrap spinnerekkel, amelyek teljes egészében HTML-lel, CSS-sel és JavaScript nélkül készültek.
Ról ről
A Bootstrap „pörgetői” a projektek betöltési állapotának megjelenítésére használhatók. Csak HTML és CSS használatával készültek, ami azt jelenti, hogy nincs szükség JavaScriptre a létrehozásukhoz. A láthatóságuk váltásához azonban szüksége lesz néhány egyéni JavaScriptre. Megjelenésük, igazításuk és méretük egyszerűen testreszabható csodálatos használati osztályainkkal.
A kisegítő lehetőségek érdekében itt minden betöltő tartalmaz role="status"
egy beágyazott <span class="sr-only">Loading...</span>
.
prefers-reduced-motion
. Tekintse
meg akadálymentesítési dokumentációnk csökkentett mozgással foglalkozó részét .
Border spinner
Használja a szegélypörgőket egy könnyű töltésjelzőhöz.
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
Színek
A szegélyforgató ezt használja currentColor
, border-color
ami azt jelenti, hogy testreszabhatja a színt a szövegszín segédprogramokkal . Bármelyik szövegszín segédprogramunkat használhatja a szabványos pörgetőn.
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="sr-only">Loading...</span>
</div>
border-color
segédprogramokat? Minden szegélyforgató meghatároz egy
transparent
szegélyt legalább az egyik oldalhoz, így a
.border-{color}
segédprogramok ezt felülírják.
Növekvő fonó
Ha nem szereti a szegélytárcsát, váltson a növesztő fonóra. Bár technikailag nem forog, többször is nő!
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
</div>
Ez a pörgettyű ismét a -val készült , így a szövegszín segédprogramokkalcurrentColor
egyszerűen megváltoztathatja a megjelenését . Itt kék színben, a támogatott változatokkal együtt.
<div class="spinner-grow text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
<span class="sr-only">Loading...</span>
</div>
Igazítás
A Bootstrap spinnerei rem
s, currentColor
, és display: inline-flex
. Ez azt jelenti, hogy könnyen átméretezhetők, átszínezhetők és gyorsan igazíthatók.
Árrés
Használjon margó-segédprogramokat , mint például .m-5
az egyszerű térközelítés érdekében.
<div class="spinner-border m-5" role="status">
<span class="sr-only">Loading...</span>
</div>
Elhelyezés
Használjon flexbox segédprogramokat , float segédprogramokat vagy szövegigazító segédprogramokat, hogy minden helyzetben pontosan ott helyezze el a pörgetőket, ahol szüksége van rájuk.
Flex
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="d-flex align-items-center">
<strong>Loading...</strong>
<div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
</div>
Úszók
<div class="clearfix">
<div class="spinner-border float-right" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Szöveg igazítás
<div class="text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Méret
Adjon hozzá .spinner-border-sm
és .spinner-grow-sm
készítsen egy kisebb fonót, amely gyorsan használható más alkatrészekben.
<div class="spinner-border spinner-border-sm" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="sr-only">Loading...</span>
</div>
Vagy használjon egyéni CSS-t vagy belső stílusokat a méretek szükség szerinti módosításához.
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">Loading...</span>
</div>
Gombok
A gombokon belüli pörgettyűkkel jelezheti, hogy egy művelet folyamatban van vagy folyamatban van. A szöveget ki is cserélheti a pörgető elemből, és szükség szerint használhatja a gombszöveget.
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="sr-only">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Loading...
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
<span class="sr-only">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
Loading...
</button>