Dropdowns

Ndrysho mbivendosjet kontekstuale për shfaqjen e listave të lidhjeve dhe më shumë me shtojcën me lëshim Bootstrap.

Në këtë faqe

Vështrim i përgjithshëm

Dropdowns janë mbivendosje të ndërrueshme, kontekstuale për shfaqjen e listave të lidhjeve dhe më shumë. Ato janë bërë ndërvepruese me shtojcën e përfshirë JavaScript me zbritje Bootstrap. Ato ndërrohen duke klikuar, jo duke qëndruar pezull; ky është një vendim i qëllimshëm i projektimit .

Dropdowns janë ndërtuar në një bibliotekë të palës së tretë, Popper , e cila ofron pozicionim dinamik dhe zbulim të pamjes. Sigurohuni që të përfshini popper.min.js përpara JavaScript-it të Bootstrap ose përdorni bootstrap.bundle.min.js/ bootstrap.bundle.jsqë përmban Popper. Popper nuk përdoret për të pozicionuar pikat rënëse në shiritat e navigimit, megjithëse nuk kërkohet pozicionimi dinamik.

Aksesueshmëria

Standardi WAI ARIA role="menu" përcakton një miniaplikacion aktual , por kjo është specifike për menytë e ngjashme me aplikacionet që aktivizojnë veprime ose funksione. Menytë ARIA mund të përmbajnë vetëm artikujt e menysë, artikujt e menysë së kutisë së kontrollit, artikujt e menysë së butonave të radios, grupet e butonave të radios dhe nën-menytë.

Nga ana tjetër, pikat e lëshimit të Bootstrap janë krijuar për të qenë të përgjithshme dhe të zbatueshme për një sërë situatash dhe strukturash shënjimi. Për shembull, është e mundur të krijohen skedarë që përmbajnë hyrje shtesë dhe kontrolle të formularit, të tilla si fushat e kërkimit ose formularët e hyrjes. Për këtë arsye, Bootstrap nuk pret (as nuk shton automatikisht) asnjë nga atributet roledhe atributet e kërkuara për menutë aria-e vërteta ARIA . Autorët do të duhet të përfshijnë vetë këto atribute më specifike.

Megjithatë, Bootstrap shton mbështetje të integruar për shumicën e ndërveprimeve standarde të menysë së tastierës, të tilla si aftësia për të lëvizur nëpër .dropdown-itemelementë individualë duke përdorur çelësat e kursorit dhe për të mbyllur menunë me ESCtastin.

Shembuj

Mbështilleni çelësin e menysë rënëse (butonin ose lidhjen tuaj) dhe menynë rënëse brenda .dropdown, ose një element tjetër që deklaron position: relative;. Dropdowns mund të shkaktohen nga <a>ose <button>elemente për t'iu përshtatur më mirë nevojave tuaja të mundshme. Shembujt e paraqitur këtu përdorin <ul>elemente semantike aty ku është e përshtatshme, por shënjimi i personalizuar mbështetet.

Buton i vetëm

Çdo këngë .btnmund të shndërrohet në një ndërrim me rënie me disa ndryshime shënimi. Ja se si mund t'i vendosni ato në punë me secilin <button>element:

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>

Dhe me <a>elemente:

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>

Pjesa më e mirë është që ju mund ta bëni këtë me çdo variant të butonit, gjithashtu:

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

Butoni i ndarjes

Në mënyrë të ngjashme, krijoni zbritje të butonave të ndarjes me pothuajse të njëjtin shënim si ato me një buton të vetëm, por me shtimin e .dropdown-toggle-splitpër ndarjen e duhur rreth skeletit rënës.

Ne e përdorim këtë klasë shtesë për të reduktuar horizontalin paddingnë të dyja anët e kartës me 25% dhe për të hequr atë margin-leftqë shtohet për zbritjet e butonave të rregullt. Këto ndryshime shtesë e mbajnë kutinë të përqendruar në butonin e ndarjes dhe sigurojnë një zonë goditjeje me madhësi më të përshtatshme pranë butonit kryesor.

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

