Source

Mga dropdown

I-toggle ang mga overlay sa konteksto para sa pagpakita sa mga lista sa mga link ug uban pa gamit ang Bootstrap dropdown plugin.

Overview

Ang mga dropdown kay ma-toggle, contextual overlay para sa pagpakita sa mga lista sa mga link ug uban pa. Gihimo sila nga interactive sa gilakip nga Bootstrap dropdown JavaScript plugin. Gibalhin sila pinaagi sa pag-klik, dili pinaagi sa pag-hover; kini usa ka tinuyo nga desisyon sa disenyo.

Ang mga dropdown gitukod sa usa ka ikatulo nga partido nga librarya, Popper.js , nga naghatag ug dinamikong posisyon ug pagtan-aw sa viewport. Siguroha nga iapil ang popper.min.js sa dili pa ang JavaScript sa Bootstrap o gamiton bootstrap.bundle.min.js/ bootstrap.bundle.jsnga adunay Popper.js. Ang Popper.js wala gigamit sa pagpahimutang sa mga dropdown sa mga navbar bisan kung dili kinahanglan ang dinamikong pagpoposisyon.

Kung nagtukod ka sa among JavaScript gikan sa gigikanan, nanginahanglan kiniutil.js .

Accessibility

Ang WAI ARIA nga sumbanan naghubit sa usa ka aktuwal nga role="menu"widget , apan kini espesipiko sa mga menu nga sama sa aplikasyon nga nagpalihok sa mga aksyon o gimbuhaton. Ang mga menu sa ARIA mahimo ra nga adunay mga butang sa menu, mga butang sa menu sa checkbox, mga butang sa menu sa radio button, mga grupo sa radio button, ug mga sub-menu.

Ang mga dropdown sa Bootstrap, sa laing bahin, gidisenyo nga mahimong generic ug magamit sa lain-laing mga sitwasyon ug markup structures. Pananglitan, posible nga maghimo mga dropdown nga adunay dugang nga mga input ug mga kontrol sa porma, sama sa mga natad sa pagpangita o mga porma sa pag-login. Tungod niini nga rason, ang Bootstrap wala magdahom (ni awtomatik nga makadugang) sa bisan unsa roleug mga aria-hiyas nga gikinahanglan para sa tinuod nga ARIA nga mga menu. Kinahanglang ilakip sa mga tagsulat kining mas espesipikong mga hiyas sa ilang kaugalingon.

Bisan pa, ang Bootstrap nagdugang sa built-in nga suporta alang sa kadaghanan sa mga standard nga keyboard nga mga interaksyon sa menu, sama sa abilidad sa paglihok sa indibidwal .dropdown-itemnga mga elemento gamit ang mga yawe sa cursor ug isira ang menu gamit ang ESCyawe.

Mga pananglitan

I-wrap ang toggle sa dropdown (imong buton o link) ug ang dropdown menu sulod sa .dropdown, o laing elemento nga nagpahayag position: relative;. Ang mga dropdown mahimong ma-trigger gikan sa <a>o <button>mga elemento aron mas mohaum sa imong potensyal nga mga panginahanglan.

Usa ka butones

Ang bisan unsang single .btnmahimo nga usa ka dropdown toggle nga adunay pipila nga mga pagbag-o sa markup. Ania kung giunsa nimo kini magamit sa bisan unsang <button>mga elemento:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Ug uban sa <a>mga elemento:

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Ang labing kaayo nga bahin mao nga mahimo nimo kini sa bisan unsang variant sa buton, usab:

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

Split button

Sa susama, paghimo og split button dropdowns nga adunay halos parehas nga markup sa single button nga dropdowns, apan uban ang pagdugang sa .dropdown-toggle-splitpara sa saktong spacing sa palibot sa dropdown caret.

Gigamit namo kini nga dugang nga klase aron makunhuran ang pinahigda paddingsa bisan asa nga kilid sa caret sa 25% ug tangtangon ang margin-leftgidugang alang sa regular nga mga dropdown sa buton. Kadtong dugang nga mga pagbag-o nagpadayon sa caret nga nakasentro sa split button ug naghatag usa ka mas tukma nga gidak-on nga hit nga lugar sunod sa main button.

<!-- 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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

Pagsukod

Ang mga dropdown sa buton nagtrabaho sa mga buton sa tanan nga gidak-on, lakip ang default ug split dropdown nga mga buton.

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

Direksyon

Dropup

I-trigger ang mga dropdown menu sa ibabaw sa mga elemento pinaagi sa pagdugang .dropupsa elemento sa ginikanan.

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Dropright

