Vrtavke
Označite stanje nalaganja komponente ali strani z vrtljivkami Bootstrap, ki so v celoti zgrajene s HTML, CSS in brez JavaScripta.
O tem
Za prikaz stanja nalaganja v vaših projektih se lahko uporabijo »vrteče« Bootstrap. Zgrajeni so samo s HTML in CSS, kar pomeni, da za njihovo ustvarjanje ne potrebujete JavaScripta. Za preklop njihove vidnosti pa boste potrebovali nekaj JavaScripta po meri. Njihov videz, poravnavo in velikost je mogoče enostavno prilagoditi z našimi neverjetnimi razredi uporabnosti.
Za namene dostopnosti vsak nalagalnik tukaj vključuje role="status"
in ugnezdeni <span class="sr-only">Loading...</span>
.
prefers-reduced-motion
medijske poizvedbe. Oglejte si razdelek o
zmanjšanem gibanju v naši dokumentaciji o dostopnosti .
Obrobni vrtavec
Uporabite obrobne vrtavke za indikator lahkega nakladanja.
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
Barve
Obrobni vrtavec uporablja currentColor
za svoje border-color
, kar pomeni, da lahko prilagodite barvo s pripomočki za barvo besedila . Uporabite lahko katerega koli od naših pripomočkov za barvo besedila na standardnem vrtavki.
<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
pripomočkov? Vsak mejni vrtalnik določa
transparent
obrobo za vsaj eno stran, zato
.border-{color}
bi pripomočki to preglasili.
Rastoča vrtavka
Če ne marate mejne vrtavke, preklopite na vrtavko za rast. Čeprav se tehnično ne vrti, vedno znova raste!
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
</div>
Še enkrat, ta vrtavka je zgrajena z currentColor
, tako da lahko preprosto spremenite njegov videz s pripomočki za barvo besedila . Tukaj je v modri barvi, skupaj s podprtimi različicami.
<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>
Poravnava
Spinerji v Bootstrapu so zgrajeni s rem
s currentColor
, in display: inline-flex
. To pomeni, da jim je mogoče preprosto spremeniti velikost, prebarvati in hitro poravnati.
Marža
Uporabite pripomočke za robove, na primer .m-5
za enostavno razmik.
<div class="spinner-border m-5" role="status">
<span class="sr-only">Loading...</span>
</div>
Umestitev
Uporabite pripomočke flexbox , lebdeče pripomočke ali pripomočke za poravnavo besedila , da vrtavke postavite točno tam, kjer jih potrebujete v vsaki situaciji.
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>
Plovci
<div class="clearfix">
<div class="spinner-border float-right" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Poravnaj besedilo
<div class="text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Velikost
Dodajte .spinner-border-sm
in .spinner-grow-sm
naredite manjši spiner, ki ga lahko hitro uporabite v drugih komponentah.
<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>
Ali pa uporabite CSS po meri ali vgrajene sloge, da po potrebi spremenite dimenzije.
<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>
Gumbi
Uporabite vrtljivke znotraj gumbov, da označite, da se dejanje trenutno izvaja ali poteka. Prav tako lahko zamenjate besedilo iz vrtljivega elementa in po potrebi uporabite besedilo gumba.
<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>