Litheohelang

Fetolela likoahelo tsa maemo bakeng sa ho hlahisa manane a likhokahano le tse ling ka plugin ea Bootstrap dropdown.

Leqepheng lena

Kakaretso

Li-dropdown li ka fetoha, li koaheloa ka maemo bakeng sa ho hlahisa manane a lihokelo le tse ling. Li entsoe hore li sebelisane le plugin ea JavaScript e kenyellelitsoeng ea Bootstrap. Li toggle ka ho tobetsa, eseng ka ho hover; ena ke qeto e entsoeng ka boomo .

Li-dropdown li hahiloe holim'a laeborari ea batho ba boraro, Popper , e fanang ka boemo bo matla le ho lemoha pono. Etsa bonnete ba hore o kenyelletsa popper.min.js pele ho Bootstrap's JavaScript kapa sebelisa bootstrap.bundle.min.js/ bootstrap.bundle.jse nang le Popper. Popper ha e sebelisoe ho beha li-dropdown ho li-navbars leha ho le joalo ho sa hlokahale hore ho behoe maemo ka matla.

Ho fihlella

Tekanyetso ea WAI ARIA e hlalosa role="menu"widget ea 'nete , empa sena se tobane le menyetla e ts'oanang le ts'ebeliso e hlahisang liketso kapa mesebetsi. Li-menu tsa ARIA li ka ba le lintho tsa menyetla feela, li-menu tsa li-checkbox, li-konopo tsa seea-le-moea, lihlopha tsa likonopo tsa seea-le-moea, le li-menus tse nyane.

Li-dropdown tsa Bootstrap, ka lehlakoreng le leng, li etselitsoe ho ba tse akaretsang le tse sebetsang maemong a fapaneng le meaho ea li-markup. Mohlala, hoa khonahala ho theha li-dropdown tse nang le lintlha tse eketsehileng le litsamaiso tsa liforomo, joalo ka libaka tsa ho batla kapa liforomo tsa ho kena. Ka lebaka lena, Bootstrap ha e lebelle (kapa ho eketsa ka bo eona) efe kapa efe ea rolelitšobotsi aria-tse hlokahalang bakeng sa menyetla ea 'nete ea ARIA . Bangoli ba tla tlameha ho kenyelletsa litšobotsi tsena ka bobona.

Leha ho le joalo, Bootstrap e eketsa ts'ehetso e hahelletsoeng bakeng sa litšebelisano tse ngata tsa li-keyboard tse tloaelehileng, joalo ka bokhoni ba ho tsamaea ka har'a .dropdown-itemlikarolo tsa motho ka mong u sebelisa linotlolo tsa cursor le ho koala menyu ka ESCsenotlolo.

Mehlala

Qetella toggle ea dropdown (konopo kapa sehokelo sa hau) le menu e theoha ka har'a .dropdown, kapa ntho e 'ngoe e phatlalatsang position: relative;. Li-dropdown li ka hlahisoa ho tsoa ho <a>kapa <button>likarolo ho lekana litlhoko tsa hau hantle. Mehlala e bontšitsoeng mona e sebelisa <ul>likarolo tsa semantic moo ho loketseng, empa li-markup tsa tloaelo lia tšehetsoa.

Konopo e le 'ngoe

E 'ngoe le e 'ngoe .btne ka fetoloa mokhoa oa ho theoha ka liphetoho tse ling. Mona ke hore na u ka li sebelisa joang ka <button>likarolo life kapa life:

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>

'Me ka <a>likarolo:

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>

Karolo e molemohali ke hore o ka etsa sena ka mofuta ofe kapa ofe oa konopo, hape:

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

Konopo ea ho arola

Ka mokhoa o ts'oanang, theha li-dropdown tsa konopo tse arohaneng tse nang le letšoao le ts'oanang le likonopo tse theohang, empa ka kenyelletso ea .dropdown-toggle-splitsebaka se nepahetseng ho potoloha sebaka sa tlhokomelo.

Re sebelisa sehlopha sena se eketsehileng ho fokotsa sebaka se otlolohileng paddingka mahlakoreng a mabeli a tlhokomelo ka 25% le ho tlosa se margin-lefteketsoang bakeng sa ho theoha ha likonopo tse tloaelehileng. Liphetoho tseo tse ling li boloka tlhokomelo e tsepamisitsoe ka har'a konopo ea petsoha 'me e fana ka sebaka sa ho otla se lekaneng se haufi le konopo e kholo.

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

Boholo

Likonopo tse theohang li sebetsa ka likonopo tsa boholo bohle, ho kenyeletsoa li-button tse theolelang le tse arohaneng.

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

Li-dropdown tse lefifi

