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="sr-only">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="sr-only">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="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
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="sr-only">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="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>
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="sr-only">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="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>
Mānu
<div class="clearfix">
<div class="spinner-border float-right" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Tirohanga Kuputuhi
<div class="text-center">
<div class="spinner-border" role="status">
<span class="sr-only">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="sr-only">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="sr-only">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="sr-only">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">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="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>