Kalo te përmbajtja kryesore Kalo te navigimi i dokumenteve
in English

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 ARIArole="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.

Sidoqoftë, 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:

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

Dhe me <a>elemente:

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

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 me zbritje.

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

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

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

Drejtimet

RTL

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

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>

Dropright

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

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

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

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

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.

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

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

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">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. 
<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.

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

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

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

Përmbajtja e menysë

Titujt

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

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

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

Një shembull i tekstit që rrjedh lirshëm brenda menysë rënëse.

Dhe ky është më shumë tekst shembull.

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

E re këtu? Regjistrohu keni harruar fjalëkalimin? 
<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>

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

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

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.

<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

Variablat

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:             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($gray-900, 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;

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

Përmes JavaScript

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

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
  return new bootstrap.Dropdown(dropdownToggleEl)
})
data-bs-toggle="dropdown"ende kërkohet

Pavarësisht nëse e thërrisni 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

Opsionet mund të kalohen nëpërmjet atributeve të të dhënave ose JavaScript. Për atributet e të dhënave, shtoni emrin e opsionit në data-bs-, si në data-bs-offset="". 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, në vend që të përdorni data-bs-autoClose="false", përdorni data-bs-auto-close="false".

Emri Lloji E paracaktuar Përshkrim
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 .
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 .
display varg 'dynamic' Si parazgjedhje, ne përdorim Popper për pozicionim dinamik. Çaktivizoni këtë me static.
offset grup | varg | funksionin [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: .[skidding, distance]

Për më shumë informacion referojuni dokumenteve të kompensimit të Popper-it .
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 hideose togglemetodën. (Gjithashtu nuk do të mbyllet duke shtypur esctastin)
  • '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.
popperConfig null | objekt | funksionin 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, 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.

Përdorimi i funksionit mepopperConfig

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

Metodat

Metoda Përshkrim
toggle Ndryshon menynë rënëse të një navigimi të caktuar navigimi ose me skeda.
show Shfaq menynë rënëse të një shiriti navigimi të caktuar ose navigimi me skeda.
hide Fsheh menynë rënëse të një shiriti të caktuar navigimi ose navigimi me skeda.
update Përditëson pozicionin e menysë rënëse të një elementi.
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ë shembull në rënie të lidhur me një element DOM ose krijon një të ri në rast se nuk ishte inicializuar. Mund ta përdorni si kjo:bootstrap.Dropdown.getOrCreateInstance(element)

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.

Metoda Përshkrim
show.bs.dropdown Ndizet menjëherë kur thirret metoda e shembullit të shfaqjes.
shown.bs.dropdown Hapet kur menyja rënëse është bërë e dukshme për përdoruesin dhe kalimet CSS kanë përfunduar.
hide.bs.dropdown Ndizet menjëherë kur thirret metoda e shembullit të fshehjes.
hidden.bs.dropdown Hapet kur fshirja e listës me zbritje ka përfunduar nga përdoruesi dhe kalimet CSS kanë përfunduar. 
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
  // do something...
})