I-trigger ang mga dropdown menu sa tuo sa mga elemento pinaagi sa pagdugang .droprightsa elemento sa ginikanan.

<!-- Default dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropright
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary">
    Split dropright
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Tulo sa wala

I-trigger ang mga dropdown menu sa wala sa mga elemento pinaagi sa pagdugang .dropleftsa elemento sa ginikanan.

<!-- Default dropleft button -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropleft button -->
<div class="btn-group">
  <div class="btn-group dropleft" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropleft</span>
    </button>
    <div class="dropdown-menu">
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropleft
  </button>
</div>

Ang mga sulud sa dropdown menu sa kasaysayan kinahanglan nga mga link, apan dili na kana ang kaso sa v4. Karon mahimo nimong gamiton ang <button>mga elemento sa imong mga dropdown imbis nga <a>s.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Makahimo ka usab og dili interactive nga dropdown nga mga butang nga adunay .dropdown-item-text. Mobati nga gawasnon sa pag-istilo sa dugang gamit ang custom CSS o text utilities.

<div class="dropdown-menu">
  <span class="dropdown-item-text">Dropdown item text</span>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
</div>

Aktibo

Idugang .activesa mga aytem sa dropdown aron i- estilo kini nga aktibo .

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item active" href="#">Active link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Nabaldado

Idugang .disabledsa mga aytem sa dropdown aron i- estilo kini isip disabled .

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item disabled" href="#">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Sa kasagaran, ang usa ka dropdown menu awtomatik nga gipahimutang 100% gikan sa ibabaw ug ubay sa wala nga bahin sa ginikanan niini. Idugang .dropdown-menu-rightsa usa .dropdown-menungadto sa tuo nga i-align ang dropdown menu.

Taas ang ulo! Gipahimutang ang mga dropdown salamat sa Popper.js (gawas kung kini anaa sa usa ka navbar).

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Mga ulohan

Pagdugang og usa ka header sa pag-label sa mga seksyon sa mga aksyon sa bisan unsang dropdown menu.

<div class="dropdown-menu">
  <h6 class="dropdown-header">Dropdown header</h6>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
</div>

Mga dibisyon

Pagbulag sa mga grupo sa mga may kalabutan nga mga butang sa menu nga adunay usa ka divider.

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</div>

Text

Ibutang ang bisan unsang libre nga porma nga teksto sa sulod sa usa ka dropdown menu nga adunay teksto ug gamita ang mga gamit sa spacing . Timan-i nga lagmit kinahanglan nimo ang dugang nga mga istilo sa pagsukod aron mapugngan ang gilapdon sa menu.

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

Mga porma

Ibutang ang usa ka porma sulod sa dropdown menu, o himoa kini nga dropdown menu, ug gamita ang margin o padding utilities aron mahatagan kini og negatibong luna nga imong gikinahanglan.

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="form-group">
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="form-group">
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck">
      <label class="form-check-label" for="dropdownCheck">
        Remember me
      </label>
    </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="form-group">
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="dropdownCheck2">
    <label class="form-check-label" for="dropdownCheck2">
      Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Gamita data-offseto data-referencepara usbon ang lokasyon sa dropdown.

<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </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-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>

Paggamit

Pinaagi sa data attributes o JavaScript, ang dropdown plugin mo-toggle sa tinago nga content (dropdown menus) pinaagi sa pag-toggle sa .showklase sa parent list item. Ang data-toggle="dropdown"hiyas gisaligan alang sa pagsira sa mga dropdown menu sa lebel sa aplikasyon, mao nga maayong ideya nga gamiton kini kanunay.

Sa touch-enabled nga mga device, ang pag-abli sa dropdown magdugang og walay sulod ( $.noop) mouseovernga mga tigdumala sa mga anak sa <body>elemento. Kining giangkon nga mangil-ad nga hack gikinahanglan aron masulbad ang usa ka quirk sa delegasyon sa panghitabo sa iOS , nga kung dili makapugong sa usa ka gripo bisan asa sa gawas sa dropdown gikan sa pag-trigger sa code nga nagsira sa dropdown. Kung sirado na ang dropdown, kining mga dugang nga walay sulod nga mouseovermga handler kuhaon.

Pinaagi sa data attributes

Idugang data-toggle="dropdown"sa usa ka link o buton aron i-toggle ang dropdown.

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </div>
</div>

Pinaagi sa JavaScript

Tawga ang mga dropdown pinaagi sa JavaScript:

$('.dropdown-toggle').dropdown()

`data-toggle="dropdown"`gikinahanglan pa

