Patene

Whakamahia nga momo paatene ritenga a Bootstrap mo nga mahi i roto i nga puka, korero, me te maha atu me te tautoko mo nga rahi maha, ahua, me etahi atu.

Tauira

Kei roto i te Bootstrap te maha o nga momo patene kua tautuhia-mua, kei ia tangata e mahi ana i tana ake kaupapa korero, me etahi taapiri ka maka ki roto mo te mana whakahaere.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

Monokia te takai kuputuhi

Ki te kore koe e pirangi kia takai te kupu patene, ka taea e koe te taapiri i te .text-nowrapkaraehe ki te paatene. I roto i te Sass, ka taea e koe te tautuhi $btn-white-space: nowrapki te whakakore i te takai kuputuhi mo ia paatene.

Nga tohu paatene

Kua .btnhoahoatia nga karaehe hei whakamahi me te <button>huānga. Heoi, ka taea hoki e koe te whakamahi i enei karaehe ki runga , ki nga huānga <a>ranei <input>(ahakoa he rereke te ahua o etahi kaitirotiro).

Ina whakamahi i nga karaehe patene i runga i <a>nga huānga e whakamahia ana ki te whakaoho i te mahi-a-wharangi (penei i te tiango ihirangi), kaua ki te hono ki nga wharangi hou, ki nga waahanga ranei o te wharangi o naianei, me hoatu enei hononga ki te role="button"kawe tika i o raatau kaupapa ki nga hangarau awhina penei i te kaipānui mata.

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

Patene Whakahuahua

Kei te hiahia te paatene, engari ehara i nga tae o te papamuri e mau mai ana? Whakakapihia nga karaehe whakarereke taunoa me nga .btn-outline-*mea hei tango i nga whakaahua papamuri katoa me nga tae i runga i tetahi paatene.

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Rahi

Kei te pirangi koe ki nga paatene nui, iti ake ranei? Tāpirihia mo etahi atu rahinga .btn-lgranei ..btn-sm

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

Waihangahia nga patene taumata paraka—ko era e whanui ana i te whanui o te matua—ma te taapiri .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

Te ahua kaha

Ka puta nga patene ka pehia ina hohe ana me te papamuri pouri ake, te taitapa pouri, a, ka whakahohea nga atarangi, he atarangi whakauru. Kaore he take ki te taapiri i tetahi karaehe ki <button>te s i a raatau e whakamahi ana i te akomanga pseudo . Heoi, ka taea tonu e koe te akiaki i te ahua hohe ano me .active(me te whakauru i te aria-pressed=“true”huanga) mena ka hiahia koe ki te whakahoki i te kawanatanga ma te hotaka.

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

Te ahua haua

Kia hohekore nga paatene ma te taapiri i te disabledhuanga boolean ki tetahi <button>huānga.

<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>

<a>He rereke te ahua o nga patene monoa e whakamahi ana i te huānga:

• <a>s kore e tautoko i te disabledhuanga, no reira me tapiri e koe te .disabledkaraehe kia kore ai e kitea te haua.
• Ko etahi o nga momo ahua pai mo nga ra kei te heke mai hei whakakore i nga mea katoa pointer-eventsi runga i nga paatene punga. I roto i nga kaitirotiro e tautoko ana i taua taonga, kare rawa koe e kite i te pehu haua.
• Ko nga paatene kua monokia <a>me whakauru te aria-disabled="true"huanga hei tohu i te ahua o te huānga ki nga hangarau awhina.
• Ko nga paatene kua monokia <a> kaua e whakauru i te hrefhuanga.

<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

hono hono taumahinga whakatupato

Hei hipoki i nga keehi me pupuri koe i te hrefhuanga i runga i te hononga haua, ka .disabledwhakamahi te karaehe pointer-events: noneki te ngana ki te whakakore i te mahi hono a <a>s. Kia mahara ko tenei taonga CSS kaore ano kia paerewahia mo te HTML, engari kei te tautoko nga kaitirotiro hou katoa. I tua atu, ahakoa i roto i nga kaitirotiro e tautoko pointer-events: noneana, kaore e pa ana te whakatere papapātuhi, ko te tikanga ka taea tonu e nga kaiwhakamahi papapātuhi me nga kaiwhakamahi o nga hangarau awhina te whakahohe i enei hononga. Na kia noho haumaru, hei taapiri atu ki te aria-disabled="true", whakauruhia he tabindex="-1"huanga ki runga i enei hononga kia kore ai ratou e whiwhi arotahi papapātuhi, me te whakamahi i te JavaScript ritenga ki te whakakore i o raatau mahi.

<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

Pātene monomai

Mahi atu ki nga paatene. Ka kii te paatene mana, te hanga roopu patene ranei mo etahi atu waahanga penei i nga paeutauta.

Takahuri āhua

Tāpiri data-toggle="button"ki te takahuri i te activeahua o te paatene. Mena kei te takahuri-mua koe i tetahi paatene, me taapiri a ringa koe i te .activeakomanga me aria-pressed="true" te <button>.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  Single toggle
</button>

Pouakataki me nga paatene reo irirangi

Ka taea te whakamahi i nga ahua o Bootstrap .buttonki etahi atu huānga, penei i <label>te s, hei whakarato i te pouakataki, i te paatene kāhua reo irirangi ranei. Taapirihia data-toggle="buttons"ki .btn-grouproto i enei paatene whakarereke kia taea ai o raatau whanonga takahuri ma te JavaScript me te taapiri .btn-group-toggleki te ahua o nga <input>s i roto i o paatene. Kia mahara ka taea e koe te hanga i nga paatene-whakauru kotahi, he roopu roopu ranei.

Ko te ahua kua tohua mo enei paatene ka whakahoutia ma te clickhuihuinga i runga i te paatene. Ki te whakamahi koe i tetahi atu tikanga ki te whakahōu i te tāuru—hei tauira, <input type="reset">mā te whakamahi ā-ringa rānei i te taonga o te tāuru checked—me takahuri .activeā <label>-ringa koe.

Kia mahara ko nga patene kua takina i mua ka hiahia koe ki te taapiri a-ringa i te .activeakomanga ki te whakaurunga <label>.

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> Checked
  </label>
</div>

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

Nga tikanga