Dropdowns

Ampifamadiho ny overlay contextual amin'ny fampisehoana lisitry ny rohy sy ny maro hafa miaraka amin'ny plugin bootstrap dropdown.

Amin'ity pejy ity

Overview

Ny dropdowns dia azo toggle, overlay contextual mba hampisehoana ny lisitry ny rohy sy ny maro hafa. Izy ireo dia natao hifaneraserana miaraka amin'ny plugin Bootstrap dropdown JavaScript. Avadika amin'ny alalan'ny fanindriana izy ireo, fa tsy amin'ny fanodinkodinana; Fanapahan - kevitra noforonina izany .

Ny dropdowns dia naorina amin'ny tranomboky an'ny antoko fahatelo, Popper , izay manome toerana mavitrika sy fitsikilovana. Aza hadino ny mampiditra popper.min.js alohan'ny JavaScript's Bootstrap na mampiasa bootstrap.bundle.min.js/ bootstrap.bundle.jsizay misy Popper. Popper dia tsy zatra mametraka dropdowns amin'ny navbars na dia tsy ilaina aza ny fametrahana dynamique.

Accessibility

Ny fenitry ny WAI ARIA dia mamaritra ny role="menu"widget tena izy , saingy manokana amin'ny menus mitovy amin'ny fampiharana izay miteraka hetsika na asa. Ny menio ARIA dia tsy afaka mirakitra afa-tsy ireo singa sakafo, ireo singa ao amin'ny boaty fanamarihana, ireo singa ao amin'ny sakafo bokotra radio, ireo vondrona bokotra radio ary ireo zana-menina.

Ny fampidinana an'i Bootstrap kosa dia natao ho an'ny ankapobeny sy azo ampiharina amin'ny toe-javatra isan-karazany sy rafitra marika. Ohatra, azo atao ny mamorona dropdown izay misy fampidirana fanampiny sy fanaraha-maso ny endrika, toy ny sahan-karoka na ny endrika fidirana. Noho izany antony izany, Bootstrap dia tsy manantena (na manampy ho azy) ny iray amin'ireo roletoetra aria-ilaina amin'ny menu ARIA marina . Ny mpanoratra dia tsy maintsy mampiditra ireo toetra manokana ireo ny tenany.

Na izany aza, ny Bootstrap dia manampy fanohanana natsangana ho an'ny ankamaroan'ny fifandraisana amin'ny sakafo fitendry mahazatra, toy ny fahafahana mivezivezy amin'ny .dropdown-itemsinga tsirairay amin'ny fampiasana ny fanalahidin'ny cursor ary manidy ny sakafo amin'ny ESCfanalahidy.

OHATRA

Apetaho ao anaty .dropdown, na singa iray hafa manambara ny position: relative;. Ny dropdowns dia azo avy amin'ny singa <a>na <button>singa mba hifanaraka tsara kokoa amin'ny zavatra ilainao. Ny ohatra aseho eto dia mampiasa singa semantika <ul>raha mety, fa ny marika manokana dia tohana.

bokotra tokana

Ny singa .btntsirairay dia azo avadika ho toggle midina miaraka amin'ny fanovana marika. Ity ny fomba ahafahanao mampiasa azy ireo amin'ny <button>singa roa:

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>

Ary miaraka amin'ny <a>singa:

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>

Ny ampahany tsara indrindra dia azonao atao izany amin'ny variana bokotra rehetra ihany koa:

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

bokotra fisarahana

Torak'izany koa, mamorona fidinan'ny bokotra fisarahana miaraka amin'ny marika mitovy amin'ny fanidiana bokotra tokana, fa miaraka amin'ny fanampin'ny .dropdown-toggle-splitelanelana mety manodidina ny caret dropdown.

