Hla mus rau cov ntsiab lus tseem ceeb Hla mus rau docs navigation
in English

Dropdowns

Toggle contextual overlays rau tso saib cov npe ntawm cov kev sib txuas thiab ntau ntxiv nrog Bootstrap dropdown plugin.

Ntawm nplooj ntawv no

Txheej txheem cej luam

Dropdowns yog toggleable, contextual overlays rau tso saib cov npe ntawm kev sib txuas thiab ntau dua. Lawv tau ua kev sib tham nrog cov suav nrog Bootstrap dropdown JavaScript plugin. Lawv nyob nraum toggled los ntawm txhaj, tsis yog hovering; qhov no yog kev txiav txim siab tsim qauv .

Dropdowns yog tsim los ntawm lub tsev qiv ntawv thib peb, Popper , uas muab qhov chaw nyob thiab pom qhov chaw pom. Nco ntsoov suav nrog popper.min.js ua ntej Bootstrap's JavaScript lossis siv bootstrap.bundle.min.js/ bootstrap.bundle.jsuas muaj Popper. Popper tsis yog siv los tso cov dropdowns hauv navbars txawm tias tsis tas yuav tsum muaj qhov chaw nyob.

Kev siv tau

Tus qauv WAI ARIA txhais cov role="menu"widget tiag tiag , tab sis qhov no yog qhov tshwj xeeb rau daim ntawv thov-zoo li cov ntawv qhia uas ua rau kev ua lossis kev ua haujlwm. ARIA cov ntawv qhia zaub mov tsuas yog muaj cov ntawv qhia zaub mov xwb, cov ntawv qhia zaub mov checkbox, xov tooj cua khawm cov ntawv qhia zaub mov, pab pawg xov tooj cua, thiab sub-menus.

Bootstrap's dropdowns, ntawm qhov tod tes, yog tsim los ua generic thiab siv tau rau ntau yam xwm txheej thiab cov qauv cim. Piv txwv li, nws muaj peev xwm tsim cov dropdowns uas muaj cov khoom siv ntxiv thiab cov ntawv tswj hwm, xws li kev tshawb nrhiav teb lossis cov ntawv nkag. Vim li no, Bootstrap tsis cia siab tias (lossis cia li ntxiv) ib qho ntawm cov khoom rolethiab aria-cov yam ntxwv xav tau rau cov ntawv qhia ARIA tseeb . Cov kws sau ntawv yuav tsum suav nrog cov cwj pwm tshwj xeeb no lawv tus kheej.

Txawm li cas los xij, Bootstrap ntxiv kev txhawb nqa rau feem ntau cov txheej txheem cov ntawv qhia zaub mov sib cuam tshuam, xws li muaj peev xwm txav mus los ntawm tus kheej .dropdown-itemcov ntsiab lus siv tus cursor yuam sij thiab kaw cov ntawv qhia zaub mov nrog tus ESCyuam sij.

Piv txwv

Qhwv lub dropdown's toggle (koj lub pob lossis qhov txuas) thiab cov ntawv qhia zaub mov hauv qab .dropdown, lossis lwm lub ntsiab lus uas tshaj tawm position: relative;. Dropdowns tuaj yeem tshwm sim los ntawm <a>lossis <button>cov ntsiab lus kom haum rau koj cov kev xav tau. Cov piv txwv qhia ntawm no siv cov ntsiab lus semantic <ul>qhov tsim nyog, tab sis kev cai cim tau txais kev txhawb nqa.

Ib lub pob

Ib qho .btntwg tuaj yeem hloov pauv mus rau hauv qhov hloov pauv nrog qee qhov kev hloov pauv. Nov yog qhov koj tuaj yeem muab lawv ua haujlwm nrog ob lub <button>ntsiab lus:

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

Thiab nrog <a>cov ntsiab lus:

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

Qhov zoo tshaj plaws yog koj tuaj yeem ua qhov no nrog txhua lub pob variant, ib yam nkaus:

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

Split khawm

Ib yam li ntawd, tsim phua khawm dropdowns nrog zoo tib yam markup raws li ib tug khawm dropdowns, tab sis nrog rau qhov sib ntxiv ntawm .dropdown-toggle-splitrau kom qhov chaw nyob ib ncig ntawm lub dropdown caret.

Peb siv cov chav kawm ntxiv no kom txo tau cov kab rov tav paddingntawm ob sab ntawm cov cart los ntawm 25% thiab tshem tawm cov margin-leftuas tau ntxiv rau cov pob tsis tu ncua. Cov kev hloov pauv ntxiv no ua rau qhov chaw zov me nyuam nyob rau hauv qhov sib cais khawm thiab muab qhov chaw sib tsoo ntau dua qhov tsim nyog ntawm ib sab ntawm lub pob tseem ceeb.

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

