קנעפּלעך
ניצן 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>
ס טאָן ניט שטיצן דעםdisabled
אַטריביוט, אַזוי איר מוזן לייגן דעם.disabled
קלאַס צו מאַכן עס וויזשוואַלי דערשייַנען פאַרקריפּלט.- עטלעכע צוקונפֿט-פרייַנדלעך סטיילז זענען אַרייַנגערעכנט צו דיסייבאַל אַלע
pointer-events
אויף אַנקער קנעפּלעך. - פאַרקריפּלט קנעפּלעך ניצן
<a>
זאָל אַרייַננעמען דיaria-disabled="true"
אַטריביוט צו אָנווייַזן די שטאַט פון די עלעמענט צו אַסיסטיוו טעקנאַלאַדזשיז. - ניצן די פאַרקריפּלט קנעפּלעך
<a>
זאָל נישט אַרייַננעמען די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>
לינק פאַנגקשאַנאַליטי קייוויאַט
צו דעקן קאַסעס ווען איר האָבן צו האַלטן די href
אַטריביוט אויף אַ פאַרקריפּלט לינק, די .disabled
קלאַס ניצט pointer-events: none
צו פּרובירן צו דיסייבאַל די לינק פאַנגקשאַנאַליטי פון <a>
s. באַמערקונג אַז דעם CSS פאַרמאָג איז נישט נאָך סטאַנדערדייזד פֿאַר HTML, אָבער אַלע מאָדערן בראַוזערז שטיצן עס. אין אַדישאַן, אפילו אין בראַוזערז וואָס שטיצן pointer-events: none
, קלאַוויאַטור נאַוויגאַציע בלייבט אַנאַפעקטיד, טייַטש אַז סייטיד קלאַוויאַטור יוזערז און יוזערז פון אַסיסטאַטיוו טעקנאַלאַדזשיז קענען נאָך אַקטאַווייט די לינקס. אַזוי צו זיין זיכער, אין אַדישאַן צו aria-disabled="true"
, אויך אַרייַננעמען אַ 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>
פאַרשפּאַרן קנעפּלעך
שאַפֿן אָפּרופיק סטאַקס פון פול-ברייט, "בלאָק קנעפּלעך" ווי די אין 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 class="btn btn-primary disabled" 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);
}
}