in English

Αναπτυσσόμενα

Εναλλάξτε τις επικαλύψεις με βάση τα συμφραζόμενα για την εμφάνιση λιστών συνδέσμων και άλλων με την αναπτυσσόμενη προσθήκη Bootstrap.

Σε αυτήν την σελίδα

ΣΦΑΙΡΙΚΗ ΕΙΚΟΝΑ

Τα αναπτυσσόμενα μενού είναι εναλλάξιμα, επικαλύψεις με βάση τα συμφραζόμενα για την εμφάνιση λιστών συνδέσμων και πολλά άλλα. Γίνονται διαδραστικά με το αναπτυσσόμενο πρόσθετο JavaScript Bootstrap που περιλαμβάνεται. Εναλλάσσονται κάνοντας κλικ, όχι με το αιώρηση. αυτή είναι μια σκόπιμη απόφαση σχεδιασμού .

Τα αναπτυσσόμενα μενού είναι χτισμένα σε μια βιβλιοθήκη τρίτου μέρους, την Popper , η οποία παρέχει δυναμική τοποθέτηση και ανίχνευση θυρών προβολής. Φροντίστε να συμπεριλάβετε το popper.min.js πριν από την JavaScript του Bootstrap ή χρησιμοποιήστε το bootstrap.bundle.min.js/ bootstrap.bundle.jsπου περιέχει Popper. Το Popper δεν χρησιμοποιείται για την τοποθέτηση αναπτυσσόμενων στοιχείων σε γραμμές πλοήγησης, αν και δεν απαιτείται δυναμική τοποθέτηση.

Προσιτότητα

Το πρότυπο WAI ARIA ορίζει ένα πραγματικό role="menu"γραφικό στοιχείο , αλλά αυτό είναι συγκεκριμένο για μενού που μοιάζουν με εφαρμογές που ενεργοποιούν ενέργειες ή λειτουργίες. Τα μενού ARIA μπορούν να περιέχουν μόνο στοιχεία μενού, στοιχεία μενού πλαισίου ελέγχου, στοιχεία μενού κουμπιών επιλογής, ομάδες κουμπιών επιλογής και υπομενού.

Τα αναπτυσσόμενα μενού του Bootstrap, από την άλλη πλευρά, έχουν σχεδιαστεί για να είναι γενικά και να εφαρμόζονται σε μια ποικιλία καταστάσεων και δομών σήμανσης. Για παράδειγμα, είναι δυνατό να δημιουργηθούν αναπτυσσόμενα μενού που περιέχουν πρόσθετες εισόδους και στοιχεία ελέγχου φορμών, όπως πεδία αναζήτησης ή φόρμες σύνδεσης. Για αυτόν τον λόγο, το Bootstrap δεν αναμένει (ούτε προσθέτει αυτόματα) κανένα από τα χαρακτηριστικά roleκαι aria-που απαιτούνται για τα πραγματικά μενού ARIA . Οι συγγραφείς θα πρέπει να συμπεριλάβουν οι ίδιοι αυτά τα πιο συγκεκριμένα χαρακτηριστικά.

Ωστόσο, το Bootstrap προσθέτει ενσωματωμένη υποστήριξη για τις περισσότερες τυπικές αλληλεπιδράσεις μενού πληκτρολογίου, όπως τη δυνατότητα μετακίνησης σε μεμονωμένα .dropdown-itemστοιχεία χρησιμοποιώντας τα πλήκτρα του δρομέα και το κλείσιμο του μενού με το ESCπλήκτρο.

Παραδείγματα

Τυλίξτε την εναλλαγή του αναπτυσσόμενου μενού (το κουμπί ή ο σύνδεσμός σας) και το αναπτυσσόμενο μενού εντός .dropdownή σε άλλο στοιχείο που δηλώνει position: relative;. Τα αναπτυσσόμενα μενού μπορούν να ενεργοποιηθούν από <a>ή <button>στοιχεία για να ταιριάζουν καλύτερα στις πιθανές ανάγκες σας. Τα παραδείγματα που εμφανίζονται εδώ χρησιμοποιούν σημασιολογικά <ul>στοιχεία όπου χρειάζεται, αλλά υποστηρίζεται η προσαρμοσμένη σήμανση.

Μονό κουμπί

