Λίστα Πτώσεως Bootstrap 5

Βασικό Μενού Πτώσεως

Το μενού πτώσεως είναι ένα ανακινουμενό μενού που επιτρέπει στον χρήστη να επιλέξει τιμή από μια προκαθορισμένη λίστα:

Παράδειγμα

<div class="dropdown">
  <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>
</div>

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

Παράδειγμα Επεξήγησης

.dropdown κλάσμα που δείχνει το μενού πτώσεως.

Για να ανοίξετε το μενού πτώσεως, χρησιμοποιήστε το .dropdown-toggle κλάση και data-toggle="dropdown" με την ιδιότητα

του κουμπιού ή του συνδέσμου .dropdown-menu κλάση στο <div> στοιχεία, που μπορούν να δημιουργήσουν πραγματικά το μενού αναρτήσεων. Στη συνέχεια, προσθέστε την κλάση .dropdown-item Προσθέστε την κλάση σε κάθε στοιχείο του μενού αναρτήσεων (συνδέσμους ή κουμπιά).

Διαχωριστικό αναρτημένης λίστας

.dropdown-divider κλάση για να διαιρέσετε τα στοιχεία του μενού αναρτήσεων με οριζόντια λεπτή γραμμή:

Παράδειγμα

<li><hr class="dropdown-divider"></hr></li>

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

Τίτλος αναρτημένης λίστας

.dropdown-header κλάση για να προσθέσετε τίτλους στο μενού αναρτήσεων:

Παράδειγμα

<li><h5 class="dropdown-header">Τίτλος αναρτημένης λίστας 1</h5></li>

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

απενεργοποιημένα και ενεργά στοιχεία

Χρησιμοποιήστε .active κλάση για να επισημάνετε το συγκεκριμένο στοιχείο αναρτήσεων (προσθέστε το μπλε χρώμα φόντου).

Για να απενεργοποιήσετε ένα στοιχείο του μενού αναρτήσεων, χρησιμοποιήστε .disabled κλάση (παντού όταν είναι επιλεγμένο, αποκτά αχνό γκρι χρώμα κειμένου και το εικονίδιο "no-parking-sign").

Παράδειγμα

<li><a class="dropdown-item" href="#">Τυπικό</a></li>
<li><a class="dropdown-item active" href="#">Ενεργό</a></li>
<li><a class="dropdown-item disabled" href="#">Απενεργοποιημένο</a></li>

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

θέση αναρτημένης λίστας

Μπορείτε επίσης να προσαρμόσετε τη .dropend ή .dropstart Προσθέστε την κλάση στο στοιχείο αναρτήσεων για να δημιουργήσετε το "dropend" ή το "dropstart" μενού. Λάβετε υπόψη ότι ο σήμας/ο δάκτυλος θα προστεθεί αυτόματα:

Dropright

<div class="dropdown dropend">

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

Dropleft

<div class="dropdown dropstart">

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

Δεξιά προσαρμογή αναρτημένης λίστας

Για να προσαρμόσετε το μενού αναρτήσεων δεξιά, προσαρμόστε .dropdown-menu-end Προσθέστε την κλάση .dropdown-menu στοιχεία:

Παράδειγμα

<div class="dropdown-menu dropdown-menu-end">

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

Αναρτημένη λίστα

Εάν επιθυμείτε να ανοίξει η μενού αναρτήσεων προς τα πάνω αντί προς τα κάτω, προσαρμόστε το στοιχείο <div> με την κλάση "dropdown" "dropup"：

Παράδειγμα

<div class="dropup">

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

Κείμενο ανακύκλωσης

.dropdown-item-text Η κλάση χρησιμοποιείται για να προσθέσει καθαρό κείμενο στις εναλλακτικές επιλογές ή για να προσθέσει προεπιλεγμένο στυλ σύνδεσης στους σύνδεσμους.

Παράδειγμα

<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>
  <li><a class="dropdown-item-text" href="#">Κείμενο σύνδεσης</a></li>
  <li><span class="dropdown-item-text">Καθαρό κείμενο</span></li>
</ul>

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

Συνδυασμός κουμπιών και ανακύκλωσης

Παράδειγμα

<div class="btn-group">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Xiaomi</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Τηλέφωνο</a></li>
      <li><a class="dropdown-item" href="#">Tablet</a></li>
    </ul>
  </div>
</div>

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

Οριζόντια συνδυασμός κουμπιών και ανακύκλωσης

Παράδειγμα

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Xiaomi</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Τηλέφωνο</a></li>
      <li><a class="dropdown-item" href="#">Tablet</a></li>
    </ul>
  </div>
</div>

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