Κουμπιά

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

Απενεργοποιήστε την αναδίπλωση κειμένου

Εάν δεν θέλετε να αναδιπλώνεται το κείμενο του κουμπιού, μπορείτε να προσθέσετε την .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>

Δημιουργήστε κουμπιά επιπέδου μπλοκ—αυτά που εκτείνονται σε όλο το πλάτος ενός γονέα—προσθέτοντας .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

Ενεργή κατάσταση

Τα κουμπιά θα εμφανίζονται πατημένα όταν είναι ενεργά με πιο σκούρο φόντο, πιο σκούρο περίγραμμα και, όταν είναι ενεργοποιημένες οι σκιές, μια ένθετη σκιά. Δεν χρειάζεται να προσθέσετε μια κλάση στο <button>s, καθώς χρησιμοποιούν μια ψευδο-κλάση . Ωστόσο, μπορείτε να εξακολουθήσετε να επιβάλλετε την ίδια ενεργή εμφάνιση με .active(και να συμπεριλάβετε το aria-pressed=“true”χαρακτηριστικό) εάν χρειαστεί να αναπαραγάγετε την κατάσταση μέσω προγραμματισμού.

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

Κατάσταση αναπηρίας

Κάντε τα κουμπιά να φαίνονται ανενεργά προσθέτοντας το disabledχαρακτηριστικό boolean σε οποιοδήποτε <button>στοιχείο.

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

Προσθήκη κουμπιού

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

Εναλλαγή καταστάσεων

Προσθήκη data-toggle="button"για εναλλαγή της κατάστασης ενός κουμπιού active. Εάν κάνετε προεναλλαγή ενός κουμπιού, πρέπει να προσθέσετε μη αυτόματα την .activeκλάση και aria-pressed="true" στο <button>.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  Single toggle
</button>

Πλαίσιο ελέγχου και κουμπιά επιλογής

Τα στυλ του Bootstrap .buttonμπορούν να εφαρμοστούν σε άλλα στοιχεία, όπως το <label>s, για να παρέχουν το πλαίσιο ελέγχου ή την εναλλαγή κουμπιού στυλ ραδιοφώνου. Προσθέστε data-toggle="buttons"σε ένα .btn-groupπου περιέχει αυτά τα τροποποιημένα κουμπιά για να ενεργοποιήσετε τη συμπεριφορά εναλλαγής τους μέσω JavaScript και προσθέστε .btn-group-toggleστο στυλ τα <input>s μέσα στα κουμπιά σας. Σημειώστε ότι μπορείτε να δημιουργήσετε μεμονωμένα κουμπιά με τροφοδοσία εισόδου ή ομάδες από αυτά.

Η επιλεγμένη κατάσταση για αυτά τα κουμπιά ενημερώνεται μόνο μέσω clickσυμβάντος στο κουμπί. Εάν χρησιμοποιείτε άλλη μέθοδο για να ενημερώσετε την είσοδο —π.χ. με <input type="reset">ή εφαρμόζοντας με μη αυτόματο τρόπο την checkedιδιότητα της εισαγωγής—θα χρειαστεί να κάνετε εναλλαγή .activeστη <label>μη αυτόματη.

Σημειώστε ότι τα προεπιλεγμένα κουμπιά απαιτούν από εσάς να προσθέσετε χειροκίνητα την .activeκλάση στην είσοδο <label>.

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> Checked
  </label>
</div>

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

Μέθοδοι