Οποιοδήποτε single .btnμπορεί να μετατραπεί σε αναπτυσσόμενο εναλλαγή με ορισμένες αλλαγές σήμανσης. Δείτε πώς μπορείτε να τα θέσετε σε λειτουργία με οποιοδήποτε από τα δύο <button>στοιχεία:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Και με <a>στοιχεία:

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Το καλύτερο μέρος είναι ότι μπορείτε να το κάνετε αυτό με οποιαδήποτε παραλλαγή κουμπιού, επίσης:

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

Κουμπί διαίρεσης

Ομοίως, δημιουργήστε αναπτυσσόμενα μενού διαχωρισμού κουμπιών με σχεδόν την ίδια σήμανση με τα αναπτυσσόμενα μενού με ένα κουμπί, αλλά με την προσθήκη του .dropdown-toggle-splitγια σωστή απόσταση γύρω από το αναπτυσσόμενο πλαίσιο.

Χρησιμοποιούμε αυτήν την επιπλέον κατηγορία για να μειώσουμε την οριζόντια paddingκαι στις δύο πλευρές του κουμπιού κατά 25% και να αφαιρέσουμε τα margin-leftπου προστίθενται για τα κανονικά αναπτυσσόμενα κουμπιά. Αυτές οι πρόσθετες αλλαγές κρατούν το καρέ στο κέντρο στο κουμπί διαχωρισμού και παρέχουν μια περιοχή χτυπήματος πιο κατάλληλου μεγέθους δίπλα στο κύριο κουμπί.

<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

Κόλλα

Τα αναπτυσσόμενα κουμπιά λειτουργούν με κουμπιά όλων των μεγεθών, συμπεριλαμβανομένων των αναπτυσσόμενων κουμπιών προεπιλογής και διαχωρισμού.

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Large button
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  </button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Small button
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  </button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Σκούρα αναπτυσσόμενα μενού

Επιλέξτε πιο σκούρα αναπτυσσόμενα μενού για να ταιριάξετε με μια σκοτεινή γραμμή πλοήγησης ή ένα προσαρμοσμένο στυλ προσθέτοντας .dropdown-menu-darkσε ένα υπάρχον .dropdown-menu. Δεν απαιτούνται αλλαγές στα αναπτυσσόμενα στοιχεία.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
    <li><a class="dropdown-item active" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

Και η χρήση του σε μια γραμμή πλοήγησης:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Κατευθύνσεις

RTL

Οι οδηγίες αντικατοπτρίζονται όταν χρησιμοποιείτε το Bootstrap στο RTL, που σημαίνει ότι .dropstartθα εμφανίζονται στη δεξιά πλευρά.

Dropup

Ενεργοποιήστε τα αναπτυσσόμενα μενού πάνω από τα στοιχεία προσθέτοντας .dropupστο γονικό στοιχείο.

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Dropright

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

<!-- Default dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropright
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary">
    Split dropend
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropright</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Dropleft

Ενεργοποιήστε τα αναπτυσσόμενα μενού στα αριστερά των στοιχείων προσθέτοντας .dropstartστο γονικό στοιχείο.

<!-- Default dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropstart button -->
<div class="btn-group">
  <div class="btn-group dropstart" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
      <span class="visually-hidden">Toggle Dropstart</span>
    </button>
    <ul class="dropdown-menu">
      <!-- Dropdown menu links -->
    </ul>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

Μπορείτε να χρησιμοποιήσετε <a>ή <button>στοιχεία ως αναπτυσσόμενα στοιχεία.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

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

<ul class="dropdown-menu">
  <li><span class="dropdown-item-text">Dropdown item text</span></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>

Ενεργός

Προσθέστε .activeσε στοιχεία στο αναπτυσσόμενο μενού για να τα διαμορφώσετε ως ενεργά . Για να μεταφέρετε την ενεργή κατάσταση σε υποστηρικτικές τεχνολογίες, χρησιμοποιήστε το aria-currentχαρακτηριστικό — χρησιμοποιώντας την pageτιμή για την τρέχουσα σελίδα ή trueγια το τρέχον στοιχείο σε ένα σύνολο.

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

άτομα με ειδικές ανάγκες

Προσθέστε .disabledστα στοιχεία στο αναπτυσσόμενο μενού για να τα διαμορφώσετε ως απενεργοποιημένα .

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item disabled">Disabled link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