Përmasat

Lëshimet e butonave funksionojnë me butona të të gjitha madhësive, duke përfshirë butonat e paracaktuar dhe të ndarë.

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

Zbritje të errëta

Zgjedhni listën me zbritje më të errëta për t'iu përshtatur një shiriti të errët navigimi ose stili të personalizuar duke shtuar .dropdown-menu-darknë një ekzistues .dropdown-menu. Nuk kërkohen ndryshime në artikujt në listë.

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>

Dhe duke e vënë atë në përdorim në një shirit navigimi:

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>

Drejtimet

RTL

Udhëzimet pasqyrohen kur përdorni Bootstrap në RTL, që do të thotë se .dropstartdo të shfaqet në anën e djathtë.

Në qendër

Bëni menunë rënëse të përqendruar poshtë butonit .dropdown-centertë ndryshimit në elementin prind.

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

Aktivizoni menytë rënëse sipër elementeve duke shtuar .dropupte elementi prind.

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

Në qendër të rënies

Bëni menunë e lëshimit të përqendruar mbi butonin e ndërrimit me .dropup-centerelementin prind.

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

Aktivizoni menytë rënëse në të djathtë të elementeve duke shtuar .dropendte elementi prind.

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

Aktivizoni menytë rënëse në të majtë të elementeve duke shtuar .dropstartte elementi prind.

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

Ju mund të përdorni <a>ose <button>elemente si artikuj në rënie.

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>

Ju gjithashtu mund të krijoni artikuj jo-interaktivë me zbritje me .dropdown-item-text. Mos ngurroni të stiloni më tej me CSS të personalizuara ose shërbime teksti.

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>

Aktiv

Shtojini .activeartikujve në listën rënëse për t'i stiluar si aktivë . Për të përcjellë gjendjen aktive tek teknologjitë ndihmëse, përdorni aria-currentatributin — duke përdorur pagevlerën për faqen aktuale ose truepër artikullin aktual në një grup.

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>

I paaftë

Shtojini .disabledartikujve në listën rënëse për t'i stiluar si të paaftë .

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>

Si parazgjedhje, një meny rënëse pozicionohet automatikisht 100% nga lart dhe përgjatë anës së majtë të prindit të saj. Ju mund ta ndryshoni këtë me klasat e drejtimit .drop*, por gjithashtu mund t'i kontrolloni ato me klasa modifikuese shtesë.

Shtoni .dropdown-menu-endnë a .dropdown-menunë të djathtë, rreshtoni menunë rënëse. Udhëzimet pasqyrohen kur përdorni Bootstrap në RTL, që do të thotë se .dropdown-menu-enddo të shfaqet në anën e majtë.

Kokat lart! Dropdowns pozicionohen falë Popper, përveç rasteve kur ato gjenden në një shirit navigimi.

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>

Rreshtimi i përgjegjshëm

Nëse dëshironi të përdorni shtrirjen e përgjegjshme, çaktivizoni pozicionimin dinamik duke shtuar data-bs-display="static"atributin dhe përdorni klasat e variacionit të përgjegjshëm.

Për të lidhur djathtas menynë rënëse me pikën e caktuar të ndërprerjes ose më të madhe, shtoni .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>

Për të lidhur menynë rënëse majtas.dropdown-menu-end me pikën e caktuar të ndërprerjes ose më të madhe, shtoni dhe .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>

Vini re se nuk keni nevojë të shtoni një data-bs-display="static"atribut në butonat me zbritje në shiritat e navigimit, pasi Popper nuk përdoret në shiritat e navigimit.

Opsionet e shtrirjes

Duke marrë shumicën e opsioneve të paraqitura më sipër, këtu është një demonstrim i vogël i lavamanit të kuzhinës me opsione të ndryshme të shtrirjes me zbritje në një vend.

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>

