Legördülő menük

A Bootstrap legördülő beépülő modullal átkapcsolhatja a kontextus szerinti fedvényeket a hivatkozások és egyebek listájának megjelenítéséhez.

Ezen az oldalon

Áttekintés

A legördülő menük váltogathatók, kontextuális fedvények a hivatkozáslisták és egyebek megjelenítéséhez. Interaktívvá teszik őket a mellékelt Bootstrap legördülő JavaScript beépülő modullal. Kattintással válthatók, nem lebegéssel; ez szándékos tervezési döntés .

A legördülő listák egy harmadik féltől származó könyvtárra, a Popperre épülnek , amely dinamikus pozicionálást és nézetablak észlelést biztosít. Ügyeljen arra, hogy a popper.min.js fájlt a Bootstrap JavaScriptje elé írja be, vagy használja a bootstrap.bundle.min.js/ -t, bootstrap.bundle.jsamely tartalmazza a Poppert. A Poppert nem használják a navigációs sávok legördülő menüinek pozicionálására, mivel nincs szükség dinamikus pozicionálásra.

Megközelíthetőség

A WAI ARIA szabvány egy tényleges role="menu"widgetet határoz meg , de ez kifejezetten az alkalmazásszerű menükre vonatkozik, amelyek műveleteket vagy funkciókat indítanak el. Az ARIA menük csak menüelemeket, jelölőnégyzet menüelemeket, választógomb menüelemeket, választógomb csoportokat és almenüket tartalmazhatnak.

A Bootstrap legördülő menüi viszont általánosak, és különféle helyzetekben és jelölési struktúrákban alkalmazhatók. Például lehetőség van olyan legördülő menük létrehozására, amelyek további bemeneteket és űrlapvezérlőket tartalmaznak, például keresőmezőket vagy bejelentkezési űrlapokat. Emiatt a Bootstrap nem várja el (és nem adja hozzá automatikusan) a valódi ARIA - menükhöz szükséges roleés attribútumokat. A szerzőknek maguknak kell megadniuk ezeket a konkrétabb attribútumokat.aria-

A Bootstrap azonban beépített támogatást ad a legtöbb szabványos billentyűzet-menü interakcióhoz, például az egyes .dropdown-itemelemek között a kurzorbillentyűk használatával való mozgáshoz és a menü bezárásához a ESCgombbal.

Példák

Tekerje körbe a legördülő menü kapcsolóját (a saját gombját vagy hivatkozását) és a legördülő menüt a .dropdown, vagy egy másik elembe, amely deklarálja a position: relative;. Legördülő menük indíthatók a <a>vagy <button>elemekből, hogy jobban megfeleljenek az Ön lehetséges igényeinek. Az itt bemutatott példák <ul>adott esetben szemantikus elemeket használnak, de az egyéni jelölés támogatott.

Egyetlen gomb

Bármelyik .btnegy legördülő kapcsolóvá alakítható néhány jelölésmódosítással. A következőképpen helyezheti őket működésre bármelyik <button>elemmel:

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </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>
  </ul>
</div>

És <a>elemekkel:

html

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

  <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>
  </ul>
</div>

A legjobb az egészben, hogy ezt bármelyik gombváltozattal megteheti:

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

Split gomb

Hasonlóképpen hozzon létre osztott gombos legördülő listákat, gyakorlatilag ugyanazzal a jelöléssel, mint az egygombos legördülő menük, de a .dropdown-toggle-splitmegfelelő távolság érdekében a legördülő menü körül.

Ezt az extra osztályt arra használjuk, paddinghogy 25%-kal csökkentsük a vízszintes szöget a mutató mindkét oldalán, és eltávolítsuk a margin-leftszokásos gombok legördülő menüihez hozzáadott elemet. Ezek az extra változtatások az osztógomb közepén tartják a mutatót, és megfelelőbb méretű találati területet biztosítanak a fő gomb mellett.

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

Méretezés

A gombok legördülő menüi minden méretű gombbal működnek, beleértve az alapértelmezett és az osztott legördülő gombokat is.

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

