Սփիներներ
Նշեք բաղադրիչի կամ էջի բեռնման վիճակը Bootstrap մանողներով, որոնք ամբողջությամբ կառուցված են HTML, CSS և առանց JavaScript-ի:
Մասին
Bootstrap «spinners»-ը կարող է օգտագործվել ձեր նախագծերում բեռնման վիճակը ցույց տալու համար: Դրանք կառուցված են միայն HTML-ով և CSS-ով, այսինքն՝ դրանք ստեղծելու համար JavaScript-ի կարիք չունեք: Այնուամենայնիվ, ձեզ հարկավոր կլինի հատուկ JavaScript՝ դրանց տեսանելիությունը փոխելու համար: Դրանց տեսքը, հավասարեցումը և չափերը կարող են հեշտությամբ հարմարեցվել մեր զարմանալի օգտակար դասերի միջոցով:
Մատչելիության նպատակների համար այստեղ յուրաքանչյուր բեռնիչ ներառում է role="status"և ներդիր <span class="sr-only">Loading...</span>:
Սահմանային մանող
Օգտագործեք եզրագծերը՝ թեթև բեռնման ցուցիչի համար:
<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-ում կառուցված են rems- ով 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>