Dili igsapayan kung imong tawagan ang imong dropdown pinaagi sa JavaScript o sa baylo nga gamiton ang data-api, data-toggle="dropdown"kinahanglan kanunay nga naa sa elemento sa pag-trigger sa dropdown.

Mga kapilian

Mahimong ipasa ang mga kapilian pinaagi sa data attributes o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-, sama sa data-offset="".

Ngalan	Matang	Default	Deskripsyon
offset	numero \| hilo \| gimbuhaton	0	Offset sa dropdown kalabot sa target niini. Alang sa dugang nga impormasyon tan-awa ang Popper.js's offset docs .
paltik	boolean	tinuod	Tugoti ang Dropdown nga mag-flip kung adunay nagsapaw sa reference nga elemento. Alang sa dugang nga impormasyon tan-awa ang Popper.js's flip docs .
utlanan	hilo \| elemento	'scrollParent'	Ang pag-awas sa limitasyon sa dropdown menu. Gidawat ang mga kantidad sa `'viewport'`, `'window'`, `'scrollParent'`, o usa ka HTMLElement reference (JavaScript lang). Alang sa dugang nga impormasyon tan-awa ang Popper.js's preventOverflow docs .
pakisayran	hilo \| elemento	'toggle'	Reference nga elemento sa dropdown menu. Gidawat ang mga kantidad sa `'toggle'`, `'parent'`, o usa ka reference sa HTMLElement. Alang sa dugang nga impormasyon tan-awa ang Popper.js's referenceObject docs .
display	hilo	'dinamikong'	Sa kasagaran, gigamit namo ang Popper.js alang sa dinamikong pagpoposisyon. I-disable kini gamit ang `static`.

Timan-i kung kanus boundary-a gibutang sa bisan unsang kantidad gawas sa 'scrollParent', ang istilo position: staticgipadapat sa .dropdownsulud.

Pamaagi

Pamaagi	Deskripsyon
`$().dropdown('toggle')`	I-toggle ang dropdown menu sa gihatag nga navbar o tabbed navigation.
`$().dropdown('update')`	Gi-update ang posisyon sa dropdown sa usa ka elemento.
`$().dropdown('dispose')`	Giguba ang dropdown sa usa ka elemento.

Mga panghitabo

Ang tanan nga dropdown nga mga panghitabo gipabuthan sa .dropdown-menuelemento sa ginikanan ug adunay relatedTargetkabtangan, kansang bili mao ang toggling anchor nga elemento. hide.bs.dropdownug hidden.bs.dropdownang mga panghitabo adunay usa ka clickEventkabtangan (lamang kung ang orihinal nga tipo sa panghitabo mao ang click) nga adunay sulod nga usa ka Event Object para sa click nga panghitabo.

Panghitabo	Deskripsyon
`show.bs.dropdown`	Kini nga panghitabo modilaab dayon kung ang paagi sa pagpakita nga pananglitan gitawag.
`shown.bs.dropdown`	Kini nga panghitabo gipabuto kung ang dropdown nahimo nga makita sa tiggamit (maghulat alang sa mga transisyon sa CSS, aron makompleto).
`hide.bs.dropdown`	Kini nga panghitabo gipabuto dayon kung ang paagi sa pagtago sa pananglitan gitawag na.
`hidden.bs.dropdown`	Kini nga panghitabo gipabuto kung ang dropdown nahuman na nga gitago gikan sa user (maghulat alang sa mga transisyon sa CSS, aron makompleto).

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

Mga dropdown

Overview

Accessibility

Mga pananglitan

Usa ka butones

Split button

Pagsukod

Direksyon

Dropup

Dropright

Tulo sa wala

Mga butang sa menu

Aktibo

Nabaldado

Pag-align sa menu

Kontento sa menu

Mga ulohan

Mga dibisyon

Text

Mga porma

Paggamit

Pinaagi sa data attributes

Pinaagi sa JavaScript

`data-toggle="dropdown"`gikinahanglan pa

Mga kapilian

Pamaagi

Mga panghitabo

Mga dropdown

Overview

Accessibility

Mga pananglitan

Usa ka butones

Split button

Pagsukod

Direksyon

Dropup

Dropright

Tulo sa wala

Mga butang sa menu

Aktibo

Nabaldado

Pag-align sa menu

Kontento sa menu

Mga ulohan

Dropdown nga ulohan

Mga dibisyon

Text

Mga porma

Mga kapilian sa dropdown

Paggamit

Pinaagi sa data attributes

Pinaagi sa JavaScript

data-toggle="dropdown"gikinahanglan pa

Mga kapilian

Pamaagi

Mga panghitabo

`data-toggle="dropdown"`gikinahanglan pa