Ampiasainay ity kilasy fanampiny ity mba hampihenana ny marindrano paddingamin'ny lafiny roa amin'ny caret amin'ny 25% ary hanesorana ny margin-leftizay ampiana ho an'ny fanariana bokotra mahazatra. Ireo fanovana fanampiny ireo dia mitazona ny caret afovoany amin'ny bokotra fisarahana ary manome faritra voadona mifanentana kokoa eo akaikin'ny bokotra lehibe.

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

Famaritana

Ny fidinana bokotra dia miasa miaraka amin'ny bokotra amin'ny habe rehetra, ao anatin'izany ny bokotra midina midina sy misaraka.

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

Dark dropdowns

Misafidiana amin'ny fidinana maizina kokoa mba hifanaraka amin'ny navbar maizina na fomba fanao mahazatra amin'ny alàlan'ny fanampiana .dropdown-menu-darkamin'ny .dropdown-menu. Tsy misy fanovana ilaina amin'ireo singa midina.

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>

Ary ny fampiasana azy amin'ny 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>

Toro-lalana

RTL

Hita taratra ny torolalana rehefa mampiasa Bootstrap amin'ny RTL, ny dikany .dropstartdia hiseho eo amin'ny ilany havanana.

mifantoka

Ataovy afovoany eo ambanin'ny toggle miaraka .dropdown-centeramin'ny singa ray ny menio midina.

html

<div class="dropdown-center">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

Dropup

Ampidiro ny menio midina eo ambonin'ny singa amin'ny fanampiana .dropupny singa ray.

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

Ataovy afovoany eo ambonin'ny toggle miaraka .dropup-centeramin'ny singa ray ny menio mitete.

html

<div class="dropup-center dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

Dropend

Ampidiro ny menio midina eo an-kavanan'ireo singa amin'ny fanampiana .dropendamin'ny singa ray.

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

Ampidiro ny menio midina eo ankavian'ireo singa amin'ny fanampiana .dropstartny singa ray.

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

Azonao atao ny mampiasa <a>na <button>singa toy ny zavatra midina.

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>

Azonao atao koa ny mamorona singa midina tsy misy interactive miaraka amin'ny .dropdown-item-text. Aza misalasala manara-penitra bebe kokoa miaraka amin'ny CSS manokana na fitaovana lahatsoratra.

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>

Active

Ampio .activeamin'ny singa ao amin'ny dropdown mba hametahana azy ireo ho mavitrika . Mba hampita ny toetra mavitrika amin'ny teknolojia manampy, ampiasao ny aria-currenttoetra — mampiasa ny pagesanda ho an'ny pejy ankehitriny, na trueho an'ny singa ankehitriny ao anaty andiana.

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>

sembana

Ampio .disabledamin'ny singa ao amin'ny dropdown mba hametahana azy ireo ho kilemaina .

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>

Amin'ny alàlan'ny default, apetraka ho azy 100% avy any ambony sy eo amin'ny ilany havia amin'ny ray aman-dreniny ny menio midina. Azonao atao ny manova izany amin'ny .drop*kilasy fitarihana, fa azonao atao koa ny mifehy azy ireo amin'ny kilasy modifier fanampiny.

Ampio .dropdown-menu-endamin'ny .dropdown-menurindran-kavanana ny menio midina. Ny toro-lalana dia hita taratra rehefa mampiasa Bootstrap amin'ny RTL, ny dikany .dropdown-menu-enddia hiseho eo amin'ny ilany havia.

Fampitandremana! Ny dropdowns dia napetraka noho ny Popper afa-tsy rehefa voarakitra ao anaty 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>

Fandrindrana mamaly

Raha te-hampiasa alignment responsive ianao dia esory ny toerana dynamique amin'ny alàlan'ny fampidirana ilay data-bs-display="static"toetra ary ampiasao ny kilasy fanovana valiny.

Mba hampifanitsiana havanana ny menio midina miaraka amin'ny teboka tapaka nomena na lehibe kokoa, ampio .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>

