U gudub nuxurka muhiimka ah U gudub dukumentiyada navigation
Check
in English

Badhamada

U adeegso qaababka badhanka gaarka ah ee Bootstrap ee ficilada foomamka, wada-hadallada, iyo in ka badan oo leh taageerada cabbirro badan, gobollo, iyo in ka badan.

Boggan

Tusaalooyinka

Bootstrap waxa ku jira dhawr nooc oo badhan hore loo sii qeexay, mid walbana u adeegaya ujeedadiisa semantic, oo leh dhawr waxyaalood oo dheeri ah oo lagu tuuray si loo xakameeyo.

html 
<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>
U gudbinta macnaha tignoolajiyada caawinta

Isticmaalka midabka si loogu daro macnaha kaliya waxay bixisaa tilmaam muuqaal ah, taas oo aan loo gudbin doonin isticmaalayaasha tignoolajiyada caawinta - sida akhristayaasha shaashadda. Hubi in macluumaadka lagu tilmaamay midabku ay ka cad yihiin waxa ku jira laftiisa (tusaale qoraalka muuqda), ama lagu soo daro habab kale, sida qoraal dheeraad ah oo .visually-hiddenfasalka dhexdiisa ku qarsoon.

Dami duubista qoraalka

Haddii aadan rabin in qoraalka badhanku duubo, waxaad ku dari kartaa .text-nowrapfasalka badhanka. Gudaha Sass, waxaad dejin kartaa $btn-white-space: nowrapinaad joojiso duubista qoraalka badhan kasta.

badhanka tags

Fasallada .btnwaxaa loogu talagalay in lagu isticmaalo <button>curiyaha. Si kastaba ha ahaatee, waxaad sidoo kale isticmaali kartaa fasaladan <a>ama <input>walxaha (inkasta oo daalacayaasha qaarkood laga yaabo inay adeegsadaan waxyar ka duwan).

Markaad isticmaalayso casharrada badhanka ee <a>walxaha loo isticmaalo kicinta shaqaynta bogga (sida macluumaadka burburaya), halkii lagu xidhi lahaa bogag ama qaybo cusub oo ku dhex jira bogga hadda jira, xidhiidhadan waa in la siiyaa role="button"si ay si habboon ugu gudbiyaan ujeedadooda teknoolajiyada caawinta sida akhristayaasha shaashadda.

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

Badhamada dulucda

Ma u baahan tahay badhan, laakiin maaha midabada asalka ah ee culus ee ay keenaan? Ku beddel fasallada wax ka beddelka caadiga ah .btn-outline-*kuwa si aad uga saarto dhammaan sawirada asalka iyo midabada badhanka kasta.

html 
<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>
Qaar ka mid ah qaababka badhanka waxay isticmaalaan midab hore oo khafiif ah, waana in loo isticmaalo kaliya asalka mugdiga ah si loo helo isbarbardhig ku filan.

Cabbirrada

Ma jeceshahay badhamada waaweyn ama ka yar? Ku dar .btn-lgama .btn-smcabbiro dheeraad ah.

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

Waxaad xitaa ku rogi kartaa cabbirkaaga gaarka ah doorsoomayaasha CSS:

html 
<button type="button" class="btn btn-primary"
        style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">
  Custom button
</button>

Gobolka naafada

Ka dhig badhamada kuwo aan shaqayn adiga oo ku daraya disabledsifada booleenka shay kasta <button>. Badhamada naafada ah ayaa pointer-events: nonecodsaday, ka hortagaya duleelka iyo gobolada firfircoon inay kiciyaan.

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

Badhamada naafada ah ee isticmaalaya <a>curiyaha ayaa u dhaqma xoogaa ka duwan:

  • <a>s ma taageeraan disabledsifada, markaa waa inaad ku dartaa .disabledfasalka si aad muuqaal ahaan ugu ekaato mid naafo ah.
  • Qaar ka mid ah qaababka mustaqbalka-saaxiibtinimo ayaa lagu soo daray si loo joojiyo dhammaan pointer-eventsbadhamada barroosinka.
  • Badhamada naafada ah ee la isticmaalayaa <a>waa inay ku jiraan aria-disabled="true"sifada tilmaamaysa xaalada curiyaha tignoolajiyada caawinta.
  • Badhamada naafada isticmaalaya <a> waa in aanay ku jirin sifada href.