Kena ho li-dropdown tse lefifi ho tsamaisana le navbar e lefifi kapa setaele se ikhethileng ka ho kenyelletsa .dropdown-menu-darkho se seng se ntse se le teng .dropdown-menu. Ha ho liphetoho tse hlokahalang linthong tse theohang.

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>

Le ho e sebelisa ho navbar:

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>

Litsela

RTL

Litaelo li bonts'oa ha u sebelisa Bootstrap ho RTL, moelelo .dropstarto tla hlaha ka lehlakoreng le letona.

E bohareng

Etsa hore lethathamo la litheolelo le behole ka tlase ho .dropdown-centerntho ea motsoali.

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>

Tloha

Kenya lenane la litheolelo tse kaholimo ho likarolo ka ho kenyelletsa .dropupkarolo ea motsoali.

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

Dropup e bohareng

Etsa hore lethathamo la litloho le behole kaholimo ho .dropup-centerntho ea motsoali.

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>

Lahla

Lahlela li-menu tse theohang ka letsohong le letona la likarolo ka ho kenyelletsa .dropendkarolo ea motsoali.

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

Hlahisa dimenu tse theohang ka ho le letshehadi la dielemente ka ho kenya .dropstartkarolo ya motswadi.

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

U ka sebelisa <a>kapa <button>likarolo e le lintho tse theolelang.

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>

U ka boela ua etsa lintho tse theolelang tse sa sebelisaneng ka .dropdown-item-text. Ikutloe u lokolohile ho etsa setaele ho feta ka CSS ea tloaelo kapa lisebelisoa tsa mongolo.

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>

E sebetsa

Kenya .activelinthong tse hlahang lethathamong la litheolelo ho li etsa hore li sebetse . Ho fetisetsa boemo bo sebetsang ho litheknoloji tse thusang, sebelisa aria-currenttšobotsi - sebelisa pageboleng ba leqephe la hajoale, kapa truebakeng sa ntho ea hajoale sete.

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>

E holofetse

Kenya .disabledlinthong tse hlahang lethathamong la litheolelo ho li etsa joalo ka ha li koaletsoe .

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>

Ka mokhoa o ikhethileng, lethathamo la li-dropdown le beoa ka bo eona 100% ho tloha holimo le ka lehlakoreng le letšehali la motsoali oa eona. O ka fetola sena ka .drop*litlelase tsa tataiso, empa o ka li laola hape ka litlelase tse ling tsa ho fetola.

Eketsa .dropdown-menu-endho a .dropdown-menuho le letona lokisetsa menu e theoha. Litaelo li bonts'oa ha u sebelisa Bootstrap ho RTL, moelelo .dropdown-menu-endo tla hlaha ka lehlakoreng le letšehali.

Hlokomela! Li-dropdown li behiloe ka lebaka la Popper ntle le ha li le ka har'a navbar.

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>

Ho tsamaisana le karabelo

Haeba u batla ho sebelisa tekano e arabelang, tima boemo bo matla ka ho eketsa data-bs-display="static"semelo le ho sebelisa litlelase tse arabelang.

Ho hokahanya lethathamo la li- dropdown le sebaka se fanoeng kapa se seholoanyane, eketsa .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>

Ho ikamahanya ka ho le letšehali ho menu e theoha le sebaka se fanoeng kapa se seholoanyane, eketsa .dropdown-menu-endle .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>

Hlokomela hore ha ho hlokahale hore u kenye data-bs-display="static"li-buttons ho li-navbar, kaha Popper ha e sebelisoe ho navbar.

Likhetho tsa ho tsamaisana

Re nka boholo ba likhetho tse bontšitsoeng ka holimo, mona ke setšoantšo se senyenyane sa sinki ea kichineng ea likhetho tse fapaneng tsa ho lokisoa sebakeng se le seng.

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>

Lihlooho

Kenya hlooho ho beha likarolo tsa liketso ho menu efe kapa efe e theolelang.

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>

Ba arolang

Arola lihlopha tsa lintho tse amanang le menu ka karohano.

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>

Mongolo

Beha mongolo o fe kapa o fe ka har'a lethathamo la litheolelo 'me u sebelise lisebelisoa tsa sebaka . Hlokomela hore mohlomong u tla hloka mekhoa e meng ea ho etsa boholo ho fokotsa bophara ba menu.

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>

Mefuta

Beha foromo ka har'a menu e theoha, kapa u e etse lethathamong la li-dropdown, 'me u sebelise lisebelisoa tsa marang-rang kapa tsa padding ho e fa sebaka se fosahetseng seo u se hlokang.

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>

Sebelisa data-bs-offsetkapa data-bs-referenceho fetola sebaka sa ho theoha.

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>

