Hiladores
Huk componente utaq p'anqap Bootstrap spinners kaqwan karga estadota rikuchiy, tukuy HTML kaqwan, CSS kaqwan chaymanta mana JavaScript kaqwan ruwasqa.
Sobre
Bootstrap “spinners” llamk’achiy atikunki rikuchinaykipaq carga estadota proyectoykikunapi. HTML chaymanta CSS kaqlla ruwasqa kanku, niyta munan mana ima JavaScripttapas necesitankichu chayta ruwanaykipaq. Ichaqa, wakin ruwasqa JavaScript necesitanki rikuyninkuta tikranaykipaq. Rikchayninku, chiqanchayninku, chanta sayayninninku ima mana sasachu ruwasqa kanman musphay utilidad claseykuwan.
Yaykunapaq, sapa kargaq kaypi role="status"
chaymanta huk anidado <span class="sr-only">Loading...</span>
.
prefers-reduced-motion
medios tapuymanta hapirin. Yaykuna qillqaykumanta pisiyachisqa kuyuy t'aqapi qhaway
.
Frontera hiladora
Llampu carga rikuchiqpaq border spinners nisqawan llamk'achiy.
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
Colores
Frontera spinner currentColor
paypaq llamk'achin , niyta munan qillqa llimp'i yanapakuykunawanborder-color
llimp'ita ruwayta atikunki . Mayqin qillqa llimp'i yanapakuyniykutapas hilador estándar kaqpi llamk'achiy atikunki.
<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
servicios públicos nisqakunata servichikunkichu? Sapa frontera spinner huk
transparent
frontera huk ladollapaqpas willan, chayrayku
.border-{color}
utilidadkuna chayta llallichinman.
Wiñaq hilador
Sichus mana huk frontera hiladorta munankichu, wiñachiy hiladorman tikray. Manaña técnicamente muyunchu chaypas, sapa kutinmi wiñan!
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
</div>
Huk kuti, kay hilador ruwasqa kachkan currentColor
, chayrayku mana sasachakuspalla rikchayninta tikrayta atikunki qillqa llimp'i yanapakuykunawan . Kaypiqa azulwanmi kachkan, chaynallataqmi yanapasqa variantekunawanpas.
<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>
Alineación
Bootstrap nisqapi hiladoras nisqakunaqa rem
s, currentColor
, chaymanta display: inline-flex
. Kayqa niyta munan, chaykunataqa mana sasachakuspalla sayayninta tikrayta atikunman, musuqmanta llimp’iyta atikunman, chaymanta usqhayllata chiqanchayta atikunman.
Pata
Utilizar utilidades de margen como .m-5
para espaciamiento fácil.
<div class="spinner-border m-5" role="status">
<span class="sr-only">Loading...</span>
</div>
Colocación
Flexbox yanapakuykunata , float yanapakuykunata , utaq qillqa chiqanchay yanapakuykunata llamk'achiy, mayqin situacionpipas necesitasqaykipi spinnerkunata churanaykipaq.
Flexible
<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>
Flotadores
<div class="clearfix">
<div class="spinner-border float-right" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Qillqasqa chiqanchay
<div class="text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Sayay
Yapay .spinner-border-sm
chaymanta .spinner-grow-sm
aswan huch’uy hiladora ruwanapaq, chayta usqhaylla huk componentes ukhupi llamk’achiy atikunman.
<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>
Utaq, sapanchasqa CSS utaq chiru ukhupi estilokuna llamk'achiy dimensiones nisqakunata necesitasqanmanhina tikranaykipaq.
<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>
Botones
Botonkuna ukhupi hiladorakunata llamk'achiy huk ruway kunan ruwakuchkaqta utaq ruwakuchkaqta rikuchinaykipaq. Hinallataq, qillqata elemento spinner kaqmanta t'inkinakuyta atinki chaymanta necesitasqaykimanhina botón qillqata llamk'achiy atikunki.
<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>