Qhov loj me

Khawm dropdowns ua haujlwm nrog cov nyees khawm ntawm txhua qhov ntau thiab tsawg, suav nrog lub neej ntawd thiab faib cov nyees khawm poob.

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

Tsaus dropdowns

Xaiv rau hauv qhov tsaus nti dropdowns kom phim qhov tsaus navbar lossis kev cai style los ntawm kev ntxiv .dropdown-menu-darkrau qhov uas twb muaj lawm .dropdown-menu. Tsis tas yuav hloov pauv rau cov khoom poob.

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

Thiab muab tso rau siv nyob rau hauv ib tug 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>

Cov lus qhia

RTL

Cov lus qhia yog mirrored thaum siv Bootstrap hauv RTL, lub ntsiab lus .dropstartyuav tshwm nyob rau sab xis.

Dropup

Trigger dropdown menus saum cov ntsiab lus los ntawm kev ntxiv .dropuprau niam txiv lub caij.

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

Trigger dropdown menus ntawm sab xis ntawm cov ntsiab lus los ntawm kev ntxiv .dropendrau cov niam txiv caij.

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

Trigger dropdown menus nyob rau sab laug ntawm cov ntsiab lus los ntawm kev ntxiv .dropstartrau cov niam txiv caij.

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

Koj tuaj yeem siv <a>lossis <button>cov khoom ua cov khoom poob.

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

Koj tseem tuaj yeem tsim cov khoom tsis sib tham sib cuam tshuam nrog .dropdown-item-text. Xav tias dawb rau style ntxiv nrog kev cai CSS lossis cov ntawv siv hluav taws xob.

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

Active

Ntxiv .activerau cov khoom hauv dropdown kom style lawv li nquag . Txhawm rau nthuav tawm lub xeev nquag mus rau kev pabcuam thev naus laus zis, siv tus aria-currentcwj pwm - siv tus pagenqi rau nplooj ntawv tam sim no, lossis truerau cov khoom tam sim no hauv ib txheej.

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

Neeg tsis taus

Ntxiv .disabledrau cov khoom hauv dropdown kom style lawv li neeg tsis taus .

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

Los ntawm lub neej ntawd, cov ntawv qhia zaub mov poob cia li tso 100% los ntawm sab saum toj thiab sab laug ntawm nws niam nws txiv. Koj tuaj yeem hloov qhov no nrog cov chav qhia .drop*qhia, tab sis koj tuaj yeem tswj tau lawv nrog cov chav kawm hloov kho ntxiv.

Ntxiv .dropdown-menu-endrau .dropdown-menutxoj cai dlhos cov ntawv qhia zaub mov. Cov lus qhia yog mirrored thaum siv Bootstrap hauv RTL, lub ntsiab lus .dropdown-menu-endyuav tshwm rau sab laug.

Tau taub hau! Dropdowns yog positioned ua tsaug rau Popper tshwj tsis yog thaum lawv muaj nyob rau hauv ib tug 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>

Responsive alignment

Yog tias koj xav siv cov kev sib raug zoo, lov tes taw dynamic positioning los ntawm kev ntxiv tus data-bs-display="static"cwj pwm thiab siv cov chav kawm hloov pauv hloov.

Txhawm rau kho txoj cai ntawm cov ntawv qhia zaub mov nrog rau qhov muab breakpoint lossis loj dua, ntxiv .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>

Txhawm rau ua kom sab laug ntawm cov ntawv qhia zaub mov nrog rau qhov muab faib lossis loj dua, ntxiv .dropdown-menu-endthiab .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>

Nco ntsoov tias koj tsis tas yuav ntxiv tus data-bs-display="static"cwj pwm rau cov nyees khawm dropdown hauv navbars, vim Popper tsis siv hauv navbars.

Alignment xaiv

Noj feem ntau ntawm cov kev xaiv uas tau qhia saum toj no, ntawm no yog chav ua noj me me dab dej demo ntawm ntau yam kev xaiv kev xaiv hauv ib qho chaw.

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

Ntawv qhia zaub mov

Headers

Ntxiv ib lub header rau daim ntawv lo rau ntu ntawm kev ua hauv ib qho ntawv qhia zaub mov.

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

Sib faib

Cais cov pab pawg ntawm cov khoom noj uas muaj feem xyuam nrog lub divider.

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

Ntawv nyeem

Muab cov ntawv sau ntawv pub dawb rau hauv cov ntawv qhia zaub mov nrog cov ntawv thiab siv cov khoom siv sib nrug . Nco ntsoov tias koj yuav xav tau cov qauv sizing ntxiv kom txwv cov ntawv qhia zaub mov dav.