Titujt

Shtoni një kokë për të etiketuar seksionet e veprimeve në çdo meny rënëse.

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>

Ndarësit

Ndani grupet e artikujve të lidhur të menysë me një ndarës.

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>

Teksti

Vendosni çdo tekst në formë të lirë brenda një menuje rënëse me tekst dhe përdorni shërbimet e ndarjes . Vini re se ka të ngjarë të keni nevojë për stile shtesë të madhësisë për të kufizuar gjerësinë e menusë.

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>

Format

Vendosni një formular brenda një menyje rënëse, ose shndërrojeni atë në një meny rënëse dhe përdorni shërbimet e margjinës ose mbushjes për t'i dhënë asaj hapësirën negative që ju nevojitet.

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>

Përdorni data-bs-offsetose data-bs-referencepër të ndryshuar vendndodhjen e listës rënëse.

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>

Sjellja e mbylljes automatike

Si parazgjedhje, menyja rënëse mbyllet kur klikoni brenda ose jashtë menysë rënëse. Mund të përdorni autoCloseopsionin për të ndryshuar këtë sjellje të listës rënëse.

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

Variablat

Shtuar në v5.2.0

Si pjesë e qasjes së variablave CSS në evoluim të Bootstrap, skedarët me rënie tani përdorin variabla lokale CSS .dropdown-menupër personalizim të përmirësuar në kohë reale. Vlerat për variablat CSS vendosen nëpërmjet Sass, kështu që personalizimi i Sass mbështetet gjithashtu.

  --#{$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};

Përshtatja përmes variablave CSS mund të shihet në .dropdown-menu-darkklasën ku ne anashkalojmë vlerat specifike pa shtuar përzgjedhës të dyfishtë CSS.

  --#{$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};

Variablat Sass

Variablat për të gjitha renditjet në rënie:

$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

Variablat për zbritjen e errët :

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

Variablat për karetat e bazuara në CSS që tregojnë interaktivitetin e një listë me zbritje:

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

Përzierjet

Përzierjet përdoren për të gjeneruar karetat e bazuara në CSS dhe mund të gjenden në 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;
    }
  }
}

Përdorimi

Nëpërmjet atributeve të të dhënave ose JavaScript-it, shtojca me drop-down ndryshon përmbajtjen e fshehur (menytë rënëse) duke ndërruar .showklasën në prind .dropdown-menu. Atributi data-bs-toggle="dropdown"mbështetet për mbylljen e menyve rënëse në një nivel aplikacioni, kështu që është një ide e mirë ta përdorni gjithmonë atë.

Në pajisjet e aktivizuara me prekje, hapja e një menyje rënëse shton mouseovermbajtës të zbrazët tek fëmijët e menjëhershëm të <body>elementit. Ky hak pa dyshim i shëmtuar është i nevojshëm për të zgjidhur një problem të çuditshëm në delegimin e ngjarjeve të iOS , i cili përndryshe do të parandalonte një trokitje kudo jashtë listës së lëshimit nga aktivizimi i kodit që mbyll listën me lëshim. Pasi të mbyllet menyja rënëse, këta mouseovermbajtës shtesë bosh hiqen.

Nëpërmjet atributeve të të dhënave

Shto data-bs-toggle="dropdown"në një lidhje ose buton për të ndërruar një listë rënëse.

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

Përmes JavaScript

Thirrni skedarët e lëshimit përmes JavaScript:

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

`data-bs-toggle="dropdown"`ende kërkohet

Pavarësisht nëse e telefononi listën tuaj të lëshimit përmes JavaScript ose në vend të kësaj përdorni data-api, data-bs-toggle="dropdown"kërkohet që të jetë gjithmonë i pranishëm në elementin e aktivizimit të listës rënëse.

Opsione