Xiriirinta aasaasiga ah Xiriirinta
html 
<a class="btn btn-primary disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary disabled" role="button" aria-disabled="true">Link</a>

Si loo daboolo kiisaska ay tahay inaad ku hayso hrefsifada isku xidhka naafada, .disabledfasalku wuxuu isticmaalaa pointer-events: noneinuu isku dayo inuu joojiyo shaqada isku xidhka ee <a>s. Ogsoonow in hantida CSS-da aan weli loo habayn HTML, laakiin dhammaan daalacashada casriga ahi way taageeraan. Intaa waxaa dheer, xitaa daalacashada caawiya pointer-events: none, navigation kiiboodhka ayaa weli ah mid aan saameyn ku yeelan, taasoo la macno ah in isticmaalayaasha kiiboodhka ee arka iyo isticmaalayaasha tignoolajiyada caawinta ay wali awood u yeelan doonaan in ay dhaqaajiyaan xiriiriyeyaashan. Si aad u noqoto mid badbaado leh, marka lagu daro aria-disabled="true", sidoo kale ku dar tabindex="-1"sifo xiriiriyeyaashan si aad uga ilaaliso inay helaan diiradda kiiboodhka, oo isticmaal JavaScript-ka caadiga ah si aad u baabi'iso hawshooda gebi ahaanba.

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

Xiro badhamada

Samee xirmo jawaab celin ah oo ballac buuxa ah, "xiro badhamada" sida kuwa ku jira Bootstrap 4 oo leh isku dhafka bandhigayada iyo utility gap. Adigoo isticmaalaya yutiilitida halkii aad ka isticmaali lahayd badhanka fasalada gaarka ah, waxaan leenahay awood aad u weyn oo ku saabsan kala dheereynta, toosinta, iyo dabeecadaha ka jawaaba.

html 
<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Halkan waxaan ku abuureynaa kala duwanaansho jawaab celin ah, oo ka bilaabeysa badhamada si toosan u xiran ilaa barta mdjebinta, halkaas oo .d-md-blockbeddeleysa .d-gridfasalka, sidaas darteed baabi'inaysa gap-2utility. Wax ka beddel barowsarkaaga si aad u aragto inay isbedelayaan.

html 
<div class="d-grid gap-2 d-md-block">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Waxaad ku hagaajin kartaa ballaca badhamada xannibaadda adigoo isticmaalaya fasalada ballaca tiirarka. Tusaale ahaan, ballac badhkii "badhanka xanniba", isticmaal .col-6. U dhex dhig si siman .mx-auto, sidoo kale.

html 
<div class="d-grid gap-2 col-6 mx-auto">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Utility dheeraad ah ayaa loo isticmaali karaa in lagu hagaajiyo toosinta badhamada marka ay jiifaan. Halkan waxaan ku soo qaadanay tusaalihii hore ee jawaab celinta oo aanu ku darnay qaar ka mid ah utility flex iyo utility margin ee badhanka si loo toosiyo badhanka marka aan la xidhin.

html 
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
  <button class="btn btn-primary me-md-2" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Button plugin

Furaha badhanka ayaa kuu oggolaanaya inaad abuurto badhamada shid/dami fudud.

Muuqaal ahaan, badhamadan beddelka ayaa la mid ah badhamada beddelka sanduuqa . Si kastaba ha ahaatee, waxaa loo gudbiyaa si ka duwan tignoolajiyada caawinta: sanduuqa jeegaga waxaa ku dhawaaqi doona akhristayaasha shaashada sida "la saxay"/"aan la hubin" "badhanka"/"badhanka la riixay". Doorashada labadan hab waxay ku xirnaan doontaa nooca toggle ee aad abuurayso, iyo haddii beddelaadku macno samayn doono isticmaalayaasha marka lagu dhawaaqo sanduuqa hubinta ama badhanka dhabta ah.

Beddel gobolada

