Tlolela go diteng tše kgolo Tlolela go docs navigation
Check
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.

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

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.

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

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>

O ka ba wa kgokološa bogolo bja gago bja tlwaelo ka diphetogo tša 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>

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.

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>

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

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

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.

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>

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.

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>

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.

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>

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.

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>

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.

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>
Toggle kgokagano Kgokagano ya go fetola ye e šomago Kgokagano ya go fetola ye e šitišitšwego
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>

Mekgwa ya go šoma

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

const bsButton = new bootstrap.Button('#myButton')
Mokgwa Tlhalošo
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).
toggle Toggles kgorometsa boemo. E fa konope ponagalo ya gore e tsentšwe tirišong.

Ka mohlala, ho toggle dikonopo tsohle

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

CSS

Diphetogo

E okeditšwe ka go v5.2.0

Bjalo ka karolo ya go batamela ga diphetogo tša CSS tša Bootstrap tšeo di tšwelelago, dikonope bjale di šomiša diphetogo tša CSS tša selegae godimo .btnbakeng sa go tlwaetša nako ya nnete ye e kaonafetšego. Ditekanyetšo tša diphetogo tša CSS di beakantšwe ka Sass, ka fao go tlwaetša Sass go sa thekgwa, le gona.

  --#{$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);

Sehlopha se sengwe le se sengwe .btn-*sa sefetoši se mpshafatša diphetogo tša maleba tša CSS go fokotša melao ya tlaleletšo ya CSS ka button-variant(), button-outline-variant(), le button-size()mixins ya rena.

Mona ke mohlala wa go aga .btn-*sehlopha sa sefetoši sa tlwaelo go swana le ge re dira bakeng sa dikonope tšeo di kgethegilego go di-doc tša rena ka go abela gape diphetogo tša CSS tša Bootstrap ka motswako wa diphetogo tša rena tša CSS le Sass.

.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%)};
}

Diphetogo tša 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%;

Di-mixin tša sass

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)
) {
  --#{$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};
}

Diloupu tša Sass

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} {
    @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);
  }
}