Tohu

Ko nga tuhinga me nga tauira mo nga tohu, to maatau iti me te waahanga tapanga.

I tenei wharangi

Tauira

Tauine tohu kia rite ki te rahi o te huānga matua tonu ma te whakamahi i te rahinga momotuhi me emnga waeine. Mai i te v5, karekau he momo arotahi, whakaparo ranei mo nga tohu mo nga hononga.

Nga Upoko

Tauira paneHou

html

<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>

Patene

Ka taea te whakamahi tohu hei waahanga o nga hononga, patene ranei hei whakarato porotiti.

html

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-bg-secondary">4</span>
</button>

Kia mahara kei te pehea e whakamahia ai, ka raru pea nga tohu mo nga kaiwhakamahi o nga kaipanui mata me nga hangarau awhina rite. Ahakoa ko te hanga o nga tohu tohu e whakaatu ana mo o raatau kaupapa, ka tukuna noa ki enei kaiwhakamahi nga ihirangi o te tohu. I runga i te ahuatanga motuhake, he ahua matapōkeretia enei tohu he kupu taapiri, he nama ranei kei te mutunga o te rerenga rerenga, hono, paatene ranei.

Ki te kore e marama te horopaki (penei i te tauira "Whakamōhiotanga", kei te maarama ko te "4" te maha o nga whakamohiotanga), whakaarohia te whakauru atu i etahi atu horopaki me tetahi waahanga tuhinga taapiri huna.

Kua tū

Whakamahia nga taputapu ki te whakarereke .badgeme te whakanoho ki te kokonga o te hono, te paatene ranei.

html

<button type="button" class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
    <span class="visually-hidden">unread messages</span>
  </span>
</button>

Ka taea hoki e koe te whakakapi i te .badgekaraehe me etahi atu taputapu kaore he tatau mo te tohu tohu.

html

<button type="button" class="btn btn-primary position-relative">
  Profile
  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
    <span class="visually-hidden">New alerts</span>
  </span>
</button>

Tae papamuri

Kua taapirihia ki te v5.2.0

Whakatakotoria he background-colorahua rereke ki mua colorme o maatau .text-bg-{color}kaiawhina . I mua i hiahiatia kia takirua a-ringa i to whiringa .text-{color}me nga .bg-{color}taputapu mo te taatai, ka taea tonu e koe te whakamahi ki te hiahia koe.

Paraimere Tuarua Angitu mōrearea Whakatupato Nga korero Maama pouri

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-bg-dark">Dark</span>

Te kawe i te tikanga ki nga hangarau awhina

Ko te whakamahi i te tae ki te taapiri i te tikanga he tohu tirohanga noa iho, kaore e tukuna ki nga kaiwhakamahi hangarau awhina - penei i nga kaipanui mata. Me mohio kei te kitea nga korero e tohuhia ana e te tae mai i te ihirangi ake (hei tauira, te tuhinga ka kitea), ka whakaurua ranei ma etahi atu huarahi, penei i etahi atu tuhinga huna ki te .visually-hiddenakomanga.

Nga tohu pire

Whakamahia te .rounded-pillkaraehe whaipainga kia porotaka ake nga tohu me te nui ake border-radius.

Paraimere Tuarua Angitu mōrearea Whakatupato Nga korero Maama pouri

html

<span class="badge rounded-pill text-bg-primary">Primary</span>
<span class="badge rounded-pill text-bg-secondary">Secondary</span>
<span class="badge rounded-pill text-bg-success">Success</span>
<span class="badge rounded-pill text-bg-danger">Danger</span>
<span class="badge rounded-pill text-bg-warning">Warning</span>
<span class="badge rounded-pill text-bg-info">Info</span>
<span class="badge rounded-pill text-bg-light">Light</span>
<span class="badge rounded-pill text-bg-dark">Dark</span>

CSS

Taurangi

Kua taapirihia ki te v5.2.0

Hei waahanga o nga huringa CSS e tipu haere ana a Bootstrap, ka whakamahia e nga tohu nga taurangi CSS o te rohe .badgemo te whakapai ake i te waa-waa. Ko nga uara mo nga taurangi CSS ka whakatauhia ma te Sass, no reira kei te tautoko tonu te whakaritenga Sass.

  --#{$prefix}badge-padding-x: #{$badge-padding-x};
  --#{$prefix}badge-padding-y: #{$badge-padding-y};
  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
  --#{$prefix}badge-font-weight: #{$badge-font-weight};
  --#{$prefix}badge-color: #{$badge-color};
  --#{$prefix}badge-border-radius: #{$badge-border-radius};

Taurangi Sass

$badge-font-size:                   .75em;
$badge-font-weight:                 $font-weight-bold;
$badge-color:                       $white;
$badge-padding-y:                   .35em;
$badge-padding-x:                   .65em;
$badge-border-radius:               $border-radius;