Boitšoaro ba ho koala ka bohona

Ka mokhoa o ikhethileng, lethathamo la li-dropdown le koetsoe ha u tobetsa ka hare kapa ka ntle ho menu e theoha. U ka sebelisa autoClosekhetho ho fetola mokhoa ona oa ho theoha.

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

Lintho tse fapaneng

E kentsoe ho v5.2.0

E le karolo ea mokhoa oa ho fetoha oa CSS oa Bootstrap, li-dropdown joale li sebelisa mefuta-futa ea CSS ea lehae .dropdown-menubakeng sa ho ntlafatsa nako ea sebele. Litekanyetso tsa mefuta-futa ea CSS li behiloe ka Sass, kahoo mokhoa oa Sass o ntse o tšehetsoa, le oona.

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

Ho itloaetsa ka mefuta e fapaneng ea CSS ho ka bonoa .dropdown-menu-darksehlopheng moo re fetisang litekanyetso tse ikhethileng ntle le ho kenyelletsa likhetho tse peli tsa 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};

Mefuta e fapaneng ea Sass

Liphetoho bakeng sa li-dropdown tsohle:

$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

Liphetoho bakeng sa dropdown e lefifi :

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

Liphetoho bakeng sa li-carets tse thehiloeng ho CSS tse bonts'ang tšebelisano ea ho theoha:

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

Metsoako

Li-mixin li sebelisoa ho hlahisa li-carets tse thehiloeng ho CSS 'me li ka fumanoa ho 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;
    }
  }
}

Tšebeliso

Ka litšoaneleho tsa data kapa JavaScript, plugin e theoha e fetola litaba tse patiloeng (menu e theohang) ka ho fetolela .showsehlopha ho motsoali .dropdown-menu. Tšobotsi e data-bs-toggle="dropdown"ts'epiloe bakeng sa ho koala limmapa tse theohang boemong ba ts'ebeliso, ka hona ke mohopolo o motle ho e sebelisa kamehla.

Ho lisebelisoa tse nolofalitsoeng ke ho ama, ho bula ho theoha ho eketsa lisebelisoa tse se nang letho mouseoverho bana ba haufi ba <body>ntho eo. Ts'ebetso ena e mpe e ea hlokahala ho sebetsana le quirk ho baemeli ba ketsahalo ea iOS , e neng e ka thibela pompo kae kapa kae ka ntle ho metheo hore e se ke ea qala khoutu e koalang ho theoha. Hang ha dropdown e koetsoe, lisebelisoa tsena tse ling tse se nang letho mouseoverlia tlosoa.

Ka litšobotsi tsa data

Kenya data-bs-toggle="dropdown"sehokelong kapa konopong ho totobetsa ho theoha.

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

Ka JavaScript

Letsetsa li-dropdown ka JavaScript:

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

`data-bs-toggle="dropdown"`e ntse e hlokahala

Ho sa tsotelehe hore na u letsetsa ho theoha ha hau ka JavaScript kapa ho e-na le hoo u sebelisa data-api, data-bs-toggle="dropdown"kamehla ho hlokahala hore u be teng karolong ea "trigger" e theoha.

Dikgetho

Kaha likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript, u ka kenyelletsa lebitso la khetho ho data-bs-, joalo ka data-bs-animation="{value}". Etsa bonnete ba hore o fetola mofuta oa nyeoe ea lebitso la khetho ho tloha " camelCase "ho " kebab-case " ha o fetisa likhetho ka litšobotsi tsa data. Ka mohlala, sebelisa data-bs-custom-class="beautifier"ho e-na le data-bs-customClass="beautifier".

Ho tloha ka Bootstrap 5.2.0, likarolo tsohle li ts'ehetsa tlhahlobo ea data e bolokiloeng data-bs-confige ka bolokang tlhophiso e bonolo ea karolo joalo ka khoele ea JSON. Ha element e na data-bs-config='{"delay":0, "title":123}'le data-bs-title="456"litšoaneleho, boleng ba ho qetela titlebo tla ba 456'me lintlha tse arohaneng tsa data li tla feta boleng bo fanoeng ho data-bs-config. Ntle le moo, litšoaneleho tse teng tsa data li khona ho boloka boleng ba JSON joalo ka data-bs-delay='{"show":0,"hide":150}'.