Ku dar si aad u beddesho xaaladda data-bs-toggle="button"badhanka activeHaddii aad hore u-rogrogayso badhanka, waa inaad gacanta ku dartaa .activefasalka oo aria-pressed="true" aad hubisaa in si habboon loogu gudbiyo tignoolajiyada caawinta.

html 
<button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>
Beddel xidhiidhka Isku xirka toosan ee firfircoon Isku xirka beddelka waa la joojiyay
html 
<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
<a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>

Hababka

Waxaad ku abuuri kartaa tusaale badhanka dhisaha badhanka, tusaale ahaan:

const bsButton = new bootstrap.Button('#myButton')
Habka Sharaxaada
dispose Wuxuu baabi'iyaa badhanka curiyaha. (Waxay tirtirtaa xogta kaydsan ee cunta DOM)
getInstance Habka taagan ee kuu ogolaanaya inaad hesho tusaale badhanka la xidhiidha curiyaha DOM, waxaad u isticmaali kartaa sidan: bootstrap.Button.getInstance(element).
getOrCreateInstance Habka taagan ee soo celiya tusaale badhanka la xidhiidha curiyaha DOM ama abuura mid cusub haddii aan la bilaabin. Waxaad u isticmaali kartaa sidan bootstrap.Button.getOrCreateInstance(element):.
toggle Beddelayaa gobolka riix Siinaya badhanka muuqaalka in la hawlgeliyay.

Tusaale ahaan, in la rogo dhammaan badhamada

document.querySelectorAll('.btn').forEach(buttonElement => {
  const button = bootstrap.Button.getOrCreateInstance(buttonElement)
  button.toggle()
})

CSS

Kala duwanaansho

Lagu daray v5.2.0

Iyada oo qayb ka ah habka isbeddelaya ee Bootstrap ee CSS, badhamada hadda waxay adeegsadaan doorsoomayaasha CSS-ta maxalliga ah .btnsi loo horumariyo habaynta waqtiga-dhabta ah. Qiimaha doorsoomayaasha CSS waxa lagu dejiyay Sass, sidaa darteed habaynta Sass wali waa la taageerayaa, sidoo kale.

  --#{$prefix}btn-padding-x: #{$btn-padding-x};
  --#{$prefix}btn-padding-y: #{$btn-padding-y};
  --#{$prefix}btn-font-family: #{$btn-font-family};
  @include rfs($btn-font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-font-weight: #{$btn-font-weight};
  --#{$prefix}btn-line-height: #{$btn-line-height};
  --#{$prefix}btn-color: #{$body-color};
  --#{$prefix}btn-bg: transparent;
  --#{$prefix}btn-border-width: #{$btn-border-width};
  --#{$prefix}btn-border-color: transparent;
  --#{$prefix}btn-border-radius: #{$btn-border-radius};
  --#{$prefix}btn-hover-border-color: transparent;
  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
  --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
  --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);

Fasal kasta .btn-*oo wax ka beddelka ahi waxa uu cusboonaysiiyaa doorsoomayaasha CSS ee ku habboon si loo yareeyo xeerarka CSS ee dheeraadka ah ee ku jira button-variant(), button-outline-variant(), iyo isku- button-size()darkayada.

Halkan waxaa ah tusaale dhismaha .btn-*fasalka wax ka beddelka caadiga ah sida aan u samayno badhamada u gaarka ah dukumeentiyadayada annagoo dib u habeyn ku samaynayna doorsoomayaasha Bootstrap ee CSS oo isku jira doorsoomayaal CSS iyo Sass noo gaar ah.

.btn-bd-primary {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet);
  --bs-btn-border-color: var(--bd-violet);
  --bs-btn-border-radius: .5rem;
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
  --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
  --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
}

Doorsoomayaasha Sass

$btn-padding-y:               $input-btn-padding-y;
$btn-padding-x:               $input-btn-padding-x;
$btn-font-family:             $input-btn-font-family;
$btn-font-size:               $input-btn-font-size;
$btn-line-height:             $input-btn-line-height;
$btn-white-space:             null; // Set to `nowrap` to prevent text wrapping

$btn-padding-y-sm:            $input-btn-padding-y-sm;
$btn-padding-x-sm:            $input-btn-padding-x-sm;
$btn-font-size-sm:            $input-btn-font-size-sm;

