כפתורים
השתמש בסגנונות הכפתורים המותאמים אישית של Bootstrap עבור פעולות בטפסים, בדיאלוגים ועוד עם תמיכה במספר גדלים, מצבים ועוד.
דוגמאות
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>
or <input>
elements (אם כי דפדפנים מסוימים עשויים להחיל עיבוד מעט שונה).
בעת שימוש במחלקות לחצנים <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
כפתורי העוגן. - לחצנים מושבתים שמשתמשים
<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"
תכונה בקישורים האלה כדי למנוע מהם לקבל מיקוד במקלדת, והשתמש ב-JavaScript מותאם אישית כדי להשבית את הפונקציונליות שלהם לחלוטין.
<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);
}
}