Source

Spinneadairean

Comharraich staid luchdachadh pàirt no duilleag le snìomhadairean Bootstrap, air an togail gu tur le HTML, CSS, agus gun JavaScript.

Mu dheidhinn

Faodar “snìomhadairean” Bootstrap a chleachdadh gus an staid luchdachadh anns na pròiseactan agad a nochdadh. Tha iad air an togail a-mhàin le HTML agus CSS, a 'ciallachadh nach eil feum agad air JavaScript airson an cruthachadh. Ach, bidh feum agad air JavaScript àbhaisteach gus am faicsinneachd atharrachadh. Faodar an coltas, an co-thaobhadh agus am meud a ghnàthachadh gu furasta leis na clasaichean goireis iongantach againn.

Airson adhbharan ruigsinneachd, tha gach luchdan an seo a’ toirt a-steach role="status"agus nead <span class="sr-only">Loading...</span>.

Snìomhadair crìochan

Cleachd na snìomhadairean crìche airson comharra luchdachadh aotrom.

<div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>

Dathan

Bidh an snìomhadair crìche a’ cleachdadh currentColorairson a border-color, a’ ciallachadh gun urrainn dhut an dath a ghnàthachadh le goireasan dath teacsa . Faodaidh tu gin de na goireasan dath teacsa againn a chleachdadh air an snìomhadair àbhaisteach.

<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>

Carson nach cleachd thu border-colorgoireasan? Bidh gach snìomhadair crìche a’ sònrachadh transparentcrìoch airson co-dhiù aon taobh, agus mar sin .border-{color}bhiodh goireasan a’ dol thairis air sin.

Spinneadair a 'fàs

Mura h-eil thu ag iarraidh snìomhadair crìche, gluais chun an spinner fhàs. Ged nach eil e a’ snìomh gu teicnigeach, bidh e a’ fàs a-rithist is a-rithist!

<div class="spinner-grow" role="status">
  <span class="sr-only">Loading...</span>
</div>

A-rithist, tha an snìomhadair seo air a thogail le currentColor, gus an urrainn dhut a choltas atharrachadh gu furasta le goireasan dath teacsa . An seo tha e ann an gorm, còmhla ris na caochlaidhean le taic.

<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>

Co-thaobhadh

Tha snìomhadairean ann am Bootstrap air an togail le rems , currentColor, agus display: inline-flex. Tha seo a’ ciallachadh gum faod iad a bhith air an ath-mheudachadh gu furasta, air an ath-dhathachadh agus air an co-thaobhadh gu sgiobalta.

Iomall

Cleachd goireasan iomaill mar .m-5airson farsaingeachd furasta.

<div class="spinner-border m-5" role="status">
  <span class="sr-only">Loading...</span>
</div>

Suidheachadh

Cleachd goireasan flexbox , goireasan fleòdraidh , no goireasan co-thaobhadh teacsa gus snìomhadairean a chuir dìreach far a bheil feum agad orra ann an suidheachadh sam bith.

Flex

<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>
A' luchdachadh... 
<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
</div>

Flòraichean

<div class="clearfix">
  <div class="spinner-border float-right" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>

Co-thaobhadh teacsa

<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>

Meud

Cuir ris .spinner-border-smagus .spinner-grow-smdèan snìomhadair nas lugha a ghabhas cleachdadh gu sgiobalta taobh a-staigh co-phàirtean eile.

<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>

No, cleachd CSS àbhaisteach no stoidhlichean in-loidhne gus na tomhasan atharrachadh mar a dh’ fheumar.

<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>

Putanan

Cleachd snìomhadairean taobh a-staigh putanan gus sealltainn gu bheil gnìomh a’ dol air adhart no a’ dol air adhart an-dràsta. Faodaidh tu cuideachd an teacsa atharrachadh a-mach às an eileamaid snìomh agus teacsa putan a chleachdadh mar a dh’ fheumar.

<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>