��פתורים

השתמש בסגנונות הכפתורים המותאמים אישית של Bootstrap עבור פעולות בטפסים, בדיאלוגים ועוד עם תמיכה במספר גדלים, מצבים ועוד.

בעמוד זה

דוגמאות

Bootstrap כולל מספר סגנונות כפתורים מוגדרים מראש, כל אחד משרת את המטרה הסמנטית שלו, עם כמה תוספות שהוכנסו לשליטה רבה יותר.

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>

העברת משמעות לטכנולוגיות מסייעות

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

השבת גלישת טקסט

אם אינך רוצה שהטקסט של הכפתור יתעטף, תוכל להוסיף את .text-nowrapהכיתה לכפתור. ב-Sass, אתה יכול להגדיר $btn-white-space: nowrapלהשבית גלישת טקסט עבור כל כפתור.

תגי כפתור

השיעורים .btnמיועדים לשימוש עם <button>האלמנט. עם זאת, אתה יכול גם להשתמש במחלקות אלה על <a>או <input>באלמנטים (אם כי דפדפנים מסוימים עשויים להחיל עיבוד מעט שונה).

בעת שימוש במחלקות לחצנים <a>באלמנטים המשמשים להפעלת פונקציונליות בתוך הדף (כמו תוכן מתמוטט), במקום קישור לדפים או קטעים חדשים בדף הנוכחי, יש לתת קישורים אלה role="button"כדי להעביר כראוי את מטרתם לטכנולוגיות מסייעות כגון קוראי מסך.

קישור

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

כפתורי מתאר

צריך כפתור, אבל לא את צבעי הרקע הכבדים שהם מביאים? החלף את מחלקות השינוי המוגדרות כברירת מחדל .btn-outline-*באלו כדי להסיר את כל תמונות הרקע והצבעים בכל לחצן.

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>

חלק מסגנונות הכפתורים משתמשים בצבע קדמי בהיר יחסית, ויש להשתמש בהם רק על רקע כהה על מנת לקבל ניגודיות מספקת.

מידות

בא לכם על כפתורים גדולים או קטנים יותר? הוסף .btn-lgאו .btn-smלגדלים נוספים.

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>

אתה יכול אפילו לגלגל גודל מותאם אישית משלך עם משתני 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>

מצב נכה

לגרום ללחצנים להיראות לא פעילים על ידי הוספת disabledהתכונה הבוליאנית לכל <button>אלמנט. לחצנים מושבתים pointer-events: noneהוחלו, ומונעים הפעלת ריחוף ומצבים פעילים.

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>

כפתורים מושבתים המשתמשים <a>באלמנט מתנהגים קצת אחרת:

<a>s אינם תומכים disabledבתכונה, לכן עליך להוסיף את .disabledהמחלקה כדי לגרום לה להיראות חזותית מושבתת.
כמה סגנונות ידידותיים לעתיד כלולים כדי להשבית את כל pointer-eventsכפתורי העוגן.
לחצנים מושבתים שמשתמשים <a>בהם צריכים לכלול את aria-disabled="true"התכונה כדי לציין את מצב האלמנט לטכנולוגיות מסייעות.
לחצנים מושבתים שבהם משתמשים <a> לא אמורים לכלול את hrefהתכונה.

קישור ראשי קישור

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>

אזהרת פונקציונליות קישור

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

קישור ראשי קישור

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>

לחצני חסימה

צור ערימות רספונסיביות של "לחצני חסימה" ברוחב מלא כמו אלה ב-Bootstrap 4 עם שילוב של כלי העזר שלנו לתצוגה ולפער. על ידי שימוש בכלי עזר במקום במחלקות ספציפיות ללחצנים, יש לנו שליטה רבה יותר על ריווח, יישור והתנהגויות תגובה.

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>

כאן אנו יוצרים וריאציה רספונסיבית, החל מכפתורים מוערמים אנכית עד mdלנקודת הפסיקה, שבה .d-md-blockמחליפה את .d-gridהמחלקה, ובכך מבטלת את gap-2השירות. שנה את גודל הדפדפן שלך כדי לראות אותם משתנים.

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>

