Spinners
Rewşa barkirinê ya pêkhateyek an rûpelek bi spinnerên Bootstrap, ku bi tevahî bi HTML, CSS, û bê JavaScript hatî çêkirin, destnîşan bikin.
Ji dor
Bootstrap "spinners" dikarin werin bikar anîn da ku di projeyên we de rewşa barkirinê nîşan bidin. Ew tenê bi HTML û CSS-ê têne çêkirin, tê vê wateyê ku hûn hewce ne JavaScript-ê ne ku wan biafirînin. Lêbelê, hûn ê hewceyê hin JavaScript-a xwerû bikin ku dîtina wan biguhezînin. Xuyabûn, lihevkirin û mezinbûna wan bi dersên meyên karûbar ên ecêb bi hêsanî têne xweş kirin.
Ji bo mebestên gihîştinê, her barkerek li vir tê de role="status"
û hêlînek <span class="sr-only">Loading...</span>
heye.
prefers-reduced-motion
medyayê ve girêdayî ye. Binêre
beşa tevgera kêmkirî ya belgeya gihîştina me .
Sînor spinner
Ji bo nîşanek barkirinê ya sivik, spinnerên sînor bikar bînin.
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
Colors
Sînor spinner ji currentColor
bo xwe bikar tîne border-color
, tê vê wateyê ku hûn dikarin reng bi karûbarên rengê nivîsê xweş bikin. Hûn dikarin li ser spinner-a standard yek ji karûbarên rengê nivîsara me bikar bînin.
<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
karûbar bikar neynin? Her spinner
transparent
sînorek ji bo kêmanî yek alî sînorek diyar dike, ji ber vê yekê
.border-{color}
karûbar dê vê yekê derbas bikin.
Spinner mezin dibe
Heke hûn ji spinnerek sînor hez nakin, veguherînin spinner-a mezin. Dema ku ew ji hêla teknîkî ve nezivirîne, ew çend caran mezin dibe!
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
</div>
Carek din, ev spinner bi ve hatî çêkirin currentColor
, ji ber vê yekê hûn dikarin bi hêsanî xuyangê wê bi karûbarên rengê nivîsê biguhezînin . Li vir ew şîn e, digel guhertoyên piştgirî.
<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>
Alignment
Spinners di Bootstrap de bi rem
s, currentColor
, û têne çêkirin display: inline-flex
. Ev tê vê wateyê ku ew dikarin bi hêsanî mezinahî, ji nû ve werin reng kirin, û bi lez werin rêz kirin.
Margin
Karûbarên marjînal ên wekî .m-5
ji bo veqetandina hêsan bikar bînin .
<div class="spinner-border m-5" role="status">
<span class="sr-only">Loading...</span>
</div>
Cihkirin
Karûbarên flexbox , karûbarên float , an karûbarên hevrêzkirina nivîsê bikar bînin da ku spinners tam li cîhê ku hûn di her rewşê de hewce ne bi cîh bikin.
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>
Floats
<div class="clearfix">
<div class="spinner-border float-right" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Text align
<div class="text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Mezinayî
Zêde bikin .spinner-border-sm
û .spinner-grow-sm
çêbikin ku spinnerek piçûktir ku zû dikare di nav pêkhateyên din de were bikar anîn.
<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>
An jî, CSS-ya xwerû an şêwazên hundurîn bikar bînin da ku li gorî hewcedariyê pîvanan biguhezînin.
<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>
Buttons
Di nav bişkokan de spinneran bikar bînin da ku destnîşan bikin ku çalakiyek niha tête kirin an pêk tê. Her weha hûn dikarin nivîsê ji hêmana spinner biguhezînin û li gorî hewcedariyê nivîsa bişkojkê bikar bînin.
<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>