Tlolela go diteng tše kgolo Tlolela go docs navigation
in English

Dikonope

Šomiša ditaele tša konope ya tlwaelo ya Bootstrap bakeng sa ditiro ka diforomong, dipoledišanong, le tše dingwe ka thekgo ya bogolo bjo bontši, dilete, le tše dingwe.

Letlakaleng le

Mehlala

Bootstrap e akaretša mekgwa e mmalwa ya konope yeo e hlalošitšwego e sa le pele, e nngwe le e nngwe e hlankela morero wa yona wa semantiki, ka dilo tše sego kae tše di oketšegilego tšeo di lahlilwego ka gare bakeng sa taolo e oketšegilego.

<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>
Go fetišetša tlhalošo go theknolotši ya go thuša

Go šomiša mmala go oketša tlhalošo go fa fela taetšo ya go bonwa, yeo e ka se fetišwego go badiriši ba theknolotši ya go thuša – go swana le babadi ba skrine. Netefatša gore tshedimošo yeo e bontšhitšwego ka mmala e ka ba e bonagala gabotse go tšwa diteng ka botšona (mohlala, sengwalwa se se bonagalago), goba e akaretšwa ka mekgwa ye mengwe, go swana le sengwalwa sa tlaleletšo seo se utilwego le .visually-hiddensehlopha.

Thibela go phuthela sengwalwa

Ge o sa nyake gore sengwalwa sa konope se phuthele, o ka oketša .text-nowrapklase go konope. Ka go Sass, o ka beakanya $btn-white-space: nowrapgo šitiša go phuthela sengwalwa sa konope ye nngwe le ye nngwe.

Dithegi tša konope

Diklase di .btnhlamilwe go šomišwa le <button>elemente. Le ge go le bjalo, o ka šomiša gape diklase tše godimo ga <a>goba <input>dielemente (le ge e le gore diphensele tše dingwe di ka diriša phetolelo ye e fapanego gannyane).

Ge o šomiša diklase tša konope go <a>dielemente tšeo di šomišwago go hlohleletša mošomo wa ka gare ga letlakala (go swana le diteng tša go phuhlama), go e na le go kgokaganya le matlakala a maswa goba dikarolo ka gare ga letlakala la bjale, dikgokagano tše di swanetše go fiwa a role="button"go fetišetša morero wa tšona ka tshwanelo go theknolotši ya go thuša go swana le babadi ba skrine.

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

Dikonope tša go hlaloša

O hloka konopo, eupša e sego mebala e boima ya morago yeo ba e tlišago? Efa diklase tša sefetoši sa go se fetoge legato ka tšeo di .btn-outline-*tlago go tloša diswantšho ka moka tša ka morago le mebala go konope efe goba efe.

<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>
Tše dingwe tša mekgwa ya dikonope di šomiša mmala wa ka pele wo o bofefo kudu, gomme di swanetše go šomišwa fela ka morago le leso e le gore go be le phapano ye e lekanego.

Bogolo

Fancy dikonope tše kgolo goba tše nnyane? Oketša .btn-lggoba .btn-smbakeng sa bogolo bja tlaleletšo.

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

Boemo bjo bo golofetšego

Dira gore dikonope di bonagale di sa šome ka go tlaleletša disabledseka sa boolean go <button>elemente efe goba efe. Dikonope tše di golofetšego di pointer-events: nonedirišitše go, go thibela go hover le maemo a mafolofolo go hlohleletša.

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

Dikonope tše di golofetšego tšeo di šomišago <a>elemente di itshwara ka go fapana go se nene:

  • <a>s ga di thekge disabledseka, ka fao o swanete go oketša .disabledsehlopha go dira gore se bonagale se golofetše ka pono.
  • Mekgwa e mengwe yeo e nago le bogwera bja nakong e tlago e akareditšwe go šitiša ka moka pointer-eventsgo dikonope tša ankora.
  • Dikonope tše di golofetšego tše di šomišago <a>di swanetše go akaretša aria-disabled="true"seka go laetša seemo sa elemente go theknolotši ya go thuša.
  • Dikonope tše di golofetšego tše di šomišago ga se tša <a> swanela go akaretša hrefseka.