Mba hampifanitsiana ny menio midina ankavia.dropdown-menu-end amin'ny teboka tapaka nomena na lehibe kokoa, ampio ary .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>

Mariho fa tsy mila manampy data-bs-display="static"toetra amin'ny bokotra midina amin'ny navbars ianao, satria tsy ampiasaina amin'ny navbars i Popper.

Safidy fampifanarahana

Raha raisina ny ankamaroan'ny safidy aseho etsy ambony, ity misy demo kely fanasan-damba an-dakozia amin'ny safidy fampifanarahana midina any amin'ny toerana iray.

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>

lohapejy

Manampia lohapejy hanamarihana ny ampahan'ny hetsika ao amin'ny menio midina.

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>

Mpizarazara

Saraho ny vondrona misy sakafo mifandraika amin'ny fizarana.

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>

Text

Apetraho ao anatin'ny menio midina miaraka amin'ny lahatsoratra ary ampiasao ny fampiasan'ny spacing . Mariho fa mety mila fomba fandrefesana fanampiny ianao mba hanerena ny sakan'ny menio.

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>

teny

Asio endrika iray ao anatin'ny menio midina, na ataovy ao anaty menio midina, ary ampiasao ny fampiasa amin'ny sisiny na padding mba hanomezana azy ny toerana ratsy ilainao.

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>

Ampiasao data-bs-offsetna data-bs-referencehanovana ny toerana misy ny fidina.

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>

Fihetsika manakatona mandeha ho azy

Amin'ny alàlan'ny default, mihidy ny menio midina rehefa manindry ao anatiny na ivelan'ny menio midina. Azonao atao ny mampiasa ny autoClosesafidy hanovana an'io fihetsika midina io.

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

hiovaova

Nampiana v5.2.0

Ao anatin'ny fomba fiovaovan'ny CSS mivoatra an'ny Bootstrap, ny dropdowns izao dia mampiasa ny fari-piadidiana CSS eo an -toerana .dropdown-menuho an'ny fanatsarana ny fotoana tena izy. Ny soatoavina ho an'ny fari-piainan'ny CSS dia apetraka amin'ny alàlan'ny Sass, noho izany dia mbola tohanana ihany koa ny fanamboarana Sass.

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

Ny fanasokajiana amin'ny alàlan'ny fari-piadidiana CSS dia azo jerena ao amin'ny .dropdown-menu-darkkilasy izay manafoana ny soatoavina manokana nefa tsy manampy ireo mpifidy CSS dika mitovy.

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

Sass variables

Variables ho an'ny dropdown rehetra:

$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

Variables for the dark 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;

Variables ho an'ny carets mifototra amin'ny CSS izay manondro ny fifandraisan'ny dropdown:

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

Mixins

Ny mixins dia ampiasaina hamokarana ireo carets mifototra amin'ny CSS ary azo jerena ao amin'ny 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;
    }
  }
}

Fampiasana

Amin'ny alàlan'ny toetran'ny data na JavaScript, ny plugin dropdown dia mamadika votoaty miafina (meno midina) amin'ny alàlan'ny fanodina ny .showkilasy amin'ny ray aman-dreny .dropdown-menu. Ny data-bs-toggle="dropdown"toetra dia ianteherana amin'ny fanakatonana ny menio midina amin'ny ambaratonga fampiharana, noho izany dia tsara ny mampiasa azy foana.

Amin'ny fitaovana azo ampiasaina amin'ny fikasihana, ny fanokafana ny fidinana dia manampy mpiandraikitra tsy misy na inona na inona mouseoverho an'ireo ankizy avy hatrany amin'ilay <body>singa. Ity hack tena ratsy ekena ity dia ilaina amin'ny fampandehanana ny quirk amin'ny delegasiona hetsika iOS , izay raha tsy izany dia manakana ny paompy na aiza na aiza ivelan'ny dropdown tsy hiteraka ny code izay manidy ny dropdown. Rehefa mihidy ny mouseoverfidinana dia esorina ireo mpikirakira poakaty fanampiny ireo.

