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>

Text wrapping kha tihtawp theih a ni

Button text wrap duh loh chuan .text-nowrapclass chu button ah hian add theih a ni. $btn-white-space: nowrapSass ah chuan button tin tan text wrapping disable turin i set thei ang .

Button tags a awm bawk

Class te hi element .btnnena hman theih tura duan 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 a nih pawhin).

<a>In -page functionality (collapsing content ang chi) trigger nana hman element -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 button te chu press in a lang ang a, background dum zawk, border dum zawk, shadows enable a nih chuan inset shadow a awm bawk 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 .active(leh attribute pawh telh) hmangin i la force thei tho.aria-pressed=“true”

<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 buttons hmang <a>hian aria-disabled="true"assistive technology-te hnena element dinhmun tarlanna attribute a awm tur a ni.
• Disabled button hmang hian attribute chu a tel <a> tur a ni lo .href

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

Link hnathawh dan tur caveat

hrefDisabled link-a attribute dah tur case cover tur chuan .disabledclass chuan s- pointer-events: nonea link functionality tihtawp tumna a hmang thin. <a>He CSS property hi HTML atan standardized a la ni lo tih hre reng ang che, mahse tunlai browser zawng zawng hian an support vek a ni. Chu bakah, browser that do support pointer-events: none-ah pawh keyboard navigation chu a nghawng lo reng a, chu chu keyboard hmu thei leh assistive technology hmangtute chuan heng link te hi an la activate thei dawn tihna a ni. So to be safe, in addition to , heng links-ah hian keyboard focus an dawn loh nan attribute aria-disabled="true"dah tel bawk la, custom JavaScript hmangin an functionality chu tihtawp vek rawh.tabindex="-1"

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

Thiltih dan tur