Από προεπιλογή, ένα αναπτυσσόμενο μενού τοποθετείται αυτόματα 100% από την κορυφή και κατά μήκος της αριστερής πλευράς του γονέα του. Μπορείτε να το αλλάξετε αυτό με τις κατευθυντήριες .drop*κατηγορίες, αλλά μπορείτε επίσης να τις ελέγξετε με πρόσθετες κατηγορίες τροποποιητών.

Προσθήκη .dropdown-menu-endστο a .dropdown-menuπρος τα δεξιά, ευθυγραμμίστε το αναπτυσσόμενο μενού. Οι οδηγίες αντικατοπτρίζονται όταν χρησιμοποιείτε το Bootstrap στο RTL, που σημαίνει ότι .dropdown-menu-endθα εμφανίζονται στην αριστερή πλευρά.

Ψηλά το κεφάλι! Τα αναπτυσσόμενα μενού τοποθετούνται χάρη στο Popper, εκτός εάν περιέχονται σε μια γραμμή πλοήγησης.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu example
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Ευθυγράμμιση με απόκριση

Εάν θέλετε να χρησιμοποιήσετε αποκριτική στοίχιση, απενεργοποιήστε τη δυναμική τοποθέτηση προσθέτοντας το data-bs-display="static"χαρακτηριστικό και χρησιμοποιήστε τις αποκριτικές κλάσεις παραλλαγής.

Για να ευθυγραμμίσετε δεξιά το αναπτυσσόμενο μενού με το δεδομένο σημείο διακοπής ή μεγαλύτερο, προσθέστε .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Για να ευθυγραμμίσετε αριστερά το αναπτυσσόμενο μενού με το δεδομένο σημείο διακοπής ή μεγαλύτερο, προσθέστε .dropdown-menu-endκαι .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Σημειώστε ότι δεν χρειάζεται να προσθέσετε ένα data-bs-display="static"χαρακτηριστικό στα αναπτυσσόμενα κουμπιά στις γραμμές πλοήγησης, καθώς το Popper δεν χρησιμοποιείται στις γραμμές πλοήγησης.

Επιλογές ευθυγράμμισης

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

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned, right-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned, left-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

Κεφαλίδες

Προσθέστε μια κεφαλίδα για να προσθέσετε ετικέτες σε ενότητες ενεργειών σε οποιοδήποτε αναπτυσσόμενο μενού.

<ul class="dropdown-menu">
  <li><h6 class="dropdown-header">Dropdown header</h6></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
</ul>

Διαβήτης

Διαχωρίστε τις ομάδες σχετικών στοιχείων μενού με ένα διαχωριστικό.

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
  <li><hr class="dropdown-divider"></li>
  <li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>

Κείμενο

Τοποθετήστε οποιοδήποτε κείμενο ελεύθερης μορφής σε ένα αναπτυσσόμενο μενού με κείμενο και χρησιμοποιήστε βοηθητικά προγράμματα διαχωρισμού . Σημειώστε ότι πιθανότατα θα χρειαστείτε πρόσθετα στυλ μεγέθους για να περιορίσετε το πλάτος του μενού.

<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
  <p>
    Some example text that's free-flowing within the dropdown menu.
  </p>
  <p class="mb-0">
    And this is more example text.
  </p>
</div>

Έντυπα

Τοποθετήστε μια φόρμα σε ένα αναπτυσσόμενο μενού ή μετατρέψτε τη σε ένα αναπτυσσόμενο μενού και χρησιμοποιήστε βοηθητικά προγράμματα περιθωρίου ή συμπλήρωσης για να της δώσετε τον αρνητικό χώρο που χρειάζεστε.

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck">
        <label class="form-check-label" for="dropdownCheck">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">New around here? Sign up</a>
  <a class="dropdown-item" href="#">Forgot password?</a>
</div>

<form class="dropdown-menu p-4">
  <div class="mb-3">
    <label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
  </div>
  <div class="mb-3">
    <label for="exampleDropdownFormPassword2" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="mb-3">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck2">
      <label class="form-check-label" for="dropdownCheck2">
        Remember me
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Χρησιμοποιήστε data-bs-offsetή data-bs-referenceγια να αλλάξετε τη θέση του αναπτυσσόμενου μενού.

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
</div>