Amin'ny alàlan'ny data attributes

Ampio data-bs-toggle="dropdown"amin'ny rohy na bokotra iray mba hivezivezena ny fidina.

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

Amin'ny JavaScript

Antsoy amin'ny alalan'ny JavaScript ny dropdowns:

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

`data-bs-toggle="dropdown"`mbola takiana

Na inona na inona miantso ny fidinao amin'ny JavaScript ianao na mampiasa ny data-api, data-bs-toggle="dropdown"dia tsy maintsy misy foana ny singa trigger an'ny dropdown.

FANDIKANA

Satria azo ampitaina amin'ny alàlan'ny toetran'ny data na JavaScript ny safidy, azonao atao ny manisy anarana safidy amin'ny data-bs-, toy ny ao amin'ny data-bs-animation="{value}". Ataovy azo antoka fa hanova ny karazana tranga amin'ny anarana safidy avy amin'ny " CamelCase " ho " kebab-case " rehefa mandalo ny safidy amin'ny alàlan'ny toetran'ny data. Ohatra, ampiasao data-bs-custom-class="beautifier"fa tsy data-bs-customClass="beautifier".

Amin'ny Bootstrap 5.2.0, ny singa rehetra dia manohana toetra angon-drakitra natokana ho an'ny fanandramanadata-bs-config izay afaka mametraka ny fandrindrana singa tsotra ho tady JSON. Rehefa manana data-bs-config='{"delay":0, "title":123}'sy data-bs-title="456"toetra ny singa iray, dia ny titlesanda farany 456ary ny toetran'ny angon-drakitra misaraka dia hanongotra ny sanda omena amin'ny data-bs-config. Ankoatr'izay, ny toetran'ny data efa misy dia afaka mametraka ny sanda JSON toy ny data-bs-delay='{"show":0,"hide":150}'.