Kgokagano ya mathomo Amanya 
<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>

Go akaretša maemo ao o swanetšego go boloka hrefseka go kgokagano ye e golofetšego, .disabledsehlopha se šomiša pointer-events: nonego leka go šitiša mošomo wa kgokagano wa <a>s. Hlokomela gore thepa ye ya CSS ga se ya hlwa e bewa maemo a HTML, eupša diphensele ka moka tša sebjalebjale di e thekga. Go tlaleletša, gaešita le go diphensele tšeo di dirago thekgo pointer-events: none, go sepelasepela ga khiiboto go dula go sa amege, go bolela gore badiriši ba khiiboto bao ba bonago le badiriši ba thekinolotši ya go thuša ba sa dutše ba tla kgona go tsenya dikgokagano tše tirišong. Ka fao go ba yo a bolokegilego, go tlaleletša go aria-disabled="true", gape akaretša tabindex="-1"seka go dikgokagano tše go di thibela go amogela go tsepamiša kgopolo ga khiiboto, gomme o šomiše JavaScript ya tlwaelo go šitiša mošomo wa tšona ka mo go feletšego.

Kgokagano ya mathomo Amanya 
<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>

Dikonope tša go thibela

Bopa mekgobo e arabelago ya bophara bjo bo tletšego, “dikonope tša go thibela” go swana le tšeo di lego go Bootstrap 4 ka motswako wa didirišwa tša rena tša pontšho le tša sekgoba. Ka go diriša didirišwa go e na le diklase tše itšego tša konope, re na le taolo e kgolo kudu godimo ga sekgoba, go logaganya le boitshwaro bja go arabela.

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

Mona re bopa phapang e arabelang, ho qala ka dikonopo tse kgobokeditšwego ka go otlologa go fihla ntlheng ya go mdkgaotša, moo .d-md-blocke tšeago sebaka sa .d-gridsehlopha, ka go rialo re dira gore gap-2utility e be lefeela. Fetoša bogolo bja sephephediši sa gago go bona di fetoga.

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

O ka beakanya bophara bja dikonope tša gago tša go thibela ka diklase tša bophara bja kholomo ya keriti. Ka mohlala, bakeng sa “konope ya go thibela” ya seripa-gare sa bophara, diriša .col-6. Center e rapameng le .mx-auto, le eena o.

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

Didirišwa tša tlaleletšo di ka šomišwa go beakanya go logaganya ga dikonope ge di rapaletše. Mona re tšere mohlala wa rena wa peleng wa go arabela gomme ra tlaleletša ka didirišwa tše dingwe tša go koba le sedirišwa sa mošito godimo ga konope go logaganya dikonope ka go le letona ge di se sa kgoboketšwa.

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

Plugin ya konopo

Plugin ya konope e go dumelela go hlama dikonope tše bonolo tša go fetoša/go tima.

Ka pono, dikonope tše tša go fetoša di swana le dikonope tša go fetoša tša lepokisi la go hlahloba . Le ge go le bjalo, di fetišetšwa ka go fapana ke theknolotši ya go thuša: diphetogo tša lepokisi la go hlahloba di tla tsebišwa ke babadi ba skrine bjalo ka “tšeo di hlahlobjago”/“ga se tša hlahlobja” (ka ge, go sa šetšwe ponagalo ya tšona, motheong e sa le mapokisi a go hlahloba), mola dikonope tše tša go fetoša di tla tsebišwa bjalo ka “konope”/“konope e tobetse”. Kgetho magareng ga mekgwa ye mebedi e tla ithekga ka mohuta wa toggle yeo o e hlamago, le ge eba toggle e tla kwagala go badiriši ge e tsebagatšwa bjalo ka lepokisi la go hlahloba goba bjalo ka konope ya nnete goba aowa.

Toggle e re

Oketša data-bs-toggle="button"go fetola boemo bja konope active. Ge e ba o fetoša konope pele, o swanetše go oketša .activesehlopha ka seatla le aria-pressed="true" go netefatša gore se fetišetšwa ka tshwanelo go theknolotši ya go thuša.