Συμπεριφορά αυτόματου κλεισίματος

Από προεπιλογή, το αναπτυσσόμενο μενού κλείνει όταν κάνετε κλικ μέσα ή έξω από το αναπτυσσόμενο μενού. Μπορείτε να χρησιμοποιήσετε την autoCloseεπιλογή για να αλλάξετε αυτήν τη συμπεριφορά του αναπτυσσόμενου μενού.

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="defaultDropdown">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable outside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable inside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

Sass

Μεταβλητές

Μεταβλητές για όλα τα αναπτυσσόμενα μενού:

$dropdown-min-width:                10rem;
$dropdown-padding-x:                0;
$dropdown-padding-y:                .5rem;
$dropdown-spacer:                   .125rem;
$dropdown-font-size:                $font-size-base;
$dropdown-color:                    $body-color;
$dropdown-bg:                       $white;
$dropdown-border-color:             rgba($black, .15);
$dropdown-border-radius:            $border-radius;
$dropdown-border-width:             $border-width;
$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width);
$dropdown-divider-bg:               $dropdown-border-color;
$dropdown-divider-margin-y:         $spacer * .5;
$dropdown-box-shadow:               $box-shadow;

$dropdown-link-color:               $gray-900;
$dropdown-link-hover-color:         shade-color($dropdown-link-color, 10%);
$dropdown-link-hover-bg:            $gray-200;

$dropdown-link-active-color:        $component-active-color;
$dropdown-link-active-bg:           $component-active-bg;

$dropdown-link-disabled-color:      $gray-500;

$dropdown-item-padding-y:           $spacer * .25;
$dropdown-item-padding-x:           $spacer;

$dropdown-header-color:             $gray-600;
$dropdown-header-padding:           $dropdown-padding-y $dropdown-item-padding-x;

Μεταβλητές για το σκοτεινό αναπτυσσόμενο μενού :

$dropdown-dark-color:               $gray-300;
$dropdown-dark-bg:                  $gray-800;
$dropdown-dark-border-color:        $dropdown-border-color;
$dropdown-dark-divider-bg:          $dropdown-divider-bg;
$dropdown-dark-box-shadow:          null;
$dropdown-dark-link-color:          $dropdown-dark-color;
$dropdown-dark-link-hover-color:    $white;
$dropdown-dark-link-hover-bg:       rgba($white, .15);
$dropdown-dark-link-active-color:   $dropdown-link-active-color;
$dropdown-dark-link-active-bg:      $dropdown-link-active-bg;
$dropdown-dark-link-disabled-color: $gray-500;
$dropdown-dark-header-color:        $gray-500;

Μεταβλητές για τα καρέ που βασίζονται σε CSS που υποδεικνύουν τη διαδραστικότητα ενός αναπτυσσόμενου μενού:

$caret-width:                 .3em;
$caret-vertical-align:        $caret-width * .85;
$caret-spacing:               $caret-width * .85;

Μίξεις

Οι μίξεις χρησιμοποιούνται για τη δημιουργία των καρετών που βασίζονται σε CSS και μπορούν να βρεθούν στο scss/mixins/_caret.scss.

@mixin caret-down {
  border-top: $caret-width solid;
  border-right: $caret-width solid transparent;
  border-bottom: 0;
  border-left: $caret-width solid transparent;
}

@mixin caret-up {
  border-top: 0;
  border-right: $caret-width solid transparent;
  border-bottom: $caret-width solid;
  border-left: $caret-width solid transparent;
}

@mixin caret-end {
  border-top: $caret-width solid transparent;
  border-right: 0;
  border-bottom: $caret-width solid transparent;
  border-left: $caret-width solid;
}

@mixin caret-start {
  border-top: $caret-width solid transparent;
  border-right: $caret-width solid;
  border-bottom: $caret-width solid transparent;
}

@mixin caret($direction: down) {
  @if $enable-caret {
    &::after {
      display: inline-block;
      margin-left: $caret-spacing;
      vertical-align: $caret-vertical-align;
      content: "";
      @if $direction == down {
        @include caret-down();
      } @else if $direction == up {
        @include caret-up();
      } @else if $direction == end {
        @include caret-end();
      }
    }

    @if $direction == start {
      &::after {
        display: none;
      }

      &::before {
        display: inline-block;
        margin-right: $caret-spacing;
        vertical-align: $caret-vertical-align;
        content: "";
        @include caret-start();
      }
    }

    &:empty::after {
      margin-left: 0;
    }
  }
}

