in English

Κουμπιά

Χρησιμοποιήστε τα προσαρμοσμένα στυλ κουμπιών του 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>ή <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χαρακτηριστικό boolean σε οποιοδήποτε <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>

Μπορούν να χρησιμοποιηθούν πρόσθετα βοηθητικά προγράμματα για τη ρύθμιση της ευθυγράμμισης των κουμπιών σε οριζόντια θέση. Εδώ έχουμε πάρει το προηγούμενο αποκρινόμενο παράδειγμα μας και προσθέσαμε μερικά βοηθητικά προγράμματα flex και ένα βοηθητικό πρόγραμμα περιθωρίου στο κουμπί για να ευθυγραμμιστούν δεξιά τα κουμπιά όταν δεν είναι πλέον στοιβαγμένα.

<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()
})

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