Meqenëse opsionet mund të kalohen nëpërmjet atributeve të të dhënave ose JavaScript, ju mund të shtoni një emër opsioni në data-bs-, si në data-bs-animation="{value}". Sigurohuni që të ndryshoni llojin e rastit të emrit të opsionit nga “ CamelCase ” në “ kebab-case ” kur kaloni opsionet përmes atributeve të të dhënave. Për shembull, përdorni data-bs-custom-class="beautifier"në vend të data-bs-customClass="beautifier".

Që nga Bootstrap 5.2.0, të gjithë komponentët mbështesin një atribut eksperimental të të dhënave të rezervuara data-bs-configqë mund të vendosë konfigurimin e thjeshtë të komponentit si një varg JSON. Kur një element ka data-bs-config='{"delay":0, "title":123}'dhe data-bs-title="456"atribute, titlevlera përfundimtare do të jetë 456dhe atributet e veçanta të të dhënave do të zëvendësojnë vlerat e dhëna në data-bs-config. Përveç kësaj, atributet ekzistuese të të dhënave janë në gjendje të strehojnë vlera JSON si data-bs-delay='{"show":0,"hide":150}'.

Emri	Lloji	E paracaktuar	Përshkrim
`autoClose`	boolean, varg	`true`	Konfiguro sjelljen e mbylljes automatike të listës rënëse: `true`- dropdown do të mbyllet duke klikuar jashtë ose brenda menysë rënëse. `false`- dropdown do të mbyllet duke klikuar butonin e ndërrimit dhe duke thirrur manualisht `hide`ose `toggle`metodën. (Gjithashtu nuk do të mbyllet duke shtypur `esc`tastin) `'inside'`- dropdown do të mbyllet (vetëm) duke klikuar brenda menysë rënëse. `'outside'`- dropdown do të mbyllet (vetëm) duke klikuar jashtë menysë rënëse. Shënim: menyja rënëse mund të mbyllet gjithmonë me `ESC`çelësin.
`boundary`	varg, element	`'clippingParents'`	Kufiri i kufizimit të tejmbushjes së menysë rënëse (zbatohet vetëm për modifikuesin preventOverflow të Popper). Si parazgjedhje është `clippingParents`dhe mund të pranojë një referencë HTMLElement (vetëm nëpërmjet JavaScript). Për më shumë informacion referojuni dokumenteve të detectOverflow të Popper .
`display`	varg	`'dynamic'`	Si parazgjedhje, ne përdorim Popper për pozicionim dinamik. Çaktivizoni këtë me `static`.
`offset`	varg, varg, funksion	`[0, 2]`	Kompensimi i zbritjes në lidhje me objektivin e tij. Ju mund të kaloni një varg në atributet e të dhënave me vlera të ndara me presje si: `data-bs-offset="10,20"`. Kur një funksion përdoret për të përcaktuar kompensimin, ai thirret me një objekt që përmban vendosjen e popper-it, referencën dhe rektat e popper-it si argumentin e tij të parë. Nyja DOM e elementit nxitës kalohet si argumenti i dytë. Funksioni duhet të kthejë një grup me dy numra: rrëshqitje , distancë . Për më shumë informacion referojuni dokumenteve të kompensimit të Popper-it .
`popperConfig`	null, objekt, funksion	`null`	Për të ndryshuar konfigurimin e paracaktuar të Popper të Bootstrap, shihni konfigurimin e Popper . Kur një funksion përdoret për të krijuar konfigurimin Popper, ai thirret me një objekt që përmban konfigurimin e paracaktuar të Popper të Bootstrap. Ju ndihmon të përdorni dhe bashkoni parazgjedhjen me konfigurimin tuaj. Funksioni duhet të kthejë një objekt konfigurimi për Popper.
`reference`	varg, element, objekt	`'toggle'`	Elementi i referencës së menysë rënëse. Pranon vlerat e `'toggle'`, `'parent'`, një referencë HTMLElement ose një objekt që ofron `getBoundingClientRect`. Për më shumë informacion referojuni dokumenteve të konstruktorit të Popper dhe dokumenteve të elementit virtual .

