Spinneadairean
Comharraich staid luchdachadh pàirt no duilleag le snìomhadairean Bootstrap, air an togail gu tur le HTML, CSS, agus gun JavaScript.
Mu dheidhinn
Faodar “snìomhadairean” Bootstrap a chleachdadh gus an staid luchdachadh anns na pròiseactan agad a nochdadh. Tha iad air an togail a-mhàin le HTML agus CSS, a 'ciallachadh nach eil feum agad air JavaScript airson an cruthachadh. Ach, bidh feum agad air JavaScript àbhaisteach gus am faicsinneachd atharrachadh. Faodar an coltas, an co-thaobhadh agus am meud a ghnàthachadh gu furasta leis na clasaichean goireis iongantach againn.
Airson adhbharan ruigsinneachd, tha gach luchdan an seo a’ toirt a-steach role="status"
agus nead <span class="sr-only">Loading...</span>
.
prefers-reduced-motion
ceist nam meadhanan. Faic an
earrann gluasad lùghdaichte de na sgrìobhainnean ruigsinneachd againn .
Snìomhadair crìochan
Cleachd na snìomhadairean crìche airson comharra luchdachadh aotrom.
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
Dathan
Bidh an snìomhadair crìche a’ cleachdadh currentColor
airson a border-color
, a’ ciallachadh gun urrainn dhut an dath a ghnàthachadh le goireasan dath teacsa . Faodaidh tu gin de na goireasan dath teacsa againn a chleachdadh air an snìomhadair àbhaisteach.
<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
goireasan? Bidh gach snìomhadair crìche a’ sònrachadh
transparent
crìoch airson co-dhiù aon taobh, agus mar sin
.border-{color}
bhiodh goireasan a’ dol thairis air sin.
Spinneadair a 'fàs
Mura h-eil thu ag iarraidh snìomhadair crìche, gluais chun an spinner fhàs. Ged nach eil e a’ snìomh gu teicnigeach, bidh e a’ fàs a-rithist is a-rithist!
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
</div>
A-rithist, tha an snìomhadair seo air a thogail le currentColor
, gus an urrainn dhut a choltas atharrachadh gu furasta le goireasan dath teacsa . An seo tha e ann an gorm, còmhla ris na caochlaidhean le taic.
<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>
Co-thaobhadh
Tha snìomhadairean ann am Bootstrap air an togail le rem
s , currentColor
, agus display: inline-flex
. Tha seo a’ ciallachadh gum faod iad a bhith air an ath-mheudachadh gu furasta, air an ath-dhathachadh agus air an co-thaobhadh gu sgiobalta.
Iomall
Cleachd goireasan iomaill mar .m-5
airson farsaingeachd furasta.
<div class="spinner-border m-5" role="status">
<span class="sr-only">Loading...</span>
</div>
Suidheachadh
Cleachd goireasan flexbox , goireasan fleòdraidh , no goireasan co-thaobhadh teacsa gus snìomhadairean a chuir dìreach far a bheil feum agad orra ann an suidheachadh sam bith.
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>
Flòraichean
<div class="clearfix">
<div class="spinner-border float-right" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Co-thaobhadh teacsa
<div class="text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Meud
Cuir ris .spinner-border-sm
agus .spinner-grow-sm
dèan snìomhadair nas lugha a ghabhas cleachdadh gu sgiobalta taobh a-staigh co-phàirtean eile.
<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>
No, cleachd CSS àbhaisteach no stoidhlichean in-loidhne gus na tomhasan atharrachadh mar a dh’ fheumar.
<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>
Putanan
Cleachd snìomhadairean taobh a-staigh putanan gus sealltainn gu bheil gnìomh a’ dol air adhart no a’ dol air adhart an-dràsta. Faodaidh tu cuideachd an teacsa atharrachadh a-mach às an eileamaid snìomh agus teacsa putan a chleachdadh mar a dh ’fheumar.
<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>