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

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

<button type="button" class="btn btn-primary">
  Notifications <span class="badge 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.

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

<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

Whakamahia a maatau karaehe whaipainga papamuri kia tere te huri i te ahua o te tohu. Kia mahara mai i te wa e whakamahi ana koe i te taunoa a Bootstrap .bg-light, ka hiahia pea koe ki tetahi taputapu tae tuhinga penei .text-darkmo te hanga tika. Ko tenei na te mea kaore nga taputapu papamuri e whakarite i tetahi mea engari background-color.

Paraimere Tuarua Angitu mōrearea Whakatupato Nga korero Maama pouri

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

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

Sass

Taurangi

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