Qee cov ntawv piv txwv uas yog dawb-ntws hauv cov ntawv qhia zaub mov.

Thiab qhov no yog cov ntawv piv txwv ntxiv.

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

Cov ntawv

Muab ib daim ntawv tso rau hauv cov ntawv qhia zaub mov, los yog ua rau hauv cov ntawv qhia zaub mov, thiab siv cov paj los yog cov khoom siv padding kom muab qhov chaw tsis zoo uas koj xav tau.

Tshiab nyob ib ncig ntawm no? Sau npe Tsis nco qab lo lus zais? 
<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>

Siv data-bs-offsetlos yog data-bs-referencehloov qhov chaw ntawm lub dropdown.

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

Nws pib kaw tus cwj pwm

Los ntawm lub neej ntawd, cov ntawv qhia zaub mov raug kaw thaum nias sab hauv lossis sab nraud ntawm cov ntawv qhia zaub mov. Koj tuaj yeem siv qhov autoClosekev xaiv los hloov tus cwj pwm ntawm qhov kev poob qis.

<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

Hloov pauv

Variables rau tag nrho cov dropdowns:

$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($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:           $dropdown-padding-y $dropdown-item-padding-x;

Variables rau qhov tsaus nti dropdown :

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

Cov kev hloov pauv rau CSS-based carets uas qhia txog kev sib cuam tshuam ntawm kev poob qis:

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

Mixins

Mixins yog siv los tsim CSS-based carets thiab tuaj yeem pom hauv 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;
    }
  }
}

Kev siv

Ntawm cov ntaub ntawv tus cwj pwm lossis JavaScript, lub dropdown plugin toggles zais cov ntsiab lus (dropdown menus) los ntawm toggling .showchav kawm ntawm niam txiv .dropdown-menu. Tus data-bs-toggle="dropdown"cwj pwm yog tso siab rau kev kaw cov ntawv qhia zaub mov ntawm qib kev thov, yog li nws yog ib lub tswv yim zoo rau ib txwm siv nws.

Ntawm cov khoom siv kov, qhib lub dropdown ntxiv cov mouseoverneeg ua haujlwm khoob rau cov me nyuam tam sim ntawd ntawm lub <body>caij. Qhov no lees paub dab tuag hack yog tsim nyog los ua hauj lwm nyob ib ncig ntawm ib tug quirk nyob rau hauv iOS no 'kev tshwm sim delegation , uas yuav txwv tsis pub ib tug kais nyob qhov twg los ntawm lub dropdown los ntawm triggering cov cai uas kaw lub dropdown. Thaum lub dropdown kaw lawm, cov khoom siv khoob khoob mouseoverno raug tshem tawm.

Los ntawm cov ntaub ntawv attributes

Ntxiv data-bs-toggle="dropdown"rau qhov txuas lossis khawm kom toggle ib qho kev poob.

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

Ntawm JavaScript

Hu rau dropdowns ntawm JavaScript:

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

Txawm hais tias koj hu koj lub dropdown ntawm JavaScript los yog siv cov ntaub ntawv-api, data-bs-toggle="dropdown"ib txwm yuav tsum muaj nyob rau hauv lub dropdown lub ntsiab lus.

Kev xaiv

Cov kev xaiv tuaj yeem dhau los ntawm cov ntaub ntawv tus cwj pwm lossis JavaScript. Rau cov ntaub ntawv tus cwj pwm, ntxiv rau qhov kev xaiv npe rau data-bs-, xws li hauv data-bs-offset="". Nco ntsoov hloov cov ntaub ntawv ntawm lub npe xaiv los ntawm camelCase mus rau kebab-cov ntaub ntawv thaum dhau cov kev xaiv ntawm cov ntaub ntawv cwj pwm. Piv txwv li, es tsis txhob siv data-bs-autoClose="false", siv data-bs-auto-close="false".

