האָפּקען צו הויפּט אינהאַלט האָפּקען צו דאָקס נאַוויגאַציע
in English

קנעפּלעך

ניצן Bootstrap ס מנהג קנעפּל סטיילז פֿאַר אַקשאַנז אין פארמען, דיאַלאָגס און מער מיט שטיצן פֿאַר קייפל סיזעס, שטאַטן און מער.

ביישפילן

באָאָטסטראַפּ ינקלודז עטלעכע פּרעדעפינעד קנעפּל סטיילז, יעדער סערווינג זיין אייגענע סעמאַנטיק ציל, מיט עטלעכע עקסטראַז פֿאַר מער קאָנטראָל.

<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>
קאַנווייינג טייַטש צו אַסיסטיוו טעקנאַלאַדזשיז

ניצן קאָליר צו לייגן טייַטש בלויז גיט אַ וויזשאַוואַל אָנווייַז, וואָס וועט נישט זיין קאַנווייד צו יוזערז פון אַסיסטיוו טעקנאַלאַדזשיז - אַזאַ ווי פאַרשטעלן לייענער. פאַרזיכערן אַז אינפֿאָרמאַציע דינאָוטיד דורך די קאָליר איז קלאָר ווי דער טאָג פון די אינהאַלט זיך (למשל די קענטיק טעקסט), אָדער איז אַרייַנגערעכנט דורך אָלטערנאַטיוו מיטל, אַזאַ ווי נאָך טעקסט פאַרבאָרגן מיט די .visually-hiddenקלאַס.

דיסייבאַל טעקסט ראַפּינג

אויב איר טאָן ניט וועלן די קנעפּל טעקסט צו ייַנוויקלען, איר קענען לייגן דעם .text-nowrapקלאַס צו די קנעפּל. אין Sass, איר קענען שטעלן $btn-white-space: nowrapצו דיסייבאַל טעקסט ראַפּינג פֿאַר יעדער קנעפּל.

קנעפּל טאַגס

די .btnקלאסן זענען דיזיינד צו זיין געוויינט מיט דעם <button>עלעמענט. אָבער, איר קענען אויך נוצן די קלאסן אויף <a>אָדער <input>עלעמענטן (כאָטש עטלעכע בראַוזערז קען צולייגן אַ ביסל אַנדערש רענדערינג).

ווען ניצן קנעפּל קלאסן אויף <a>עלעמענטן וואָס זענען גענוצט צו צינגל אין-בלאַט פאַנגקשאַנאַליטי (ווי קאַלאַפּסינג אינהאַלט), אלא ווי פֿאַרבינדונג צו נייַע בלעטער אָדער סעקשאַנז אין דעם קראַנט בלאַט, די לינקס זאָל זיין געגעבן אַ role="button"צו אַפּראָופּרייטלי קאַנוויי זייער ציל צו אַסיסטיוו טעקנאַלאַדזשיז אַזאַ ווי פאַרשטעלן לייענער.

לינק
<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">

אַוטליין קנעפּלעך

איר דאַרפֿן אַ קנעפּל, אָבער נישט די כעפטי הינטערגרונט פֿאַרבן זיי ברענגען? פאַרבייַטן די פעליקייַט מאָדיפיער קלאסן מיט די .btn-outline-*אָנעס צו באַזייַטיקן אַלע הינטערגרונט בילדער און פארבן אויף קיין קנעפּל.

<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>
עטלעכע פון ​​די קנעפּל סטיילז נוצן אַ לעפיערעך ליכט פאָרגראַונד קאָליר, און זאָל זיין געוויינט בלויז אויף אַ טונקל הינטערגרונט צו האָבן גענוג קאַנטראַסט.

סיזעס

ליב געהאט גרעסערע אָדער קלענערער קנעפּלעך? לייג .btn-lgאָדער .btn-smפֿאַר נאָך סיזעס.

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

פאַרקריפּלט שטאַט