Anarana	Type	toerana misy anao	Description
`autoClose`	boolean, tady	`true`	Ampifanaraho ny fihetsika manakatona fiara amin'ny fidinana: `true`- Hikatona ny fampidinana amin'ny fipihana ivelany na ao anaty menio midina. `false`- Hikatona ny fidinana amin'ny fipihana ny bokotra toggle sy ny fiantsoana tanana `hide`na ny `toggle`fomba. (Tsy hikatona amin'ny fanindriana ny `esc`lakile ihany koa) `'inside'`- Hikatona (ihany) ny fampidinana amin'ny fipihana ao anatin'ny menio midina. `'outside'`- Hikatona (ihany) ny fampidinana amin'ny fipihana eo ivelan'ny menio midina. Fanamarihana: azo hikatona amin'ny alalan'ny `ESC`lakile foana ny fidinana.
`boundary`	kofehy, singa	`'clippingParents'`	Ny sisin'ny faneriterena mihoa-pampana amin'ny menio midina (mihatra amin'ny modifier preventOverflow an'i Popper ihany). Amin'ny alàlan'ny default dia izy io `clippingParents`ary afaka manaiky reference HTMLElement (amin'ny JavaScript ihany). Raha mila fanazavana fanampiny dia jereo ny Popper's detectOverflow docs .
`display`	tady	`'dynamic'`	Amin'ny alàlan'ny default, mampiasa Popper izahay ho an'ny toerana mavitrika. Atsaharo ity amin'ny `static`.
`offset`	array, tady, asa	`[0, 2]`	Offset amin'ny fidinana mifandraika amin'ny tanjony. Azonao atao ny mandefa tady amin'ny toetran'ny angona miaraka amin'ny sanda misaraka faingo toy ny: `data-bs-offset="10,20"`. Rehefa ampiasaina hamaritana ny offset ny asa iray, dia antsoina amin'ny zavatra misy ny fametrahana popper, ny reference, ary ny popper rects ho hevitra voalohany. Ny node DOM node dia alefa ho tohan-kevitra faharoa. Ny asa dia tsy maintsy mamerina array misy isa roa: skidding , distance . Raha mila fanazavana fanampiny dia jereo ny doka offset an'i Popper .
`popperConfig`	null, zavatra, asa	`null`	Raha hanova ny config Popper default an'ny Bootstrap dia jereo ny configuration Popper . Rehefa ampiasaina hamoronana ny konfigurasi Popper ny fiasa iray, dia antsoina miaraka amin'ny zavatra iray misy ny fanovana Popper default an'ny Bootstrap. Manampy anao hampiasa sy hanambatra ny default amin'ny tefitranonao manokana izany. Ny asa dia tsy maintsy mamerina zavatra fanamafisam-peo ho an'ny Popper.
`reference`	kofehy, singa, zavatra	`'toggle'`	Singa fanondro amin'ny menio midina. Manaiky ny sandan'ny `'toggle'`, `'parent'`, reference HTMLElement na zavatra manome `getBoundingClientRect`. Raha mila fanazavana fanampiny dia jereo ny doka mpamorona an'i Popper sy ny doka singa virtoaly .

Fampiasana asa miaraka amin'ny`popperConfig`

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

fomba

FOMBA	Description
`dispose`	Manimba ny fidinan'ny singa iray. (Esory ny angona voatahiry amin'ny singa DOM)
`getInstance`	Fomba static izay ahafahanao mahazo ny ohatra midina mifandray amin'ny singa DOM, azonao ampiasaina toy izao: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Fomba static izay mamerina ohatra midina mifandray amin'ny singa DOM na mamorona vaovao raha toa ka tsy natomboka izany. Azonao ampiasaina toy izao: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Manafina ny menio midina amin'ny navbar na navigateur misy tabilao.
`show`	Mampiseho ny menio midina amin'ny navbar nomena na navigateur misy tabilao.
`toggle`	Manova ny menio fidinan'ny navbar nomena na navigateur misy tabilao.
`update`	Manavao ny toeran'ny fidinan'ny singa iray.

zava-mitranga

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

Dropdowns

Overview

Accessibility

OHATRA

bokotra tokana

bokotra fisarahana

Famaritana

Dark dropdowns

Toro-lalana

RTL

mifantoka

Dropup

Dropup afovoany

Dropend

Dropstart

Zavatra sakafo

Active

sembana

Fandrindrana ny menu

Fandrindrana mamaly

Safidy fampifanarahana

Ny votoatin'ny menu

lohapejy

Mpizarazara

Text

teny

Fihetsika manakatona mandeha ho azy

CSS

hiovaova

Sass variables

Mixins

Fampiasana

Amin'ny alàlan'ny data attributes

Amin'ny JavaScript

`data-bs-toggle="dropdown"`mbola takiana

FANDIKANA

Fampiasana asa miaraka amin'ny`popperConfig`

fomba

zava-mitranga

Dropdowns

Overview

Accessibility

OHATRA

bokotra tokana

bokotra fisarahana

Famaritana

Dark dropdowns

Toro-lalana

RTL

mifantoka

Dropup

Dropup afovoany

Dropend

Dropstart

Zavatra sakafo

Active

sembana

Fandrindrana ny menu

Fandrindrana mamaly

Safidy fampifanarahana

Ny votoatin'ny menu

lohapejy

Lohateny midina

Mpizarazara

Text

teny

Safidy midina

Fihetsika manakatona mandeha ho azy

CSS

hiovaova

Sass variables

Mixins

Fampiasana

Amin'ny alàlan'ny data attributes

Amin'ny JavaScript

data-bs-toggle="dropdown"mbola takiana

FANDIKANA

Fampiasana asa miaraka amin'nypopperConfig

fomba

zava-mitranga

`data-bs-toggle="dropdown"`mbola takiana

Fampiasana asa miaraka amin'ny`popperConfig`