$btn-padding-y-lg:            $input-btn-padding-y-lg;
$btn-padding-x-lg:            $input-btn-padding-x-lg;
$btn-font-size-lg:            $input-btn-font-size-lg;

$btn-border-width:            $input-btn-border-width;

$btn-font-weight:             $font-weight-normal;
$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
$btn-focus-width:             $input-btn-focus-width;
$btn-focus-box-shadow:        $input-btn-focus-box-shadow;
$btn-disabled-opacity:        .65;
$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125);

$btn-link-color:              var(--#{$prefix}link-color);
$btn-link-hover-color:        var(--#{$prefix}link-hover-color);
$btn-link-disabled-color:     $gray-600;

// Allows for customizing button radius independently from global border radius
$btn-border-radius:           $border-radius;
$btn-border-radius-sm:        $border-radius-sm;
$btn-border-radius-lg:        $border-radius-lg;

$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

$btn-hover-bg-shade-amount:       15%;
$btn-hover-bg-tint-amount:        15%;
$btn-hover-border-shade-amount:   20%;
$btn-hover-border-tint-amount:    10%;
$btn-active-bg-shade-amount:      20%;
$btn-active-bg-tint-amount:       20%;
$btn-active-border-shade-amount:  25%;
$btn-active-border-tint-amount:   10%;

Isku darka Sass

Waxaa jira saddex isku darka oo loogu talagalay badhamada: badhanka iyo badhanka dulmar kala duwanaanta isku darka (labadaba waxay ku salaysan yihiin $theme-colors), oo lagu daray cabbirka badhanka.

@mixin button-variant(
  $background,
  $border,
  $color: color-contrast($background),
  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
  $hover-color: color-contrast($hover-background),
  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
  $active-color: color-contrast($active-background),
  $disabled-background: $background,
  $disabled-border: $border,
  $disabled-color: color-contrast($disabled-background)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-bg: #{$background};
  --#{$prefix}btn-border-color: #{$border};
  --#{$prefix}btn-hover-color: #{$hover-color};
  --#{$prefix}btn-hover-bg: #{$hover-background};
  --#{$prefix}btn-hover-border-color: #{$hover-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$disabled-color};
  --#{$prefix}btn-disabled-bg: #{$disabled-background};
  --#{$prefix}btn-disabled-border-color: #{$disabled-border};
}

@mixin button-outline-variant(
  $color,
  $color-hover: color-contrast($color),
  $active-background: $color,
  $active-border: $color,
  $active-color: color-contrast($active-background)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-border-color: #{$color};
  --#{$prefix}btn-hover-color: #{$color-hover};
  --#{$prefix}btn-hover-bg: #{$active-background};
  --#{$prefix}btn-hover-border-color: #{$active-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$color};
  --#{$prefix}btn-disabled-bg: transparent;
  --#{$prefix}btn-disabled-border-color: #{$color};
  --#{$prefix}gradient: none;
}

@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  --#{$prefix}btn-padding-y: #{$padding-y};
  --#{$prefix}btn-padding-x: #{$padding-x};
  @include rfs($font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-border-radius: #{$border-radius};
}

Sass loops

Kala duwanaanshaha badhanka (badhamada caadiga ah iyo kuwa dulman) waxay isticmaalaan $theme-colorskhariidaddooda isku darka ah si ay u abuuraan fasalada wax ka beddelka ee scss/_buttons.scss.

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @if $color == "light" {
      @include button-variant(
        $value,
        $value,
        $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
        $hover-border: shade-color($value, $btn-hover-border-shade-amount),
        $active-background: shade-color($value, $btn-active-bg-shade-amount),
        $active-border: shade-color($value, $btn-active-border-shade-amount)
      );
    } @else if $color == "dark" {
      @include button-variant(
        $value,
        $value,
        $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
        $hover-border: tint-color($value, $btn-hover-border-tint-amount),
        $active-background: tint-color($value, $btn-active-bg-tint-amount),
        $active-border: tint-color($value, $btn-active-border-tint-amount)
      );
    } @else {
      @include button-variant($value, $value);
    }
  }
}

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    @include button-outline-variant($value);
  }
}