Ομάδες εισόδου Bootstrap 5

Ομάδα Εισαγωγής

.input-group Η κλάση είναι ένας κουτί, το οποίο ενισχύει την εισαγωγή κειμένου προσθέτοντας εικονίδια, κείμενο ή κουμπιά πριν ή μετά το πεδίο εισαγωγής ως "βοηθητικό κείμενο".

Για να ρυθμίσετε το στυλ συγκεκριμένου βοηθητικού κειμένου, χρησιμοποιήστε .input-group-text Κατηγορία:

Παράδειγμα

<form>
  <div class="input-group">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="Όνομα χρήστη">
  </div>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Ο ηλεκτρονικός σας ταχυδρομείς">
    <span class="input-group-text">@example.com</span>
  </div>
</form>

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

Μέγεθος ομάδας εισαγωγής

Παρακαλώ μεταφέρετε .input-group-sm Η κλάση χρησιμοποιείται για μικρά σύνολα εισαγωγής, θα .input-group-lg Χρησιμοποιείται για μεγάλα σύνολα εισαγωγής:

Παράδειγμα

<div class="input-group mb-3 input-group-sm">
   <span class="input-group-text">Μικρό</span>
  <input type="text" class="form-control">
</div>
<div class="input-group mb-3">
  <span class="input-group-text">Προεπιλεγμένο</span>
  <input type="text" class="form-control">>
</div>
<div class="input-group mb-3 input-group-lg">
  <span class="input-group-text">Μεγάλο</span>
  <input type="text" class="form-control">
</div>

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

Πολλαπλές εισαγωγές και βοηθοί

Προσθέστε πολλαπλά ελέγχματα εισαγωγής ή προσθέματα:

Παράδειγμα

<!-- Πολλαπλά ελέγχματα εισαγωγής -->
<div class="input-group mb-3">
  <span class="input-group-text">Όνομα</span>
  <input type="text" class="form-control" placeholder="Επώνυμο">
  <input type="text" class="form-control" placeholder="Όνομα">
</div>
<!-- Πολλαπλά προσθέματα/κείμενο βοήθειας -->
<div class="input-group mb-3">
  <span class="input-group-text">Ένα</span>
  <span class="input-group-text">Δύο</span>
  <span class="input-group-text">Τρεις</span>
  <input type="text" class="form-control">
</div>

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

Εισαγωγή με κουμπιά επιλογής και κουμπιά επιλογής

Μπορείτε επίσης να χρησιμοποιήσετε κουμπιά επιλογής ή κουμπιά επιλογής για να αντικαταστήσετε κείμενο:

Παράδειγμα

<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="checkbox">
  </div>
  <input type="text" class="form-control" placeholder="Κάποιο κείμενο">
</div>
<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="radio">
  </div>
  <input type="text" class="form-control" placeholder="Κάποιο κείμενο">
</div>

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

Εισαγωγή κουμπιών

Παράδειγμα

<div class="input-group mb-3">
  <button class="btn btn-outline-primary" type="button">Βασικό κουμπί</button>
  <input type="text" class="form-control" placeholder="Κάποιο κείμενο">
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Αναζήτηση">
  <button class="btn btn-success" type="submit">Πηγαίνετε</button>
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Κάποιο κείμενο">
  <button class="btn btn-primary" type="button">ΌΚ</button>
  <button class="btn btn-danger" type="button">Ακύρωση</button>
</div>

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

Ομάδα εισαγωγής με κουμπί αναπτυξιμότητας

Προσθέστε κουμπί αναπτυξιμότητας στην ομάδα εισαγωγής. Προσέξτε ότι δεν χρειάζεται να χρησιμοποιείτε το κουτί 包装 της .dropdown όπως συνήθως.

Παράδειγμα

<div class="input-group mt-3 mb-3">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Κουμπί αναπτυξιμότητας
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Σύνδεσμος 1</a></li>
    <li><a class="dropdown-item" href="#">Σύνδεσμος 2</a></li>
    <li><a class="dropdown-item" href="#">Σύνδεσμος 3</a></li>
  </ul>
  <input type="text" class="form-control" placeholder="Όνομα χρήστη">
</div>

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