Κουμπιά Bootstrap 5

Στυλ κουμπιών

Bootstrap 5 παρέχει διαφορετικούς τύπους κουμπιών:

Παράδειγμα

<button type="button" class="btn">Βασικό</button>
<button type="button" class="btn btn-primary">Κύριο</button>
<button type="button" class="btn btn-secondary">Δευτερεύον</button>
<button type="button" class="btn btn-success">Επιτυχία</button>
<button type="button" class="btn btn-info">Πληροφορία</button>
<button type="button" class="btn btn-warning">Προειδοποίηση</button>
<button type="button" class="btn btn-danger">Κίνδυνος</button>
<button type="button" class="btn btn-dark">Ασκορπιασμένο</button>
<button type="button" class="btn btn-light">Φωτεινό</button>
<button type="button" class="btn btn-link">Σύνδεση</button>

Δοκιμάστε το προσωπικά

Η κλάση κουμπιών μπορεί να χρησιμοποιηθεί <a>、<button> ή <input> Στοιχεία:

Παράδειγμα

<a href="#" class="btn btn-success">Κουμπί Σύνδεσης</a>
<button type="button" class="btn btn-success">Κουμπί</button>
<input type="button" class="btn btn-success" value="Εισαγωγή">
<input type="submit" class="btn btn-success" value="Υποβολή">
<input type="reset" class="btn btn-success" value="Αναπομπή">

Δοκιμάστε το προσωπικά

Γιατί γράφουμε ένα # στο atributo href του σύνδεσμου;

Επειδή δεν έχουμε καμία σελίδα που μπορεί να συνδεθεί και δεν θέλουμε να λάβουμε το μήνυμα "404", χρησιμοποιούμε το # ως σύνδεσμο. Στη πραγματικότητα, θα ήταν η πραγματική URL της σελίδας "Αναζήτηση".

Κουμπιά προφίλ

Το Bootstrap 5 παρέχει επίσης οκτώ κουμπιά προφίλ/περιθωρίου.

Μετακινήστε το ποντίκι σας πάνω τους, για να δείτε τις επιπλέον "hover" ενέργειες:

Παράδειγμα

<button type="button" class="btn btn-outline-primary">Κύριο</button>
<button type="button" class="btn btn-outline-secondary">Δευτερεύον</button>
<button type="button" class="btn btn-outline-success">Επιτυχία</button>
<button type="button" class="btn btn-outline-info">Πληροφορία</button>
<button type="button" class="btn btn-outline-warning">Προειδοποίηση</button>
<button type="button" class="btn btn-outline-danger">Κίνδυνος</button>
<button type="button" class="btn btn-outline-dark">Σκοτεινό</button>
<button type="button" class="btn btn-outline-light text-dark">Φωτεινό</button>

Δοκιμάστε το προσωπικά

Μέγεθος κουμπιού

Χρησιμοποιείται για μεγάλα κουμπιά .btn-lg Κλάση, χρησιμοποιείται για μικρά κουμπιά .btn-sm Κλάση:

Παράδειγμα

<button type="button" class="btn btn-primary btn-lg">Μεγάλο</button>
<button type="button" class="btn btn-primary">Προεπιλεγμένο</button>
<button type="button" class="btn btn-primary btn-sm">Μικρό</button>

Δοκιμάστε το προσωπικά

Μπλοκουό κουμπί

Για να δημιουργήσετε ένα μπλοκουό κουμπί που καλύπτει ολόκληρη τη πλάτος του γονικού στοιχείου, χρησιμοποιήστε στο γονικό στοιχείο .d-grid Κλάση "helper":

Παράδειγμα

<div class="d-grid">
  <button type="button" class="btn btn-primary btn-block">Κουμπί Πλήρους Πλάθου</button>
</div>

Δοκιμάστε το προσωπικά

Αν έχετε πολλά κουμπιά μπλοκ, μπορείτε να χρησιμοποιήσετε .gap-* Η κλάση ελέγχει το διαστήμα μεταξύ τους:

Παράδειγμα

<div class="d-grid gap-3">
  <button type="button" class="btn btn-primary btn-block">Κουμπί Πλήρους Πλάθου</button>
  <button type="button" class="btn btn-primary btn-block">Κουμπί Πλήρους Πλάθου</button>
  <button type="button" class="btn btn-primary btn-block">Κουμπί Πλήρους Πλάθου</button>
</div>

Δοκιμάστε το προσωπικά

Ενεργοποιημένο/Απενεργοποιημένο Κουμπί

Το κουμπί μπορεί να ρυθμιστεί σε κατάσταση ενεργοποίησης (εμφανίζεται σαν να έχει πατηθεί) ή απενεργοποίησης (μη κλικέψιμο):

κλάση .active για να κάνει το κουμπί να εμφανίζεται σαν να έχει πατηθεί, ενώ disabled Η ιδιότητα κάνει το κουμπί μη κλικέψιμο. Σημειώστε ότι το στοιχείο <a> δεν υποστηρίζει την ιδιότητα disabled, οπότε πρέπει να χρησιμοποιηθεί .disabled Η κλάση την καθιστά οπτικά αενεργή.

Παράδειγμα

<button type="button" class="btn btn-primary active">Πρωταρχικός με Ενεργοποίηση</button>
<button type="button" class="btn btn-primary" disabled>Πρωταρχικός με Απενεργοποίηση</button>
<a href="#" class="btn btn-primary disabled">Συνδέσμος με Απενεργοποίηση</a>

Δοκιμάστε το προσωπικά

Κουμπιά Φορτωστών

Μπορείτε επίσης να προσθέσετε "spinner" στο κουμπί, και θα μάθετε περισσότερα από την οδηγία μας για τον BS5 Spinner:

Παράδειγμα

<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
  Φόρτωση...
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm"></span>
  Φόρτωση...
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-grow spinner-grow-sm"></span>
  Φόρτωση...
</button>

Δοκιμάστε το προσωπικά