מאַכן די קנעפּלעך ינאַקטיוו דורך אַדינג די disabledבוליאַן אַטריביוט צו קיין <button>עלעמענט. פאַרקריפּלט קנעפּלעך האָבן pointer-events: noneגעווענדט צו, פּרעווענטינג האָווער און אַקטיוו שטאַטן פון טריגערינג.

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

פאַרקריפּלט קנעפּלעך ניצן דעם <a>עלעמענט ביכייוו אַ ביסל אַנדערש:

  • <a>s טאָן ניט שטיצן דעם disabledאַטריביוט, אַזוי איר מוזן לייגן די .disabledקלאַס צו מאַכן עס וויזשוואַלי דערשייַנען פאַרקריפּלט.
  • עטלעכע צוקונפֿט-פרייַנדלעך סטיילז זענען אַרייַנגערעכנט צו דיסייבאַל אַלע pointer-eventsאויף אַנקער קנעפּלעך.
  • פאַרקריפּלט קנעפּלעך זאָל אַרייַננעמען די aria-disabled="true"אַטריביוט צו אָנווייַזן די שטאַט פון די עלעמענט צו אַסיסטיוו טעקנאַלאַדזשיז.
<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>

דער .disabledקלאַס ניצט pointer-events: noneצו פּרובירן צו דיסייבאַל די לינק פאַנגקשאַנאַליטי פון <a>s, אָבער די CSS פאַרמאָג איז נישט נאָך סטאַנדערדייזד. אין אַדישאַן, אפילו אין בראַוזערז וואָס שטיצן pointer-events: none, קלאַוויאַטור נאַוויגאַציע בלייבט אַנאַפעקטיד, טייַטש אַז סייטיד קלאַוויאַטור יוזערז און יוזערז פון אַסיסטאַטיוו טעקנאַלאַדזשיז קענען נאָך אַקטאַווייט די לינקס. אַזוי צו זיין זיכער, אין אַדישאַן צו aria-disabled="true", אויך אַרייַננעמען אַ tabindex="-1"אַטריביוט אויף די פֿאַרבינדונגען צו פאַרמייַדן זיי פון ריסיווינג קלאַוויאַטור פאָקוס, און נוצן מנהג דזשאַוואַסקריפּט צו דיסייבאַל זייער פאַנגקשאַנאַליטי בעסאַכאַקל.

פאַרשפּאַרן קנעפּלעך

שאַפֿן אָפּרופיק סטאַקס פון פול-ברייט "בלאָק קנעפּלעך" ווי די אין Bootstrap 4 מיט אַ מישן פון אונדזער אַרויסווייַזן און ריס יוטילאַטיז. דורך ניצן יוטילאַטיז אַנשטאָט פון קנעפּל ספּעציפיש קלאסן, מיר האָבן פיל מער קאָנטראָל איבער ספּייסינג, אַליינמאַנט און אָפּרופיק ביכייוויערז.

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

דאָ מיר מאַכן אַ אָפּרופיק ווערייישאַן, סטאַרטינג מיט ווערטיקלי סטאַקט קנעפּלעך ביז די mdברייקפּוינט, ווו .d-md-blockריפּלייסיז די .d-gridקלאַס, אַזוי נאַליפיינג די gap-2נוצן. רעסיזע דיין בלעטערער צו זען זיי טוישן.

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

איר קענען סטרויערן די ברייט פון דיין בלאָק קנעפּלעך מיט גריד זייַל ברייט קלאסן. למשל, פֿאַר אַ האַלב-ברייט "בלאָק קנעפּל", נוצן .col-6. צענטער עס כאָריזאַנטאַלי מיט .mx-autoאויך.

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

נאָך יוטילאַטיז קענען זיין געוויינט צו סטרויערן די אַליינמאַנט פון קנעפּלעך ווען האָריזאָנטאַל. דאָ מיר האָבן גענומען אונדזער פריערדיקן אָפּרופיק בייַשפּיל און צוגעגעבן עטלעכע פלעקס יוטילאַטיז און אַ גרענעץ נוצן אויף די קנעפּל צו רעכט ייַנרייען די קנעפּלעך ווען זיי זענען ניט מער סטאַקט.

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