<button type="button" class="btn btn-primary" data-bs-toggle="button" autocomplete="off">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" autocomplete="off" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button" autocomplete="off">Disabled toggle button</button>
Toggle kgokagano Kgokagano ya go fetola ye e šomago Kgokagano ya go fetola ye e šitišitšwego 
<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>

Mekgwa ya go šoma

O ka hlama mohlala wa konope ka mohlami wa konope, mohlala:

var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)
Mokgwa Tlhalošo
toggle Toggles kgorometsa boemo. E fa konope ponagalo ya gore e tsentšwe tirišong.
dispose E senya konope ya elemente. (E tloša ya data ye e bolokilwego go elemente ya DOM)
getInstance Mokgwa wa go se fetoge wo o go dumelelago go hwetša mohlala wa konope wo o amanago le elemente ya DOM, o ka e šomiša ka tsela ye:bootstrap.Button.getInstance(element)
getOrCreateInstance Mokgwa wa go se fetoge wo o bušetšago mohlala wa konope wo o amanago le elemente ya DOM goba go hlama ye mpsha ge go ka direga gore e be e sa thongwa. O ka e diriša ka tsela ye:bootstrap.Button.getOrCreateInstance(element)

Ka mohlala, ho toggle dikonopo tsohle

var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
  var button = new bootstrap.Button(button)
  button.toggle()
})

Sass

Diphetogo

$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:              $link-color;
$btn-link-hover-color:        $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%;

Ditswaki

Ho na le mixins tse tharo bakeng sa dikonopo: konopo le konopo moralo fapaneng mixins (bobeli thehiloeng $theme-colors), go tlaleletsa ka konopo boholo mixin.

@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)
) {
  color: $color;
  @include gradient-bg($background);
  border-color: $border;
  @include box-shadow($btn-box-shadow);

  &:hover {
    color: $hover-color;
    @include gradient-bg($hover-background);
    border-color: $hover-border;
  }

  .btn-check:focus + &,
  &:focus {
    color: $hover-color;
    @include gradient-bg($hover-background);
    border-color: $hover-border;
    @if $enable-shadows {
      @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
    } @else {
      // Avoid using mixin so we can pass custom focus shadow properly
      box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
    }
  }

  .btn-check:checked + &,
  .btn-check:active + &,
  &:active,
  &.active,
  .show > &.dropdown-toggle {
    color: $active-color;
    background-color: $active-background;
    // Remove CSS gradients if they're enabled
    background-image: if($enable-gradients, none, null);
    border-color: $active-border;

    &:focus {
      @if $enable-shadows {
        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
      } @else {
        // Avoid using mixin so we can pass custom focus shadow properly
        box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
      }
    }
  }

  &:disabled,
  &.disabled {
    color: $disabled-color;
    background-color: $disabled-background;
    // Remove CSS gradients if they're enabled
    background-image: if($enable-gradients, none, null);
    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)
) {
  color: $color;
  border-color: $color;

  &:hover {
    color: $color-hover;
    background-color: $active-background;
    border-color: $active-border;
  }

  .btn-check:focus + &,
  &:focus {
    box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
  }

  .btn-check:checked + &,
  .btn-check:active + &,
  &:active,
  &.active,
  &.dropdown-toggle.show {
    color: $active-color;
    background-color: $active-background;
    border-color: $active-border;

    &:focus {
      @if $enable-shadows {
        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
      } @else {
        // Avoid using mixin so we can pass custom focus shadow properly
        box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
      }
    }
  }

  &:disabled,
  &.disabled {
    color: $color;
    background-color: transparent;
  }
}

@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  padding: $padding-y $padding-x;
  @include font-size($font-size);
  // Manually declare to provide an override to the browser default
  @include border-radius($border-radius, 0);
}

Diloupu

Diphetogo tša konope (bakeng sa dikonope tša ka mehla le tša go hlaloša) di šomiša di-mixin tša tšona ka go latelana le $theme-colorsmmapa wa rena go tšweletša diklase tša sefetoši ka go scss/_buttons.scss.

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

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