Kaihurihuri
Tohua te ahua o te utaina o tetahi waahanga, wharangi ranei me nga kaihurihuri Bootstrap, he mea hanga katoa ki te HTML, CSS, me te kore JavaScript.
Mō
Ka taea te whakamahi i nga "porowhita" Bootstrap hei whakaatu i te ahua o te uta i o kaupapa. He mea hanga noa ki te HTML me te CSS, te tikanga kaore koe e hiahia JavaScript hei hanga. Heoi, ka hiahia koe ki etahi JavaScript ritenga ki te huri i o raatau tirohanga. Ko o raatau ahua, tirohanga, me te rahi ka taea te whakarite me o maatau akomanga whaipainga whakamiharo.
Mo nga kaupapa whakaurunga, kei ia kaiuta kei konei role="status"
me te kohanga <span class="visually-hidden">Loading...</span>
.
prefers-reduced-motion
uiui pāpāho. Tirohia te
waahanga motini whakaheke o a maatau tuhinga whakaurunga .
Kaihuri taitapa
Whakamahia nga porowhita taitapa mo te tohu uta mama.
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Nga Tae
Ka whakamahia e te kaihuri taitapa currentColor
mo ona border-color
, te tikanga ka taea e koe te whakarite i te tae me nga taputapu tae tuhinga . Ka taea e koe te whakamahi i tetahi o a maatau taputapu tae kuputuhi i runga i te miro paerewa.
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="visually-hidden">Loading...</span>
</div>
border-color
taputapu? Ka tohua e ia kaitahuri taitapa he
transparent
taitapa mo tetahi taha, na nga
.border-{color}
taputapu ka takahia tera.
Te tipu hurihuri
Ki te kore koe e pai ki te miro taitapa, huri ki te miro whakatipu. Ahakoa karekau e miro, ka tipu haere tonu!
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Ano ano, ka hangaia tenei kaihurihuri ki te currentColor
, kia ngawari te whakarereke i tona ahua me nga taputapu tae tuhinga . Anei he puru, me nga momo rereke e tautokohia ana.
<div class="spinner-grow text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Tirohanga
Ko nga Kaihurihuri kei Bootstrap he mea hanga ki rem
te s, currentColor
, me te display: inline-flex
. Ko te tikanga ka taea te whakarereke i te rahi, te tae ano, me te tere tere.
Tawhē
Whakamahia nga taputapu tawhē penei .m-5
mo te waatea ngawari.
<div class="spinner-border m-5" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Whakanoho
Whakamahia nga taputapu flexbox , nga taputapu rewa , nga taputapu whakatika tuhinga ranei hei whakanoho i nga kaihurihuri ki te waahi e hiahia ana koe ahakoa nga ahuatanga.
Takahuri
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<div class="d-flex align-items-center">
<strong>Loading...</strong>
<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>
Mānu
<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Tirohanga Kuputuhi
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Rahi
Tāpirihia .spinner-border-sm
me .spinner-grow-sm
te hanga i tetahi miro iti ka taea te whakamahi i roto i etahi atu waahanga.
<div class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Ranei, whakamahia te CSS ritenga, nga momo raina-raina ranei hei whakarereke i nga rahi ina hiahiatia.
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Patene
Whakamahia nga kaihurihuri i roto i nga paatene hei tohu i tetahi hohenga kei te tukatuka, kei te mahi ranei. Ka taea ano e koe te huri i te kuputuhi mai i te huānga hurihuri me te whakamahi i te paatene kuputuhi ina hiahiatia.
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">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="visually-hidden">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>
Sass
Taurangi
$spinner-width: 2rem;
$spinner-height: $spinner-width;
$spinner-vertical-align: -.125em;
$spinner-border-width: .25em;
$spinner-animation-speed: .75s;
$spinner-width-sm: 1rem;
$spinner-height-sm: $spinner-width-sm;
$spinner-border-width-sm: .2em;
Papamatua
I whakamahia mo te hanga i nga pakiwaituhi CSS mo o maatau kaihurihuri. Kei roto scss/_spinners.scss
.
@keyframes spinner-border {
to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}
@keyframes spinner-grow {
0% {
transform: scale(0);
}
50% {
opacity: 1;
transform: none;
}
}