Tohu
Ko nga tuhinga me nga tauira mo nga tohu, to maatau iti me te waahanga tapanga.
Tauira
Tauine tohu kia rite ki te rahi o te huānga matua tonu ma te whakamahi i te rahinga momotuhi me em
nga waeine. Mai i te v5, karekau he momo arotahi, whakaparo ranei mo nga tohu mo nga hononga.
Nga Upoko
Tauira paneHou
Tauira paneHou
Tauira paneHou
Tauira paneHou
Tauira paneHou
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 .badge
me 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 .badge
karaehe 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-dark
mo te hanga tika. Ko tenei na te mea kaore nga taputapu papamuri e whakarite i tetahi mea engari background-color
.
<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-hidden
akomanga.
Nga tohu pire
Whakamahia te .rounded-pill
karaehe whaipainga kia porotaka ake nga tohu me te nui ake border-radius
.
<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;