אתה יכול להתאים את הרוחב של לחצני הבלוק שלך עם מחלקות רוחב עמודות רשת. לדוגמה, עבור "לחצן חסימה" ברוחב חצי, השתמש .col-6. מרכז אותו אופקית .mx-autoגם עם .

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>

ניתן להשתמש בכלי עזר נוספים כדי להתאים את יישור הלחצנים כשהם אופקיים. כאן לקחנו את הדוגמה המגיבה הקודמת שלנו והוספנו כמה כלי עזר להגמישות ושירות שוליים על הכפתור כדי ליישר ימינה את הכפתורים כשהם כבר לא מוערמים.

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>

תוסף כפתור

תוסף הכפתורים מאפשר לך ליצור כפתורי הפעלה/כיבוי פשוטים.

מבחינה ויזואלית, לחצני החלפה אלו זהים ללחצני החלפת תיבת הסימון . עם זאת, הם מועברים בצורה שונה על ידי טכנולוגיות מסייעות: מתגי הסימון יוכרזו על ידי קוראי המסך כ"מסומנים"/"לא מסומנים" (מכיוון שלמרות המראה שלהם, הם ביסודו של דבר עדיין תיבות סימון), בעוד שכפתורי החלפת אלו יוכרזו ככאלה "לחצן"/"לחצן לחוץ". הבחירה בין שתי הגישות הללו תהיה תלויה בסוג החלפת הלחצן שאתה יוצר, והאם המעבר יהיה הגיוני למשתמשים כאשר הוכרז כתיבת סימון או ככפתור בפועל.

החלף מצבים

הוסף data-bs-toggle="button"כדי להחליף מצב של כפתור active. אם אתה מחליף לחצן מראש, עליך להוסיף את .activeהכיתה באופן ידני וכדי aria-pressed="true" להבטיח שהיא מועברת כראוי לטכנולוגיות מסייעות.

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>

החלף קישור קישור הפעלה פעיל קישור החלפה מושבת

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>

שיטות

אתה יכול ליצור מופע לחצנים עם בנאי הכפתורים, לדוגמה:

const bsButton = new bootstrap.Button('#myButton')

שיטה	תיאור
`dispose`	הורס כפתור של אלמנט. (מסיר נתונים מאוחסנים ברכיב ה-DOM)
`getInstance`	שיטה סטטית המאפשרת לך לקבל את מופע הכפתור המשויך לרכיב DOM, אתה יכול להשתמש בה כך: `bootstrap.Button.getInstance(element)`.
`getOrCreateInstance`	שיטה סטטית המחזירה מופע לחצן המשויך לרכיב DOM או יצירת אחד חדש למקרה שהוא לא אותחל. אתה יכול להשתמש בו כך: `bootstrap.Button.getOrCreateInstance(element)`.
`toggle`	מחליף מצב דחיפה. נותן לכפתור את המראה שהוא הופעל.

לדוגמה, כדי להחליף את כל הכפתורים

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

CSS

משתנים

נוסף בגרסה 5.2.0

כחלק מגישת משתני ה-CSS המתפתחת של Bootstrap, כפתורים משתמשים כעת במשתני CSS מקומיים .btnלהתאמה אישית משופרת בזמן אמת. ערכים עבור משתני ה-CSS נקבעים באמצעות Sass, כך שגם התאמה אישית של Sass עדיין נתמכת.

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

כל .btn-*מחלקה משנה מעדכנת את משתני ה-CSS המתאימים כדי למזער כללי CSS נוספים עם button-variant(), button-outline-variant(), ו- button-size()mixins שלנו.

הנה דוגמה לבניית .btn-*מחלקה מותאמת אישית כמו שאנחנו עושים עבור הכפתורים הייחודיים למסמכים שלנו על ידי הקצאה מחדש של משתני ה-CSS של Bootstrap עם תערובת של משתני ה-CSS וה-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%)};
}

משתנים 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%;

מיקסינים סאסים

ישנם שלושה מיקסים ללחצנים: מיקסים של כפתור וכפתור מתאר וריאציות (שניהם מבוססים על $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)
) {
  --#{$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};
}

לולאות סאס

גרסאות לחצנים (עבור כפתורים רגילים וכפתורי מתאר) משתמשים במיקסים המתאימים שלהם עם $theme-colorsהמפה שלנו כדי ליצור את מחלקות השינוי ב 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);
  }
}