Lebitso	Mofuta	Ea kamehla	Tlhaloso
`autoClose`	boolean, khoele	`true`	Lokisa mokhoa oa ho koala ka bohona oa ho theoha: `true`- ho theoha ho tla koaloa ka ho tobetsa ka ntle kapa ka har'a menu e theoha. `false`- dropdown e tla koaloa ka ho tobetsa konopo ea toggle le ho letsetsa ka letsoho `hide`kapa `toggle`mokhoa. (Hape e ke ke ea koaloa ka ho tobetsa `esc`konopo) `'inside'`- ho theoha ho tla koaloa (feela) ka ho tobetsa ka har'a menu e theoha. `'outside'`- ho theoha ho tla koaloa (feela) ka ho tobetsa ka ntle ho menu e theoha. Ela hloko: dropdown e ka lula e koetsoe ka `ESC`senotlolo.
`boundary`	khoele, element	`'clippingParents'`	Overflow constraint boundary of the dropdown menu (applies only to Popper’s preventOverflow modifier). By default it’s `clippingParents` and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper’s detectOverflow docs.
`display`	string	`'dynamic'`	By default, we use Popper for dynamic positioning. Disable this with `static`.
`offset`	array, string, function	`[0, 2]`	Offset of the dropdown relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset="10,20"`. When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: skidding, distance. For more information refer to Popper’s offset docs.
`popperConfig`	null, object, function	`null`	To change Bootstrap’s default Popper config, see Popper’s configuration. When a function is used to create the Popper configuration, it’s called with an object that contains the Bootstrap’s default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper.
`reference`	string, element, object	`'toggle'`	Reference element of the dropdown menu. Accepts the values of `'toggle'`, `'parent'`, an HTMLElement reference or an object providing `getBoundingClientRect`. For more information refer to Popper’s constructor docs and virtual element docs.

Using function with `popperConfig`

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

Methods

Method	Description
`dispose`	Destroys an element’s dropdown. (Removes stored data on the DOM element)
`getInstance`	Static method which allows you to get the dropdown instance associated to a DOM element, you can use it like this: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Static method which returns a dropdown instance associated to a DOM element or create a new one in case it wasn’t initialized. You can use it like this: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Hides the dropdown menu of a given navbar or tabbed navigation.
`show`	Shows the dropdown menu of a given navbar or tabbed navigation.
`toggle`	Toggles the dropdown menu of a given navbar or tabbed navigation.
`update`	Updates the position of an element’s dropdown.

Events

All dropdown events are fired at the toggling element and then bubbled up. So you can also add event listeners on the .dropdown-menu’s parent element. hide.bs.dropdown and hidden.bs.dropdown events have a clickEvent property (only when the original Event type is click) that contains an Event Object for the click event.

Event type	Description
`hide.bs.dropdown`	Fires immediately when the `hide` instance method has been called.
`hidden.bs.dropdown`	Fired when the dropdown has finished being hidden from the user and CSS transitions have completed.
`show.bs.dropdown`	Fires immediately when the `show` instance method is called.
`shown.bs.dropdown`	Fired when the dropdown has been made visible to the user and CSS transitions have completed.

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

Litheohelang

Kakaretso

Ho fihlella

Mehlala

Konopo e le 'ngoe

Konopo ea ho arola

Boholo

Li-dropdown tse lefifi

Litsela

RTL

E bohareng

Tloha

Dropup e bohareng

Lahla

Dropstart

Lintho tsa menu

E sebetsa

E holofetse

Ho tsamaisana ha menu

Ho tsamaisana le karabelo

Likhetho tsa ho tsamaisana

Likahare tsa menyu

Lihlooho

Ba arolang

Mongolo

Mefuta

Boitšoaro ba ho koala ka bohona

CSS

Lintho tse fapaneng

Mefuta e fapaneng ea Sass

Metsoako

Tšebeliso

Ka litšobotsi tsa data

Ka JavaScript

`data-bs-toggle="dropdown"`e ntse e hlokahala

Dikgetho

Using function with `popperConfig`

Methods

Events

Litheohelang

Kakaretso

Ho fihlella

Mehlala

Konopo e le 'ngoe

Konopo ea ho arola

Boholo

Li-dropdown tse lefifi

Litsela

RTL

E bohareng

Tloha

Dropup e bohareng

Lahla

Dropstart

Lintho tsa menu

E sebetsa

E holofetse

Ho tsamaisana ha menu

Ho tsamaisana le karabelo

Likhetho tsa ho tsamaisana

Likahare tsa menyu

Lihlooho

Hlooho e theoha

Ba arolang

Mongolo

Mefuta

Likhetho tse theohang

Boitšoaro ba ho koala ka bohona

CSS

Lintho tse fapaneng

Mefuta e fapaneng ea Sass

Metsoako

Tšebeliso

Ka litšobotsi tsa data

Ka JavaScript

data-bs-toggle="dropdown"e ntse e hlokahala

Dikgetho

Using function with popperConfig

Methods

Events

`data-bs-toggle="dropdown"`e ntse e hlokahala

Using function with `popperConfig`