Lub npe Hom Default Kev piav qhia
boundary hlua | keeb 'clippingParents' Overflow txwv ciam teb ntawm dropdown menu (tsuas yog siv rau Popper's PreventOverflow modifier). Los ntawm lub neej ntawd nws yog 'clippingParents'thiab tuaj yeem lees txais HTMLElement siv (ntawm JavaScript nkaus xwb). Yog xav paub ntxiv mus saib Popper's detectOverflow docs .
reference hlua | element | khoom 'toggle' Reference element ntawm dropdown menu. Txais qhov tseem ceeb ntawm 'toggle', 'parent', ib qho HTMLElement siv los yog ib qho khoom muab getBoundingClientRect. Yog xav paub ntxiv mus saib Popper's constructor docs thiab virtual element docs .
display txoj hlua 'dynamic' Los ntawm lub neej ntawd, peb siv Popper rau dynamic positioning. Disable qhov no nrog static.
offset array | hlua | muaj nuj nqi [0, 2]

Offset ntawm dropdown txheeb ze rau nws lub hom phiaj. Koj tuaj yeem hla ib txoj hlua hauv cov ntaub ntawv tus cwj pwm nrog comma cais qhov tseem ceeb xws li:data-bs-offset="10,20"

Thaum muaj nuj nqi yog siv los txiav txim qhov offset, nws raug hu nrog ib yam khoom uas muaj cov popper qhov chaw, siv, thiab popper rects raws li nws thawj qhov kev sib cav. Lub triggering element DOM node tau dhau los ua qhov kev sib cav thib ob. Cov haujlwm yuav tsum xa rov qab ib qho array nrog ob tus lej: .[skidding, distance]

Yog xav paub ntxiv mus saib Popper's offset docs .
autoClose boolean | txoj hlua true

Configure qhov pib kaw tus cwj pwm ntawm dropdown:

  • true- lub dropdown yuav raug kaw los ntawm txhaj rau sab nraud lossis sab hauv cov ntawv qhia zaub mov.
  • false- lub dropdown yuav raug kaw los ntawm nias lub khawm toggle thiab manually hu hidelos yog toggletxoj kev. (Kuj yuav tsis raug kaw los ntawm nias lub pob esc)
  • 'inside'- lub dropdown yuav raug kaw (tsuas yog) los ntawm txhaj rau hauv cov ntawv qhia zaub mov.
  • 'outside'- lub dropdown yuav raug kaw (tsuas yog) los ntawm txhaj rau sab nraum cov ntawv qhia zaub mov.
popperConfig null | khoom | muaj nuj nqi null

Txhawm rau hloov Bootstrap's default Popper config, saib Popper's configuration .

Thaum muaj nuj nqi siv los tsim Popper teeb tsa, nws tau hu nrog ib qho khoom uas muaj Bootstrap's default Popper configuration. Nws pab koj siv thiab ua ke lub neej ntawd nrog koj tus kheej configuration. Cov haujlwm yuav tsum xa rov qab cov khoom teeb tsa rau Popper.

Siv ua haujlwm nrogpopperConfig

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

Cov txheej txheem

Txoj kev Kev piav qhia
toggle Toggles lub dropdown ntawv qhia zaub mov ntawm ib tug muab navbar los yog tabbed navigation.
show Qhia cov ntawv qhia zaub mov dropdown ntawm ib tug muab navbar los yog tabbed navigation.
hide Nias cov ntawv qhia zaub mov ntawm ib qho navbar muab lossis tabbed navigation.
update Hloov tshiab txoj hauj lwm ntawm ib qho kev poob qis.
dispose Ua kom ib qho kev poob qis. (Tshem cov ntaub ntawv khaws cia ntawm DOM lub caij)
getInstance Txoj kev zoo li qub uas tso cai rau koj kom tau txais cov piv txwv dropdown txuam nrog DOM lub caij, koj tuaj yeem siv nws zoo li no:bootstrap.Dropdown.getInstance(element)
getOrCreateInstance Txoj kev zoo li qub uas xa rov qab qhov piv txwv poob cuam tshuam rau DOM lub caij lossis tsim ib qho tshiab yog tias nws tsis tau pib. Koj tuaj yeem siv nws li no:bootstrap.Dropdown.getOrCreateInstance(element)

Cov xwm txheej

Tag nrho cov txheej xwm dropdown raug rho tawm haujlwm ntawm lub cim toggling thiab tom qab ntawd bubbled. Yog li koj tuaj yeem ntxiv cov neeg mloog cov xwm txheej ntawm tus .dropdown-menuniam txiv lub ntsiab. hide.bs.dropdownthiab hidden.bs.dropdowncov xwm txheej muaj cov clickEventcuab yeej (tsuas yog thaum thawj hom Txheej Txheem yog click) uas muaj Cov Txheej Txheem Txheej Txheem rau qhov kev tshwm sim nyem.

Txoj kev Kev piav qhia
show.bs.dropdown Hluav taws kub tam sim ntawd thaum hu ua yeeb yam piv txwv.
shown.bs.dropdown Raug rho tawm haujlwm thaum lub dropdown tau pom rau tus neeg siv thiab CSS kev hloov pauv tau ua tiav.
hide.bs.dropdown Hluav taws kub tam sim ntawd thaum txoj kev zais piv txwv tau raug hu.
hidden.bs.dropdown Raug rho tawm haujlwm thaum lub dropdown tiav lawm muab zais los ntawm tus neeg siv thiab CSS kev hloov pauv tau ua tiav. 
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
  // do something...
})