Litheohelang

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

Kakaretso

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

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

Haeba u theha JavaScript ea rona ho tsoa mohloling, e hlokautil.js .

Ho fihlella

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

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

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

Mehlala

Qetella toggle ea dropdown (konopo kapa sehokelo sa hau) le menu e theoha ka har'a .dropdown, kapa ntho e 'ngoe e phatlalatsang position: relative;. Li-dropdown li ka hlahisoa ho tsoa ho <a>kapa <button>likarolo ho lekana litlhoko tsa hau hantle.

Li-dropdown tsa konopo e le 'ngoe

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

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="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>

'Me ka <a>likarolo:

<div class="dropdown show">
  <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>

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

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-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>

Li-dropdown tsa konopo ea Arohane

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

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

<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-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>

Boholo

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

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-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>

Phapang ea ho tlohela

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

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-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>

Phapang ea Dropright

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

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

Phapang ea Dropleft

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

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

Likahare tsa li-menu tsa khale li ne li tlameha ho ba lihokela, empa ha ho sa le joalo ka v4. Joale u ka khetha ho sebelisa <button>likarolo ho li-dropdown tsa hau ho fapana le <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>

Ka mokhoa o ikhethileng, lethathamo la li-dropdown le beoa ka bo eona 100% ho tloha holimo le ka lehlakoreng le letšehali la motsoali oa eona. Eketsa .dropdown-menu-rightho a .dropdown-menuho le letona lokisetsa menu e theoha.

Hlokomela! Li-dropdown li behiloe ka lebaka la Popper.js (ntle le ha li le ka har'a 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>

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

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

Arola lihlopha tsa lintho tse amanang le menu ka karohano.

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

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

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

Kenya .activelinthong tse hlahang lethathamong la litheolelo ho li etsa hore li sebetse .

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

Eketsa .disabledlinthong tse hlahang lethathamong ho li etsa joalo ka ha li koaletsoe .

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

Tšebeliso

Ka litšoaneleho tsa data kapa JavaScript, plugin e theohang e fetola litaba tse patiloeng (menu e theohang) ka ho fetola .showsehlopha lethathamong la batsoali. Sebopeho data-toggle="dropdown"se ts'epiloe bakeng sa ho koala li-menu tse theohang maemong a ts'ebeliso, ka hona ke mohopolo o motle ho li sebelisa kamehla.

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

Ka litšobotsi tsa data

Eketsa data-toggle="dropdown"sehokelong kapa konopo ho toggle 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>

Ka JavaScript

Letsetsa li-dropdown ka JavaScript:

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

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

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

Dikgetho

Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-, joalo ka data-offset="".

Lebitso	Mofuta	Ea kamehla	Tlhaloso
offset	nomoro \| khoele \| tshebetso	0	Offset ea ho theoha e amanang le sepheo sa eona. Ho fumana lintlha tse ling, sheba ho Popper.js's offset docs .
phephisa	boolean	'nete	Lumella Dropdown hore e phebehe haeba ho ka ba le ho fetellana ho element element. Ho fumana lintlha tse ling, sheba ho Popper.js's flip docs .
moeli	khoele \| element	'scrollParent'	Moeli oa litšitiso tse tsoang ho menu e theoha. E amohela boleng ba `'viewport'`, `'window'`, `'scrollParent'`, kapa HTMLElement reference (JavaScript feela). Ho fumana lintlha tse ling, sheba ho Popper.js's preventOverflow docs .

Ela hloko ha boundarye behiloe boleng bofe kapa bofe ntle le 'scrollParent', setaele position: staticse sebelisoa .dropdownsetshelong.

Mekhoa

Mokhoa	Tlhaloso
`$().dropdown('toggle')`	E fetola menyetla ea ho theoha ea navbar e fanoeng kapa navigation e nang le li-tabbed.
`$().dropdown('update')`	E kaonefatsa boemo ba ho theoha ha element.
`$().dropdown('dispose')`	E senya ho theoha ha element.

Liketsahalo

Liketsahalo tsohle tse theohang li fetisetsoa ho karolo ea .dropdown-menumotsoali 'me li na le relatedTargetthepa, eo boleng ba eona e leng toggling anchor element.

Ketsahalo	Tlhaloso
`show.bs.dropdown`	Ketsahalo ena e tuka hang hang ha mokhoa oa mohlala oa pontšo o bitsoa.
`shown.bs.dropdown`	Ketsahalo ena e ts'oaroa ha ho theoha ho bonahala ho mosebelisi (e tla emela hore liphetoho tsa CSS li phethehe).
`hide.bs.dropdown`	Ketsahalo ena e lelekoa hang hang ha mokhoa oa ho pata o se o bitsoa.
`hidden.bs.dropdown`	Ketsahalo ena e ts'oaroa ha ho theoha ho felile ho patoa ho mosebelisi (e tla emela hore liphetoho tsa CSS li phethehe).

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

Litheohelang

Kakaretso

Ho fihlella

Mehlala

Li-dropdown tsa konopo e le 'ngoe

Li-dropdown tsa konopo ea Arohane

Boholo

Phapang ea ho tlohela

Phapang ea Dropright

Phapang ea Dropleft

Lintho tsa menu

Ho tsamaisana ha menu

Lihlooho tsa menu

Menu dividers

Mefuta ea menyetla

Lintho tsa menu tse sebetsang

Lintho tse koetsoeng ho menu

Tšebeliso

Ka litšobotsi tsa data

Ka JavaScript

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

Dikgetho

Mekhoa

Liketsahalo

Litheohelang

Kakaretso

Ho fihlella

Mehlala

Li-dropdown tsa konopo e le 'ngoe

Li-dropdown tsa konopo ea Arohane

Boholo

Phapang ea ho tlohela

Phapang ea Dropright

Phapang ea Dropleft

Lintho tsa menu

Ho tsamaisana ha menu

Lihlooho tsa menu

Sehlooho se theoha

Menu dividers

Mefuta ea menyetla

Lintho tsa menu tse sebetsang

Lintho tse koetsoeng ho menu

Tšebeliso

Ka litšobotsi tsa data

Ka JavaScript

data-toggle="dropdown"e ntse e hlokahala

Dikgetho

Mekhoa

Liketsahalo

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