Χρήση

Μέσω χαρακτηριστικών δεδομένων ή JavaScript, η αναπτυσσόμενη προσθήκη εναλλάσσει το κρυφό περιεχόμενο (αναπτυσσόμενα μενού) εναλλάσσοντας την .showκλάση στο γονικό .dropdown-menu. Το data-bs-toggle="dropdown"χαρακτηριστικό βασίζεται για το κλείσιμο αναπτυσσόμενων μενού σε επίπεδο εφαρμογής, επομένως είναι καλή ιδέα να το χρησιμοποιείτε πάντα.

Σε συσκευές με δυνατότητα αφής, το άνοιγμα ενός αναπτυσσόμενου μενού προσθέτει κενά mouseoverπρογράμματα χειρισμού στα άμεσα παιδιά του <body>στοιχείου. Αυτό το ομολογουμένως άσχημο hack είναι απαραίτητο για να επιλύσετε μια ιδιορρυθμία στην αποστολή συμβάντων του iOS , η οποία διαφορετικά θα εμπόδιζε ένα πάτημα οπουδήποτε εκτός του αναπτυσσόμενου μενού να ενεργοποιήσει τον κώδικα που κλείνει το αναπτυσσόμενο μενού. Μόλις κλείσει το αναπτυσσόμενο μενού, αυτοί οι πρόσθετοι άδειοι mouseoverχειριστές καταργούνται.

Μέσω χαρακτηριστικών δεδομένων

Προσθήκη data-bs-toggle="dropdown"σε σύνδεσμο ή κουμπί για εναλλαγή ενός αναπτυσσόμενου μενού.

<div class="dropdown">
  <button id="dLabel" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Μέσω JavaScript

Καλέστε τα αναπτυσσόμενα μενού μέσω JavaScript:

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
  return new bootstrap.Dropdown(dropdownToggleEl)
})

`data-bs-toggle="dropdown"`απαιτείται ακόμη

Ανεξάρτητα από το αν καλείτε το αναπτυσσόμενο μενού μέσω JavaScript ή αντ' αυτού χρησιμοποιείτε το data-api, data-bs-toggle="dropdown"απαιτείται πάντα να υπάρχει στο στοιχείο ενεργοποίησης του αναπτυσσόμενου μενού.

Επιλογές

Οι επιλογές μπορούν να μεταβιβαστούν μέσω χαρακτηριστικών δεδομένων ή JavaScript. Για τα χαρακτηριστικά δεδομένων, προσθέστε το όνομα της επιλογής στο data-bs-, όπως στο data-bs-offset="". Φροντίστε να αλλάξετε τον τύπο πεζών-κεφαλαίων του ονόματος της επιλογής από camelCase σε kebab-case όταν μεταβιβάζετε τις επιλογές μέσω των χαρακτηριστικών δεδομένων. Για παράδειγμα, αντί να χρησιμοποιήσετε data-bs-autoClose="false", χρησιμοποιήστε data-bs-auto-close="false".

