Buttons te a awm

Form, dialog leh thil dang danga action hrang hrang atan Bootstrap-a custom button styles hmang la, size hrang hrang, state leh thil dang tam tak support rawh.

Entirna te

Bootstrap hian button style hrang hrang predefined a keng tel a, pakhat zel hian semantic purpose an nei vek a, control tam zawk neih nan extra tlemte an paih lut bawk.

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

Button tags a awm bawk

Class te hi element .btnnena hman tur atana siam a ni . <button>Mahse, heng class te hi on <a>or <input>elements ah pawh i hmang thei bawk (browser thenkhat chuan rendering danglam deuh deuh an hmang thei nachungin).

<a>In -page functionality (collapsing content ang chi) trigger nana hman elements -a button class hman hunah , tuna page chhunga page thar emaw section thar emaw link ai chuan, heng link te hi a pek tur a ni a role="button", an thiltum chu assistive technology ang chi te hnena a dik taka thlen theih nan screen reader te a awm bawk.

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

Outline button te chu a rawn lang a

Button mamawh, mahse hefty background colors an rawn ken te kha a ni lo em ni? Default modifier class te chu .btn-outline-*button eng pawha background image leh color zawng zawng paih vek theihna tur te nen thlak leh rawh.

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

Size hrang hrang

Button lian zawk emaw te zawk emaw i duh em? Add .btn-lgemaw .btn-smsize dang atan emaw.

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

Block level button siam rawh—nu leh pa pakhat zau zawng zawnga huam vek—chu .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>

Active state a ni

Active laiin buttons chu pressed (background dum zawk, border dum zawk, leh inset shadow nen) a lang ang. Pseudo-class an hman avangin s ah hian class dah belh a ngai lo<button> . Mahse, programmatic-a state replicate a ngai a nih chuan active appearance ang chiah kha i la force thei tho .active(leh aria-pressed="true"attribute pawh i telh tel bawk ang).

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

Disabled state a ni

Element disabledeng pawhah boolean attribute dahin button te chu inactive angin siam rawh .<button>

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

Element hmanga disabled button te chu <a>an awm dan a danglam deuh hlek a:

• <a>s hian attribute an support lo a , chuvangin visually disabled anga lang turin class chu disabledi add a ngai a ni..disabled
• Nakin lawka hman theih tur style thenkhat chu pointer-eventsanchor button-a awm zawng zawng tihtawp theihna tur a awm bawk. Chu property support tu browser-ah chuan disabled cursor chu i hmu lo tak zet ang.
• Disabled button-ah aria-disabled="true"chuan assistive technology-te hnena element dinhmun tarlanna attribute a awm tur a ni.

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

Button plugin a awm bawk

Button hmangin tam zawk ti rawh. Control button state emaw toolbar ang chi component tam zawk tan button group siam emaw a ni.

Toggle state te chu

data-toggle="button"Button pakhat dinhmun toggle turin add rawh active. Button i pre-toggling a nih chuan .activeclass chu aria-pressed="true" manual-in i add tur a ni a, <button>.

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

Checkbox leh radio button te a awm bawk

Bootstrap .buttonstyles te hi element dang, <label>s ang chi ah te pawh hman theih a ni a, checkbox emaw radio style button toggling emaw a awm thei bawk. JavaScript hmanga an toggling behavior enable turin chutiang modified buttons awmnaah chuan add la data-toggle="buttons", i buttons chhunga s te chu style turin add rawh. Input-powered button pakhat emaw, group hrang hrang emaw i siam thei tih hre reng ang che..btn-group.btn-group-toggle<input>

Heng button te tana checked state hi button -a event kaltlangin chauh update aclick ni. Input update nan method dang i hman chuan—eg, <input type="reset">input-a property chu manual-a apply-in emaw, manual-a apply-in emaw—manual checked-a i toggle a ngai .activeang <label>.

.activePre-checked buttons ah chuan input's ah class chu manual add a ngai tih hre reng ang che <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>

Thiltih dan tur