Sötét legördülő menük

Iratkozzon fel a sötétebb legördülő menükre, hogy illeszkedjen egy sötét navigációs sávhoz vagy egyéni stílushoz, ha hozzáadja .dropdown-menu-darka meglévőhöz .dropdown-menu. A legördülő elemeken nincs szükség változtatásra.

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark">
    <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>

És a navigációs sáv használata:

html

<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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-dark">
            <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>

Útvonalak

RTL

A Bootstrap RTL-ben történő használatakor az irányok tükröződnek, ami .dropstarta jobb oldalon jelenik meg.

Középre állított

.dropdown-centerÁllítsa a legördülő menüt a szülőelem kapcsolója alatti középre .

html

<div class="dropdown-center">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

Dropup

Az elemek feletti legördülő menük aktiválása .dropupa szülőelemhez való hozzáadással.

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

Legördülő központ

Állítsa a legördülő menüt a szülőelem kapcsolója fölé középre .dropup-center.

html

<div class="dropup-center dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

Dropend

Az elemek jobb oldalán lévő legördülő menük aktiválása .dropenda szülőelemhez való hozzáadással.

<!-- Default dropend button -->
<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">
    <!-- 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 Dropend</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Dropstart

Az elemek bal oldalán lévő legördülő menük aktiválása .dropstarta szülőelemhez való hozzáadással.

<!-- 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 dropstart">
  <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>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

A <a>vagy <button>elemeket legördülő menüként használhatja.

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <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>

A segítségével nem interaktív legördülő elemeket is létrehozhat .dropdown-item-text. Nyugodtan alakíthat tovább stílust egyéni CSS- vagy szöveges segédprogramokkal.

html

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

Aktív

Adja hozzá .activeaz elemekhez a legördülő menüben, hogy aktívnak formázza őket . Az aktív állapot kisegítő technológiák számára történő továbbításához használja az aria-currentattribútumot – pageaz aktuális oldal vagy truea készlet aktuális elemének értékét használva.

html

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

Tiltva

Adja hozzá .disabledaz elemekhez a legördülő menüben, hogy letiltottként módosítsa őket .

html

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

Alapértelmezés szerint a legördülő menü automatikusan 100%-ban a fölé és bal oldala mentén helyezkedik el. Ezt megváltoztathatja az .drop*irányosztályokkal, de további módosító osztályokkal is szabályozhatja őket.

Add hozzá .dropdown-menu-enda .dropdown-menujobbra igazításhoz a legördülő menüt. A Bootstrap RTL-ben történő használatakor az irányok tükröződnek, ami .dropdown-menu-enda bal oldalon jelenik meg.

Fel a fejjel! A legördülő menük a Poppernek köszönhetően helyezkednek el, kivéve, ha a navigációs sávban találhatók.

html

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

Reszponzív igazítás

Ha reszponzív igazítást szeretne használni, tiltsa le a dinamikus pozicionálást az data-bs-display="static"attribútum hozzáadásával, és használja az adaptív variációs osztályokat.

Ha a legördülő menüt az adott vagy nagyobb törésponthoz szeretné igazítani , adja hozzá a következőt .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end:

html

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

Ha a bal oldali legördülő menüt az adott törésponthoz vagy nagyobbhoz szeretné igazítani , adja hozzá a .dropdown-menu-endés a gombot .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start.

html

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

Vegye figyelembe, hogy nem kell data-bs-display="static"attribútumot hozzáadnia a navigációs sávok legördülő gombjaihoz, mivel a Poppert nem használják a navigációs sávokban.

Igazítási lehetőségek

A fent bemutatott lehetőségek többségét figyelembe véve itt egy kis konyhai mosogató-demó a különböző legördülő beállítási lehetőségekről egy helyen.

html

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </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">
  <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>

Fejlécek

Adjon hozzá fejlécet a műveletek szakaszainak címkézéséhez bármely legördülő menüben.

html

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

Elválasztók

A kapcsolódó menüpontok csoportjai elválasztóval különíthetők el.

