Li-spinners
Bontša boemo ba ho kenya karolo kapa leqephe le nang le li-spinners tsa Bootstrap, tse hahiloeng ka ho feletseng ka HTML, CSS, 'me ha ho na JavaScript.
About
Bootstrap "spinners" e ka sebelisoa ho bontša boemo ba ho kenya merero ea hau. Li hahiloe feela ka HTML le CSS, ho bolelang hore ha u hloke JavaScript ho li etsa. Leha ho le joalo, u tla hloka JavaScript e tloaelehileng ho fetola ponahalo ea bona. Ponahalo ea bona, tekano le boholo ba tsona li ka etsoa habonolo ka litlelase tsa rona tse ntle tsa lisebelisoa.
Bakeng sa merero ea phihlello, mojaro o mong le o mong mona o kenyelletsa role="status"le sehlaha sa <span class="sr-only">Loading...</span>.
Border spinner
Sebelisa li-spinners tsa moeli bakeng sa pontšo ea boima bo bobebe.
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>Mebala
Moeli oa spinner o sebelisa currentColorbakeng sa eona border-color, ho bolelang hore o ka iketsetsa 'mala ka lisebelisoa tsa mebala ea mongolo . U ka sebelisa lisebelisoa life kapa life tsa mebala ea mongolo ho spinner e tloaelehileng.
<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>Ke hobane'ng ha u sa sebelise border-colorlisebelisoa? Moeli o mong le o mong oa spinner o bolela transparentmoeli bakeng sa bonyane lehlakore le le leng, kahoo .border-{color}lisebelisoa li ne li tla feta seo.
Ho hola spinner
Haeba u sa rate spinner ea moeli, fetohela ho grow spinner. Le hoja e sa bilike ka botekgeniki, e ntse e hola khafetsa!
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
</div>Hape, spinner ena e hahiloe ka currentColor, kahoo o ka fetola ponahalo ea eona habonolo ka lisebelisoa tsa mebala ea mongolo . Mona ke 'mala o moputsoa, hammoho le mefuta e fapaneng e tšehetsoeng.
<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>Ho tsamaisana
Li-spinner ho Bootstrap li hahiloe ka rems, currentColor, le display: inline-flex. Sena se bolela hore li ka feto-fetoha habonolo, tsa fetoloa mebala, 'me tsa hlophisoa kapele.
Margin
Sebelisa lisebelisoa tsa marang-rang joalo .m-5ka sebaka se bonolo.
<div class="spinner-border m-5" role="status">
<span class="sr-only">Loading...</span>
</div>Ho beha
Sebelisa lisebelisoa tsa flexbox , float utilities , kapa lisebelisoa tsa ho hokahanya ha mongolo ho beha li-spinner hantle moo u li hlokang maemong afe kapa afe.
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>E phaphametseng
<div class="clearfix">
<div class="spinner-border float-right" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>Hlophisa mongolo
<div class="text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>Boholo
Eketsa .spinner-border-smle .spinner-grow-smho etsa spinner e nyane e ka sebelisoang kapele ka har'a likarolo tse ling.
<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>Kapa, sebelisa CSS e tloaelehileng kapa li-styles tse ka hare ho marang-rang ho fetola litekanyo kamoo ho hlokahalang.
<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>Likonopo
Sebelisa li-spinner ka har'a likonopo ho bontša hore ketso e ntse e sebetsa kapa e ntse e etsahala. U ka boela ua fetola mongolo ho tsoa ho "spinner element" 'me u sebelise mongolo oa konopo ha ho hlokahala.
<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>