Tlolela ho litaba tsa mantlha Tlolela ho li-docs navigation
in English

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:

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

'Me ka <a>likarolo:

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

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.

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

Le ho e sebelisa ho navbar:

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

Litsela

RTL

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

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>

Dropright

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

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

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

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

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.

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

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

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

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

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

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

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

Likahare tsa menyu

Lihlooho

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

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

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

Mohlala o mong oa mongolo o hlahang mahala ka har'a lethathamo la litheolelo.

'Me sena ke ho feta mohlala mongolo.

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

E ncha sebakeng seo? ngolisa U lebetse phasewete? 
<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>

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

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

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.

<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

Lintho tse fapaneng

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

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

Ka JavaScript

Letsetsa li-dropdown ka JavaScript:

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
  return 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

Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-bs-, joalo ka data-bs-offset="". Etsa bonnete ba hore o fetola mofuta oa nyeoe ea lebitso la khetho ho tloha ho camelCase ho ea ho kebab-case ha o fetisa likhetho ka litšobotsi tsa data. Ka mohlala, ho e-na le ho sebelisa data-bs-autoClose="false", sebelisa data-bs-auto-close="false".

Lebitso Mofuta Ea kamehla Tlhaloso
boundary khoele | element 'clippingParents' Moeli o thibelang ho phalla ha lenane la litheolelo (e sebetsa feela ho Popper's preventOverflow modifier). Ka mokhoa o 'clippingParents'ikhethileng ke 'me e ka amohela tšupiso ea HTMLElement (ka JavaScript feela). Ho fumana lintlha tse ling, sheba ho Popper's detectOverflow docs .
reference khoele | ntho | ntho 'toggle' Reference element ea menu e theoha. E amohela boleng ba 'toggle', 'parent', tšupiso ea HTMLElement kapa ntho e fanang ka getBoundingClientRect. Ho fumana lintlha tse ling, sheba litokomane tsa Popper tsa constructor docs le virtual element docs .
display khoele 'dynamic' Ka ho sa feleng, re sebelisa Popper bakeng sa boemo bo matla. Tlosa sena ka static.
offset sehlopha | khoele | tshebetso [0, 2]

Offset ea ho theoha ho amanang le sepheo sa eona. O ka fetisa khoele ho litšobotsi tsa data tse nang le boleng bo arohaneng ba comma joalo ka:data-bs-offset="10,20"

Ha ts'ebetso e sebelisoa ho fumana qeto, e bitsoa ka ntho e nang le popper placement, reference, le popper rects e le khang ea eona ea pele. The triggering element DOM node e fetisitsoe e le khang ea bobeli. Mosebetsi o tlameha ho khutlisa sehlopha se nang le linomoro tse peli: .[skidding, distance]

Ho fumana lintlha tse ling, sheba ho Popper's offset docs .
autoClose boole | 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 hidekapa togglemokhoa. (Hape e ke ke ea koaloa ka ho tobetsa esckonopo)
  • '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.
popperConfig null | ntho | tshebetso null

Ho fetola tlhophiso ea kamehla ea Bootstrap ea Popper, bona tlhophiso ea Popper .

Ha ts'ebetso e sebelisoa ho theha tlhophiso ea Popper, e bitsoa ka ntho e nang le tlhophiso ea kamehla ea Bootstrap ea Popper. E u thusa ho sebelisa le ho kopanya ea kamehla le tlhophiso ea hau. Ts'ebetso e tlameha ho khutlisa ntho e hlophisitsoeng bakeng sa Popper.

Ho sebelisa ts'ebetso lepopperConfig

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

Mekhoa

Mokhoa Tlhaloso
toggle E fetola menyetla ea ho theoha ea navbar e fanoeng kapa navigation e nang le li-tabbed.
show E bonts'a menu e theoha ea navbar e fanoeng kapa navigation e nang le li-tabbed.
hide E pata lenane la ho theoha la navbar e fanoeng kapa navigation e nang le li-tabbed.
update E kaonefatsa boemo ba ho theoha ha element.
dispose E senya ho theoha ha element. (E tlosa lintlha tse bolokiloeng karolong ea DOM)
getInstance Mokhoa o tsitsitseng o u lumellang ho fumana mohlala oa ho theoha o amanang le ntho ea DOM, u ka e sebelisa ka tsela ena:bootstrap.Dropdown.getInstance(element)
getOrCreateInstance Mokhoa o tsitsitseng o khutlisetsang mohlala o theohang o amanang le karolo ea DOM kapa ho theha e ncha haeba e sa qalisoa. U ka e sebelisa ka tsela ena:bootstrap.Dropdown.getOrCreateInstance(element)

Liketsahalo

Liketsahalo tsohle tse theolelang li fetisetsoa ho toggling element ebe lia ntlafala. Kahoo o ka eketsa bamameli ba ketsahalo ho karolo ea .dropdown-menumotsoali. hide.bs.dropdownmme hidden.bs.dropdowndiketsahalo di na le clickEventthepa (feela ha mofuta wa Ketsahalo wa pele e le click) o nang le Ntho ya Ketsahalo bakeng sa ketsahalo ya ho tobetse.

Mokhoa Tlhaloso
show.bs.dropdown E chesa hang-hang ha mokhoa oa pontšo o bitsoa.
shown.bs.dropdown E chesitsoe ha ho theoha ho se ho bonahala ho mosebelisi 'me liphetoho tsa CSS li phethiloe.
hide.bs.dropdown Mello hang-hang ha mokhoa oa ho pata mohlala o se o bitsoa.
hidden.bs.dropdown E tlositsoe ha dropdown e felile ho pateloa mosebelisi mme liphetoho tsa CSS li felile. 
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
  // do something...
})