Ονομα	Τύπος	Προκαθορισμένο	Περιγραφή
`boundary`	χορδή \| στοιχείο	`'clippingParents'`	Όριο περιορισμού υπερχείλισης του αναπτυσσόμενου μενού (ισχύει μόνο για τον τροποποιητή preventOverflow του Popper). Από προεπιλογή είναι `'clippingParents'`και μπορεί να δεχτεί μια αναφορά HTMLElement (μόνο μέσω JavaScript). Για περισσότερες πληροφορίες, ανατρέξτε στα έγγραφα του Popper detectOverflow .
`reference`	χορδή \| στοιχείο \| αντικείμενο	`'toggle'`	Στοιχείο αναφοράς του αναπτυσσόμενου μενού. Αποδέχεται τις τιμές του `'toggle'`, `'parent'`, μιας αναφοράς HTMLElement ή ενός αντικειμένου που παρέχει `getBoundingClientRect`. Για περισσότερες πληροφορίες, ανατρέξτε στα έγγραφα κατασκευής του Popper και στα έγγραφα εικονικών στοιχείων .
`display`	σειρά	`'dynamic'`	Από προεπιλογή, χρησιμοποιούμε το Popper για δυναμική τοποθέτηση. Απενεργοποιήστε αυτό με `static`.
`offset`	συστοιχία \| χορδή \| λειτουργία	`[0, 2]`	Μετατόπιση του αναπτυσσόμενου μενού σε σχέση με τον στόχο του. Μπορείτε να περάσετε μια συμβολοσειρά σε χαρακτηριστικά δεδομένων με τιμές διαχωρισμένες με κόμμα, όπως:`data-bs-offset="10,20"` Όταν μια συνάρτηση χρησιμοποιείται για τον προσδιορισμό της μετατόπισης, καλείται με ένα αντικείμενο που περιέχει την τοποθέτηση popper, την αναφορά και το popper rects ως πρώτο όρισμα. Ο κόμβος DOM του στοιχείου ενεργοποίησης μεταβιβάζεται ως δεύτερο όρισμα. Η συνάρτηση πρέπει να επιστρέψει έναν πίνακα με δύο αριθμούς: .`[skidding, distance]` Για περισσότερες πληροφορίες, ανατρέξτε στα έγγραφα μετατόπισης του Popper .
`autoClose`	boolean \| σειρά	`true`	Διαμορφώστε τη συμπεριφορά αυτόματου κλεισίματος του αναπτυσσόμενου μενού: `true`- το αναπτυσσόμενο μενού θα κλείσει κάνοντας κλικ έξω ή μέσα στο αναπτυσσόμενο μενού. `false`- το αναπτυσσόμενο μενού θα κλείσει κάνοντας κλικ στο κουμπί εναλλαγής και μη αυτόματη κλήση `hide`ή `toggle`μέθοδο. (Επίσης δεν θα κλείσει πατώντας το `esc`πλήκτρο) `'inside'`- το αναπτυσσόμενο μενού θα κλείσει (μόνο) κάνοντας κλικ μέσα στο αναπτυσσόμενο μενού. `'outside'`- το αναπτυσσόμενο μενού θα κλείσει (μόνο) κάνοντας κλικ έξω από το αναπτυσσόμενο μενού.
`popperConfig`	null \| αντικείμενο \| λειτουργία	`null`	Για να αλλάξετε την προεπιλεγμένη διαμόρφωση Popper του Bootstrap, ανατρέξτε στη διαμόρφωση του Popper . Όταν μια συνάρτηση χρησιμοποιείται για τη δημιουργία της διαμόρφωσης Popper, καλείται με ένα αντικείμενο που περιέχει την προεπιλεγμένη διαμόρφωση Popper του Bootstrap. Σας βοηθά να χρησιμοποιήσετε και να συγχωνεύσετε την προεπιλογή με τη δική σας διαμόρφωση. Η συνάρτηση πρέπει να επιστρέψει ένα αντικείμενο διαμόρφωσης για το Popper.

Χρήση της λειτουργίας με`popperConfig`