html

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

Szöveg

Helyezzen el bármilyen szabad formájú szöveget egy legördülő menüben a szöveggel, és használja a térközkezelő segédprogramokat . Vegye figyelembe, hogy valószínűleg további méretezési stílusokra lesz szüksége a menü szélességének korlátozásához.

html

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

Űrlapok

Helyezzen egy űrlapot egy legördülő menübe, vagy tegye azt legördülő menüvé, és használja a margót vagy a kitöltő segédprogramokat , hogy megadja a kívánt negatív helyet.

html

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

html

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
    Dropdown form
  </button>
  <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>
</div>

A data-bs-offsetvagy data-bs-referencea gombbal módosíthatja a legördülő menü helyét.

html

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </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>
    </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" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <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>
</div>

Automatikus zárási viselkedés

Alapértelmezés szerint a legördülő menü bezárul, ha a legördülő menü belsejébe vagy kívülre kattint. autoCloseA legördülő menü ezen viselkedésének megváltoztatására használhatja a lehetőséget.

html

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </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">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable outside
  </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">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable inside
  </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">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </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>

CSS

Változók

Hozzáadva a v5.2.0-hoz

A Bootstrap fejlődő CSS-változókra vonatkozó megközelítésének részeként a legördülő menük helyi CSS-változókat használnak .dropdown-menua továbbfejlesztett valós idejű testreszabás érdekében. A CSS-változók értékeit a Sass segítségével állítjuk be, így a Sass testreszabása továbbra is támogatott.

  --#{$prefix}dropdown-zindex: #{$zindex-dropdown};
  --#{$prefix}dropdown-min-width: #{$dropdown-min-width};
  --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
  --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
  --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
  @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
  --#{$prefix}dropdown-color: #{$dropdown-color};
  --#{$prefix}dropdown-bg: #{$dropdown-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
  --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
  --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
  --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
  --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
  --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
  --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
  --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
  --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
  --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};

A CSS-változókon keresztüli testreszabás látható azon az .dropdown-menu-darkosztályon, ahol felülírunk bizonyos értékeket anélkül, hogy duplikált CSS-szelektorokat adnánk hozzá.

  --#{$prefix}dropdown-color: #{$dropdown-dark-color};
  --#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
  --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};

Sass változók

Az összes legördülő menü változói:

$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:             var(--#{$prefix}border-color-translucent);
$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-x:         $dropdown-item-padding-x;
$dropdown-header-padding-y:         $dropdown-padding-y;
// fusv-disable
$dropdown-header-padding:           $dropdown-header-padding-y $dropdown-header-padding-x; // Deprecated in v5.2.0
// fusv-enable

A sötét legördülő menü változói :

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

A legördülő menü interaktivitását jelző CSS-alapú caret változók:

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

Mixins

Mixineket használnak a CSS-alapú caret-ek generálására, és megtalálhatók a 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;
    }
  }
}

Használat

Az adatattribútumokon vagy a JavaScripten keresztül a legördülő beépülő modul átkapcsolja a rejtett tartalmat (legördülő menüket) az .showosztály átváltásával a szülőn .dropdown-menu. Az data-bs-toggle="dropdown"attribútumra támaszkodik a legördülő menük alkalmazásszintű bezárásához, ezért célszerű mindig használni.

Érintésképes eszközökön a legördülő menü megnyitása üres mouseoverkezelőket ad az <body>elem közvetlen gyermekeihez. Erre a bevallottan csúnya feltörésre azért van szükség, hogy megkerüljük az iOS esemény-delegálásának egy furcsaságát , amely egyébként megakadályozná, hogy a legördülő menün kívüli bármely koppintás elindítsa a legördülő listát bezáró kódot. A legördülő menü bezárása után ezek a további üres mouseoverkezelők eltávolításra kerülnek.

Adatattribútumokon keresztül

Hozzáadás data-bs-toggle="dropdown"hivatkozáshoz vagy gombhoz a legördülő menü váltásához.

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

JavaScripten keresztül

