Սփիներներ
Նշեք բաղադրիչի կամ էջի բեռնման վիճակը Bootstrap մանողներով, որոնք ամբողջությամբ կառուցված են HTML, CSS և առանց JavaScript-ի:
Մասին
Bootstrap «spinners»-ը կարող է օգտագործվել ձեր նախագծերում բեռնման վիճակը ցույց տալու համար: Դրանք կառուցված են միայն HTML-ով և CSS-ով, այսինքն՝ դրանք ստեղծելու համար JavaScript-ի կարիք չունեք: Այնուամենայնիվ, ձեզ հարկավոր կլինի հատուկ JavaScript՝ դրանց տեսանելիությունը փոխելու համար: Դրանց տեսքը, հավասարեցումը և չափերը կարող են հեշտությամբ հարմարեցվել մեր զարմանալի օգտակար դասերի միջոցով:
Մատչելիության նպատակների համար այստեղ յուրաքանչյուր բեռնիչ ներառում է role="status"
և ներդիր <span class="sr-only">Loading...</span>
:
prefers-reduced-motion
լրատվամիջոցների հարցումից: Տեսեք
մեր մատչելիության փաստաթղթերի կրճատված շարժման բաժինը :
Սահմանային մանող
Օգտագործեք եզրագծերը՝ թեթև բեռնման ցուցիչի համար:
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
Գույներ
The border spinner-ն օգտագործում currentColor
է իր համար border-color
, ինչը նշանակում է, որ դուք կարող եք հարմարեցնել գույնը տեքստի գունային օգտակար ծրագրերի միջոցով : Դուք կարող եք օգտագործել մեր տեքստի գույնի ցանկացած օգտակար ծրագիր ստանդարտ մանողի վրա:
<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
կոմունալ ծառայություններից: Յուրաքանչյուր եզրագծային պտույտ սահմանում է
transparent
եզրագիծ առնվազն մեկ կողմի համար, այնպես որ
.border-{color}
կոմունալ ծառայությունները կչեղարկեն դա:
Աճող մանող
Եթե դուք չեք ցանկանում սահմանային մանող, անցեք աճող մանողին: Թեև այն տեխնիկապես չի պտտվում, այն բազմիցս աճում է:
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
</div>
Եվս մեկ անգամ այս մանողը կառուցված է currentColor
, այնպես որ կարող եք հեշտությամբ փոխել իր տեսքը տեքստի գունավոր կոմունալ ծրագրերի միջոցով : Այստեղ այն կապույտ է, աջակցվող տարբերակների հետ միասին:
<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>
Հավասարեցում
Սփիներները Bootstrap-ում կառուցված են rem
s- ով currentColor
, և display: inline-flex
. Սա նշանակում է, որ դրանք կարող են հեշտությամբ չափափոխվել, գունավորվել և արագ հավասարեցնել:
Լուսանցք
Օգտագործեք լուսանցքի կոմունալ ծառայություններ , ինչպիսիք .m-5
են հեշտ տարածության համար:
<div class="spinner-border m-5" role="status">
<span class="sr-only">Loading...</span>
</div>
Տեղադրում
Օգտագործեք flexbox կոմունալ ծառայություններ , float կոմունալ ծառայություններ կամ տեքստի հավասարեցման կոմունալ ծառայություններ՝ ցանկացած իրավիճակում պտտվողները ճիշտ տեղում տեղադրելու համար, որտեղ դրանք ձեզ անհրաժեշտ են:
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>
Բոցեր
<div class="clearfix">
<div class="spinner-border float-right" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Տեքստի հավասարեցում
<div class="text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Չափը
Ավելացրեք .spinner-border-sm
և .spinner-grow-sm
պատրաստեք ավելի փոքր մանող, որը կարող է արագ օգտագործվել այլ բաղադրիչների մեջ:
<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>
Կամ օգտագործեք հատուկ CSS կամ ներկառուցված ոճեր՝ ըստ անհրաժեշտության չափերը փոխելու համար:
<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>
Կոճակներ
Օգտագործեք պտտվողները կոճակների մեջ՝ ցույց տալու համար, որ գործողությունը ներկայումս մշակվում կամ կատարվում է: Դուք կարող եք նաև փոխել տեքստը պտտվող տարրից և օգտագործել կոճակի տեքստը ըստ անհրաժեշտության:
<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>