var dropdown = new bootstrap.Dropdown(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Μέθοδοι

Μέθοδος	Περιγραφή
`toggle`	Εναλλάσσει το αναπτυσσόμενο μενού μιας δεδομένης γραμμής πλοήγησης ή πλοήγησης με καρτέλες.
`show`	Εμφανίζει το αναπτυσσόμενο μενού μιας δεδομένης γραμμής πλοήγησης ή πλοήγησης με καρτέλες.
`hide`	Αποκρύπτει το αναπτυσσόμενο μενού μιας δεδομένης γραμμής πλοήγησης ή πλοήγησης με καρτέλες.
`update`	Ενημερώνει τη θέση του αναπτυσσόμενου μενού ενός στοιχείου.
`dispose`	Καταστρέφει το αναπτυσσόμενο στοιχείο ενός στοιχείου. (Καταργεί τα αποθηκευμένα δεδομένα στο στοιχείο DOM)
`getInstance`	Στατική μέθοδος που σας επιτρέπει να λάβετε το αναπτυσσόμενο στιγμιότυπο που σχετίζεται με ένα στοιχείο DOM, μπορείτε να το χρησιμοποιήσετε ως εξής:`bootstrap.Dropdown.getInstance(element)`
`getOrCreateInstance`	Στατική μέθοδος που επιστρέφει μια αναπτυσσόμενη παρουσία που σχετίζεται με ένα στοιχείο DOM ή δημιουργεί μια νέα σε περίπτωση που δεν είχε αρχικοποιηθεί. Μπορείτε να το χρησιμοποιήσετε ως εξής:`bootstrap.Dropdown.getOrCreateInstance(element)`

Εκδηλώσεις

Όλα τα αναπτυσσόμενα συμβάντα ενεργοποιούνται στο στοιχείο εναλλαγής και, στη συνέχεια, εμφανίζονται με φυσαλίδες. Έτσι, μπορείτε επίσης να προσθέσετε προγράμματα ακρόασης συμβάντων στο .dropdown-menuγονικό στοιχείο του '. hide.bs.dropdownκαι hidden.bs.dropdownτα συμβάντα έχουν μια clickEventιδιότητα (μόνο όταν ο αρχικός τύπος συμβάντος είναι click) που περιέχει ένα αντικείμενο συμβάντος για το συμβάν κλικ.

Μέθοδος	Περιγραφή
`show.bs.dropdown`	Ενεργοποιείται αμέσως όταν καλείται η μέθοδος εμφάνισης.
`shown.bs.dropdown`	Ενεργοποιείται όταν το αναπτυσσόμενο μενού έχει γίνει ορατό στον χρήστη και οι μεταβάσεις CSS έχουν ολοκληρωθεί.
`hide.bs.dropdown`	Ενεργοποιείται αμέσως όταν καλείται η μέθοδος εμφάνισης απόκρυψης.
`hidden.bs.dropdown`	Ενεργοποιήθηκε όταν ολοκληρωθεί η απόκρυψη του αναπτυσσόμενου μενού από τον χρήστη και οι μεταβάσεις CSS έχουν ολοκληρωθεί.

var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
  // do something...
})

Αναπτυσσόμενα

ΣΦΑΙΡΙΚΗ ΕΙΚΟΝΑ

Προσιτότητα

Παραδείγματα

Μονό κουμπί

Κουμπί διαίρεσης

Κόλλα

Σκούρα αναπτυσσόμενα μενού

Κατευθύνσεις

RTL

Dropup

Dropright

Dropleft

Στοιχεία μενού

Ενεργός

άτομα με ειδικές ανάγκες

Στοίχιση μενού

Ευθυγράμμιση με απόκριση

Επιλογές ευθυγράμμισης

Περιεχόμενο μενού

Κεφαλίδες

Διαβήτης

Κείμενο

Έντυπα

Συμπεριφορά αυτόματου κλεισίματος

Sass

Μεταβλητές

Μίξεις

Χρήση

Μέσω χαρακτηριστικών δεδομένων

Μέσω JavaScript

`data-bs-toggle="dropdown"`απαιτείται ακόμη

Επιλογές

Χρήση της λειτουργίας με`popperConfig`

Μέθοδοι

Εκδηλώσεις

Αναπτυσσόμενα

ΣΦΑΙΡΙΚΗ ΕΙΚΟΝΑ

Προσιτότητα

Παραδείγματα

Μονό κουμπί

Κουμπί διαίρεσης

Κόλλα

Σκούρα αναπτυσσόμενα μενού

Κατευθύνσεις

RTL

Dropup

Dropright

Dropleft

Στοιχεία μενού

Ενεργός

άτομα με ειδικές ανάγκες

Στοίχιση μενού

Ευθυγράμμιση με απόκριση

Επιλογές ευθυγράμμισης

Περιεχόμενο μενού

Κεφαλίδες

Αναπτυσσόμενη κεφαλίδα

Διαβήτης

Κείμενο

Έντυπα

Αναπτυσσόμενες επιλογές

Συμπεριφορά αυτόματου κλεισίματος

Sass

Μεταβλητές

Μίξεις

Χρήση

Μέσω χαρακτηριστικών δεδομένων

Μέσω JavaScript

data-bs-toggle="dropdown"απαιτείται ακόμη

Επιλογές

Χρήση της λειτουργίας μεpopperConfig

Μέθοδοι

Εκδηλώσεις

`data-bs-toggle="dropdown"`απαιτείται ακόμη

Χρήση της λειτουργίας με`popperConfig`