A legördülő menük meghívása JavaScripten keresztül:

const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))

`data-bs-toggle="dropdown"`továbbra is szükséges

Függetlenül attól, hogy JavaScript-en keresztül hívja-e meg a legördülő menüt, vagy inkább a data-api-t használja, data-bs-toggle="dropdown"mindig jelen kell lennie a legördülő menü trigger elemén.

Lehetőségek

Mivel az opciók átadhatók adatattribútumokon vagy JavaScript-en keresztül, hozzáfűzhet egy beállításnevet a -hoz data-bs-, mint például a data-bs-animation="{value}". Ügyeljen arra, hogy az opció nevének esettípusát „ camelCase ”-ról „ kebab-case ”-re változtassa, amikor a beállításokat adatattribútumokon keresztül adja át. Például használja data-bs-custom-class="beautifier"a helyett data-bs-customClass="beautifier".

A Bootstrap 5.2.0-tól kezdve minden összetevő támogatja a kísérleti fenntartott adatattribútumot, data-bs-configamely JSON-karakterláncként tartalmazhat egyszerű összetevőkonfigurációt. Ha egy elemnek data-bs-config='{"delay":0, "title":123}'és data-bs-title="456"attribútumai vannak, a végső titleérték a következő lesz, 456és a különálló adatattribútumok felülírják a megadott értékeket data-bs-config. Ezenkívül a meglévő adatattribútumok JSON-értékeket, például data-bs-delay='{"show":0,"hide":150}'.

Név	típus	Alapértelmezett	Leírás
`autoClose`	logikai érték, karakterlánc	`true`	Állítsa be a legördülő menü automatikus bezárási viselkedését: `true`- a legördülő menü a legördülő menün kívülre vagy belülre kattintva bezárható. `false`- a legördülő menü a váltógombra kattintva és manuálisan hívható `hide`vagy `toggle`metódussal záródik be. (A gomb megnyomásával sem záródik be `esc`) `'inside'`- a legördülő menüt (csak) a legördülő menübe kattintva zárja be. `'outside'`- a legördülő menüt (csak) a legördülő menün kívülre kattintva zárja be. Megjegyzés: a legördülő menü mindig bezárható a `ESC`kulccsal.
`boundary`	karakterlánc, elem	`'clippingParents'`	A legördülő menü túlcsordulási kényszerének határa (csak a Popper preventOverflow módosítójára vonatkozik). Alapértelmezés szerint `clippingParents`elfogadja a HTMLElement hivatkozást (csak JavaScripten keresztül). További információkért tekintse meg a Popper detectOverflow dokumentumait .
`display`	húr	`'dynamic'`	Alapértelmezés szerint a Poppert használjuk a dinamikus pozicionáláshoz. Tiltsa le ezt a segítségével `static`.
`offset`	tömb, karakterlánc, függvény	`[0, 2]`	A legördülő menü eltolása a célhoz képest. Az adatattribútumokban átadhat egy karakterláncot vesszővel elválasztott értékekkel, például: `data-bs-offset="10,20"`. Ha egy függvényt használunk az eltolás meghatározására, akkor egy olyan objektummal hívjuk meg, amely első argumentumaként tartalmazza a popper elhelyezést, a hivatkozást és a popper recteket. A kiváltó elem DOM csomópontja második argumentumként kerül átadásra. A függvénynek egy tömböt kell visszaadnia két számmal: csúszás , távolság . További információkért tekintse meg a Popper-féle eltolási dokumentumokat .
`popperConfig`	null, objektum, függvény	`null`	A Bootstrap alapértelmezett Popper-konfigurációjának módosításához lásd a Popper konfigurációját . Ha egy függvényt használunk a Popper-konfiguráció létrehozására, akkor azt egy olyan objektummal hívjuk meg, amely tartalmazza a Bootstrap alapértelmezett Popper-konfigurációját. Segítségével használhatja és egyesítheti az alapértelmezett beállításokat saját konfigurációjával. A függvénynek egy konfigurációs objektumot kell visszaadnia a Popper számára.
`reference`	karakterlánc, elem, objektum	`'toggle'`	A legördülő menü hivatkozási eleme. Elfogadja a `'toggle'`, `'parent'`, egy HTMLElement hivatkozás vagy egy objektum értékét `getBoundingClientRect`. További információkért tekintse meg a Popper konstruktor dokumentumait és a virtuális elemek dokumentumait .