Përdorimi i funksionit me`popperConfig`

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

Metodat

Metoda	Përshkrim
`dispose`	Shkatërron listën e një elementi. (Heq të dhënat e ruajtura në elementin DOM)
`getInstance`	Metoda statike e cila ju lejon të merrni shembullin rënës të lidhur me një element DOM, mund ta përdorni si kjo: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Metoda statike e cila kthen një instancë rënëse të lidhur me një element DOM ose krijon një të re në rast se nuk ishte inicializuar. Mund ta përdorni si kjo: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Fsheh menynë rënëse të një shiriti të caktuar navigimi ose navigimi me skeda.
`show`	Shfaq menynë rënëse të një shiriti navigimi të caktuar ose navigimi me skeda.
`toggle`	Ndryshon menynë rënëse të një navigimi të caktuar navigimi ose me skeda.
`update`	Përditëson pozicionin e menysë rënëse të një elementi.

Ngjarjet

Të gjitha ngjarjet me zbritje aktivizohen në elementin ndërrues dhe më pas flluskohen. Kështu që mund të shtoni edhe dëgjues ngjarjesh në .dropdown-menuelementin prind '. hide.bs.dropdowndhe hidden.bs.dropdownngjarjet kanë një clickEventveti (vetëm kur lloji origjinal i Ngjarjes është click) që përmban një Objekt Ngjarje për ngjarjen e klikimit.

Lloji i ngjarjes	Përshkrim
`hide.bs.dropdown`	Ndizet menjëherë kur `hide`është thirrur metoda e shembullit.
`hidden.bs.dropdown`	Hapet kur fshirja e listës me zbritje ka përfunduar nga përdoruesi dhe kalimet CSS kanë përfunduar.
`show.bs.dropdown`	Ndizet menjëherë kur `show`thirret metoda e shembullit.
`shown.bs.dropdown`	Hapet kur menyja rënëse është bërë e dukshme për përdoruesin dhe kalimet CSS kanë përfunduar.

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

Dropdowns

Vështrim i përgjithshëm

Aksesueshmëria

Shembuj

Buton i vetëm

Butoni i ndarjes

Përmasat

Zbritje të errëta

Drejtimet

RTL

Në qendër

Dropup

Në qendër të rënies

Dropend

Dropstart

Artikujt e menysë

Aktiv

I paaftë

Shtrirja e menysë

Rreshtimi i përgjegjshëm

Opsionet e shtrirjes

Përmbajtja e menysë

Titujt

Ndarësit

Teksti

Format

Sjellja e mbylljes automatike

CSS

Variablat

Variablat Sass

Përzierjet

Përdorimi

Nëpërmjet atributeve të të dhënave

Përmes JavaScript

`data-bs-toggle="dropdown"`ende kërkohet

Opsione

Përdorimi i funksionit me`popperConfig`

Metodat

Ngjarjet

Dropdowns

Vështrim i përgjithshëm

Aksesueshmëria

Shembuj

Buton i vetëm

Butoni i ndarjes

Përmasat

Zbritje të errëta

Drejtimet

RTL

Në qendër

Dropup

Në qendër të rënies

Dropend

Dropstart

Artikujt e menysë

Aktiv

I paaftë

Shtrirja e menysë

Rreshtimi i përgjegjshëm

Opsionet e shtrirjes

Përmbajtja e menysë

Titujt

Titulli me zbritje

Ndarësit

Teksti

Format

Opsionet e zbritjes

Sjellja e mbylljes automatike

CSS

Variablat

Variablat Sass

Përzierjet

Përdorimi

Nëpërmjet atributeve të të dhënave

Përmes JavaScript

data-bs-toggle="dropdown"ende kërkohet

Opsione

Përdorimi i funksionit mepopperConfig

Metodat

Ngjarjet

`data-bs-toggle="dropdown"`ende kërkohet

Përdorimi i funksionit me`popperConfig`