קנעפּל פּלוגין

די קנעפּל פּלוגין אַלאַוז איר צו שאַפֿן פּשוט אויף / אַוועק טאַגאַל קנעפּלעך.

וויסואַללי, די טאַגאַל קנעפּלעך זענען יידעניקאַל צו די טשעקקבאָקס טאַגאַל קנעפּלעך . אָבער, זיי זענען קאַנווייד דיפערענטלי דורך אַסיסטאַטיוו טעקנאַלאַדזשיז: די טשעקקבאָקס טאַגאַל וועט זיין מודיע דורך פאַרשטעלן לייענער ווי "אָפּגעשטעלט" / "ניט אָפּגעשטעלט" (ווייַל, טראָץ זייער אויסזען, זיי זענען פאַנדאַמענטאַלי נאָך טשעקקבאָקסעס), כאָטש די טאַגאַל קנעפּלעך וועט זיין מודיע ווי "קנעפּל" / "קנעפּל געדריקט". די ברירה צווישן די צוויי אַפּראָוטשיז וועט אָפענגען אויף די טיפּ פון טאַגאַל איר שאַפֿן, און צי די טאַגאַל וועט זיין זינען פֿאַר יוזערז ווען מודיע ווי אַ טשעקקבאָקס אָדער ווי אַ פאַקטיש קנעפּל.

באַשטימען שטאַטן

לייג צו באַשטימען די שטאַט data-bs-toggle="button"פון אַ קנעפּל . activeאויב איר פאַר - טאַגאַלינג אַ קנעפּל, איר מוזן מאַניואַלי לייגן די .activeקלאַס און aria-pressed="true" צו ענשור אַז עס איז קאַנווייד אַפּראָופּרייטלי צו אַסיסטיוו טעקנאַלאַדזשיז.

<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>
<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 href="#" class="btn btn-primary disabled" tabindex="-1" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>

מעטהאָדס

איר קענען מאַכן אַ קנעפּל בייַשפּיל מיט די קנעפּל קאַנסטראַקטער, למשל:

var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)
מעטאָד באַשרייַבונג
toggle טאַגאַלז שטופּן שטאַט. גיט דעם קנעפּל די אויסזען אַז עס איז אַקטיווייטיד.
dispose דיסטרויז אַן עלעמענט ס קנעפּל. (רימוווז סטאָרד דאַטן אויף די DOM עלעמענט)
getInstance סטאַטיק אופֿן וואָס אַלאַוז איר צו באַקומען די קנעפּל בייַשפּיל פארבונדן צו אַ DOM עלעמענט, איר קענען נוצן עס ווי דאָס:bootstrap.Button.getInstance(element)
getOrCreateInstance סטאַטיק אופֿן וואָס קערט אַ קנעפּל בייַשפּיל פֿאַרבונדן צו אַ DOM עלעמענט אָדער שאַפֿן אַ נייַע אין פאַל עס איז נישט ינישאַלייזד. איר קענען נוצן עס ווי דאָס:bootstrap.Button.getOrCreateInstance(element)

פֿאַר בייַשפּיל, צו באַשטימען אַלע קנעפּלעך

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

סאַס

וועריאַבאַלז

$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%;

מיקסינס

עס זענען דריי מיקסינס פֿאַר קנעפּלעך: קנעפּל און קנעפּל אַוטליין וואַריאַנט מיקסינס (ביידע באזירט אויף $theme-colors), פּלוס אַ קנעפּל גרייס מיקסין.

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

שלייף

קנעפּל וועריאַנץ (פֿאַר רעגולער און אַוטליין קנעפּלעך) נוצן זייער ריספּעקטיוו מיקסינס מיט אונדזער $theme-colorsמאַפּע צו דזשענערייט די מאָדיפיער קלאסן אין 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);
  }
}