A funkció használata a`popperConfig`

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

Mód

Módszer	Leírás
`dispose`	Elpusztítja egy elem legördülő menüjét. (Eltávolítja a DOM elemen tárolt adatokat)
`getInstance`	Statikus módszer, amely lehetővé teszi a DOM elemhez társított legördülő példány lekérését, a következőképpen használhatja: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Statikus metódus, amely egy DOM-elemhez társított legördülő menüpéldányt ad vissza, vagy létrehoz egy újat, ha nem inicializálták. Így használhatod: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Elrejti az adott navigációs sáv vagy lapos navigáció legördülő menüjét.
`show`	Megjeleníti egy adott navigációs sáv vagy lapos navigáció legördülő menüjét.
`toggle`	Bekapcsolja az adott navigációs sáv vagy lapos navigáció legördülő menüjét.
`update`	Frissíti egy elem legördülő menüjének pozícióját.

Események

Az összes legördülő esemény a váltóelemnél aktiválódik, majd felfelé buborékolódik. Így eseményfigyelőket is hozzáadhat a .dropdown-menuszülőelemhez. hide.bs.dropdownés hidden.bs.dropdownaz eseményeknek van egy clickEventtulajdonsága (csak akkor, ha az eredeti eseménytípus click), amely egy eseményobjektumot tartalmaz a kattintási eseményhez.

Esemény típus	Leírás
`hide.bs.dropdown`	Azonnal aktiválódik, amikor a `hide`példánymetódus meghívásra került.
`hidden.bs.dropdown`	Akkor aktiválódik, amikor a legördülő menü el lett rejtve a felhasználó elől, és a CSS-átmenetek befejeződtek.
`show.bs.dropdown`	`show`A példánymetódus meghívásakor azonnal aktiválódik .
`shown.bs.dropdown`	Akkor aktiválódik, amikor a legördülő menü láthatóvá vált a felhasználó számára, és a CSS-átmenetek befejeződtek.

const myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', event => {
  // do something...
})

Legördülő menük

Áttekintés

Megközelíthetőség

Példák

Egyetlen gomb

Split gomb

Méretezés

Sötét legördülő menük

Útvonalak

RTL

Középre állított

Dropup

Legördülő központ

Dropend

Dropstart

Menüpontok

Aktív

Tiltva

Menü igazítás

Reszponzív igazítás

Igazítási lehetőségek

Menü tartalma

Fejlécek

Elválasztók

Szöveg

Űrlapok

Automatikus zárási viselkedés

CSS

Változók

Sass változók

Mixins

Használat

Adatattribútumokon keresztül

JavaScripten keresztül

`data-bs-toggle="dropdown"`továbbra is szükséges

Lehetőségek

A funkció használata a`popperConfig`

Mód

Események

Legördülő menük

Áttekintés

Megközelíthetőség

Példák

Egyetlen gomb

Split gomb

Méretezés

Sötét legördülő menük

Útvonalak

RTL

Középre állított

Dropup

Legördülő központ

Dropend

Dropstart

Menüpontok

Aktív

Tiltva

Menü igazítás

Reszponzív igazítás

Igazítási lehetőségek

Menü tartalma

Fejlécek

Legördülő fejléc

Elválasztók

Szöveg

Űrlapok

Legördülő lehetőségek

Automatikus zárási viselkedés

CSS

Változók

Sass változók

Mixins

Használat

Adatattribútumokon keresztül

JavaScripten keresztül

data-bs-toggle="dropdown"továbbra is szükséges

Lehetőségek

A funkció használata apopperConfig

Mód

Események

`data-bs-toggle="dropdown"`továbbra is szükséges

A funkció használata a`popperConfig`