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>

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 paatene ka pehia (he pouri ake te papamuri, he taitapa pouri ake, me te atarangi whakauru) ina hohe. 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 he 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.
• Me whakauru nga patene haua i te aria-disabled="true"huanga hei tohu i te ahua o te huānga ki nga hangarau awhina.

<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" 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āpirihia data-toggle="button"hei 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" autocomplete="off">
  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 autocomplete="off"> 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" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

Nga tikanga