Source

Kunjuzi

Geuza viwekeleo vya muktadha kwa ajili ya kuonyesha orodha za viungo na zaidi ukitumia programu-jalizi ya kunjuzi ya Bootstrap.

Muhtasari

Kunjuzi zinaweza kugeuzwa, ziwekelezwe za kimuktadha kwa ajili ya kuonyesha orodha za viungo na zaidi. Yamefanywa kuingiliana na programu-jalizi ya JavaScript iliyojumuishwa iliyojumuishwa ya Bootstrap. Zinabadilishwa kwa kubofya, sio kwa kuelea; huu ni uamuzi wa makusudi wa kubuni.

Kunjuzi hujengwa kwenye maktaba ya wahusika wengine, Popper.js , ambayo hutoa nafasi inayobadilika na utambuzi wa sehemu ya kutazama. Hakikisha kuwa umejumuisha popper.min.js kabla ya JavaScript ya Bootstrap au tumia bootstrap.bundle.min.js/ bootstrap.bundle.jsambayo ina Popper.js. Popper.js haitumiwi kuweka menyu kunjuzi katika pau za urambazaji ingawa kwa vile uwekaji nafasi unaobadilika hauhitajiki.

Ikiwa unaunda JavaScript yetu kutoka kwa chanzo, inahitajiutil.js .

Ufikivu

Kiwango cha WAI ARIA kinafafanua role="menu"wijeti halisi , lakini hii ni mahususi kwa menyu zinazofanana na programu ambazo huanzisha vitendo au utendakazi. Menyu za ARIA zinaweza tu kuwa na vipengee vya menyu, vipengee vya menyu ya kisanduku cha kuteua, vipengee vya menyu ya vitufe vya redio, vikundi vya vitufe vya redio na menyu ndogo.

Kunjuzi za Bootstrap, kwa upande mwingine, zimeundwa kuwa za jumla na zinazotumika kwa hali mbalimbali na miundo ya kuashiria. Kwa mfano, inawezekana kuunda menyu kunjuzi ambazo zina pembejeo za ziada na vidhibiti vya fomu, kama vile sehemu za utafutaji au fomu za kuingia. Kwa sababu hii, Bootstrap haitarajii (wala kuongeza kiotomatiki) yoyote ya rolena aria-sifa zinazohitajika kwa menyu za kweli za ARIA . Waandishi watalazimika kujumuisha sifa hizi mahususi wenyewe.

Walakini, Bootstrap haiongezei usaidizi uliojumuishwa ndani kwa mwingiliano mwingi wa menyu ya kibodi, kama vile uwezo wa kusogea kupitia .dropdown-itemvipengee mahususi kwa kutumia vitufe vya kishale na kufunga menyu kwa ESCufunguo.

Mifano

Funga kigeuzi cha menyu kunjuzi (kitufe au kiungo chako) na menyu kunjuzi ndani ya .dropdown, au kipengele kingine kinachotangaza position: relative;. Kunjuzi kunaweza kuanzishwa kutoka <a>au <button>vipengee ili kutosheleza mahitaji yako yanayoweza kutokea.

Kitufe kimoja

Wimbo wowote .btnunaweza kugeuzwa kuwa menyu kunjuzi na mabadiliko kadhaa ya alamisho. Hivi ndivyo unavyoweza kuziweka kufanya kazi na <button>vipengele vyovyote:

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

Na <a>vipengele:

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

Sehemu bora ni kwamba unaweza kufanya hivyo na lahaja yoyote ya kitufe, pia:

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

Kitufe cha kugawanya

Vile vile, unda menyu kunjuzi ya vitufe vya mgawanyiko kwa karibu alama sawa na menyu kunjuzi ya kitufe kimoja, lakini kwa kuongezwa .dropdown-toggle-splitkwa nafasi ifaayo kuzunguka sehemu ya kunjuzi.

Tunatumia darasa hili la ziada ili kupunguza mlalo paddingkwa kila upande wa caret kwa 25% na kuondoa margin-leftile iliyoongezwa kwa kunjuzi za vitufe vya kawaida. Mabadiliko hayo ya ziada huweka caret katikati ya kitufe cha mgawanyiko na kutoa eneo la kugonga la ukubwa unaofaa zaidi karibu na kitufe kikuu.

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

Ukubwa

Vitufe kunjuzi hufanya kazi na vitufe vya ukubwa wote, ikiwa ni pamoja na vitufe vya chaguo-msingi na vilivyogawanyika.

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

Maelekezo

Kuacha

Anzisha menyu kunjuzi zilizo juu ya vipengee kwa kuongeza .dropupkwenye kipengee kikuu.

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

Anzisha menyu kunjuzi zilizo upande wa kulia wa vipengee kwa kuongeza .droprightkwenye kipengele kikuu.

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

Dropleft

Anzisha menyu kunjuzi zilizo upande wa kushoto wa vipengee kwa kuongeza .dropleftkwenye kipengele kikuu.

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

Kihistoria yaliyomo kwenye menyu kunjuzi ilibidi kuwa viungo, lakini sivyo ilivyo na v4. Sasa unaweza kutumia kwa hiari <button>vipengele kwenye menyu kunjuzi zako badala ya <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>

Unaweza pia kuunda vipengee kunjuzi visivyoingiliana ukitumia .dropdown-item-text. Jisikie huru kuweka mtindo zaidi ukitumia CSS maalum au huduma za maandishi.

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

Inayotumika

Ongeza .activekwa vipengee katika menyu kunjuzi ili kuvifanya kuwa vinavyotumika .

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

Imezimwa

Ongeza .disabledkwa vipengee katika menyu kunjuzi ili kuvifanya kuwa vimezimwa .

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

Kwa chaguomsingi, menyu kunjuzi huwekwa kiotomatiki 100% kutoka juu na upande wa kushoto wa mzazi wake. Ongeza .dropdown-menu-rightkwenye a .dropdown-menupanga menyu kunjuzi.

Vichwa juu! Kunjuzi zimewekwa shukrani kwa Popper.js (isipokuwa zikiwa kwenye upau wa urambazaji).

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

Vichwa vya habari

Ongeza kichwa ili kuweka lebo sehemu za vitendo katika menyu kunjuzi yoyote.

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

Wagawanyaji

Tenganisha vikundi vya vipengee vya menyu vinavyohusiana na kigawanyaji.

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

Maandishi

Weka maandishi yoyote ya muundo huria ndani ya menyu kunjuzi yenye maandishi na utumie huduma za kuweka nafasi . Kumbuka kuwa utahitaji mitindo ya ziada ya kuweka ukubwa ili kubana upana wa menyu.

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

Fomu

Weka fomu ndani ya menyu kunjuzi, au uifanye kuwa menyu kunjuzi, na utumie huduma za ukingo au padding ili kuipa nafasi hasi unayohitaji.

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

Tumia data-offsetau data-referencekubadilisha eneo la menyu kunjuzi.

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

Matumizi

Kupitia sifa za data au JavaScript, programu-jalizi kunjuzi hugeuza maudhui yaliyofichwa (menu kunjuzi) kwa kugeuza .showdarasa kwenye kipengee cha orodha kuu. Sifa data-toggle="dropdown"hiyo inategemewa kwa kufunga menyu kunjuzi katika kiwango cha programu, kwa hivyo ni wazo nzuri kuitumia kila wakati.

Kwenye vifaa vinavyoweza kuguswa, kufungua menyu kunjuzi huongeza vidhibiti tupu ( $.noop) mouseoverkwa watoto wa karibu wa <body>kipengele. Udukuzi huu mbaya unaokubalika ni muhimu ili kutatua tatizo katika ujumbe wa tukio la iOS , ambalo lingezuia kugusa popote nje ya menyu kunjuzi kuanzisha msimbo unaofunga menyu kunjuzi. Mara tu menyu kunjuzi itakapofungwa, vidhibiti tupu hivi vya ziada mouseoverhuondolewa.

Kupitia sifa za data

Ongeza data-toggle="dropdown"kwenye kiungo au kitufe ili kugeuza menyu kunjuzi.

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

Kupitia JavaScript

Piga kushuka kupitia JavaScript:

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

`data-toggle="dropdown"`bado inahitajika

Bila kujali ikiwa unapiga simu kunjuzi yako kupitia JavaScript au badala yake utumie data-api, data-toggle="dropdown"inahitajika kila wakati kuwepo kwenye kichochezi cha menyu kunjuzi.

Chaguo

Chaguzi zinaweza kupitishwa kupitia sifa za data au JavaScript. Kwa sifa za data, ongeza jina la chaguo kwa data-, kama katika data-offset="".

Jina	Aina	Chaguomsingi	Maelezo
kukabiliana	nambari \| kamba \| kazi	0	Kukabiliana na menyu kunjuzi kulingana na lengo lake. Kwa maelezo zaidi rejelea hati za kukabiliana na Popper.js .
pindua	boolean	kweli	Ruhusu Kunjuzi kugeuza iwapo kuna mwingiliano kwenye kipengele cha marejeleo. Kwa maelezo zaidi rejea hati za mgeuko za Popper.js .
mpaka	kamba \| kipengele	'scrollParent'	Kizuizi cha vipengee vya ziada vya menyu kunjuzi. Hukubali thamani za `'viewport'`, `'window'`, `'scrollParent'`, au rejeleo la Kipengele cha HTML (JavaScript pekee). Kwa maelezo zaidi rejelea hati za preventOverflow za Popper.js .
kumbukumbu	kamba \| kipengele	'geuza'	Kipengele cha marejeleo cha menyu kunjuzi. Hukubali thamani za `'toggle'`, `'parent'`, au rejeleo la Kipengele cha HTML. Kwa maelezo zaidi rejelea kumbukumbuObject docs za Popper.js .
kuonyesha	kamba	'dynamic'	Kwa chaguo-msingi, tunatumia Popper.js kwa nafasi inayobadilika. Zima hii na `static`.

Kumbuka wakati boundaryumewekwa kwa thamani yoyote isipokuwa 'scrollParent', mtindo position: staticunatumika kwenye .dropdownkontena.

Mbinu

Njia	Maelezo
`$().dropdown('toggle')`	Hugeuza menyu kunjuzi ya upau wa urambazaji au urambazaji wa kichupo.
`$().dropdown('update')`	Husasisha nafasi ya menyu kunjuzi ya kipengee.
`$().dropdown('dispose')`	Huharibu menyu kunjuzi ya kipengele.

Matukio

Matukio yote ya menyu kunjuzi yanarushwa kwa .dropdown-menukipengele cha mzazi na yana relatedTargetmali, ambayo thamani yake ni kipengele cha kugeuza nanga. hide.bs.dropdownna hidden.bs.dropdownmatukio yana sifa clickEvent(tu wakati aina ya tukio asili ni click) ambayo ina Kitu cha Tukio cha tukio la kubofya.

Tukio	Maelezo
`show.bs.dropdown`	Tukio hili huwaka mara moja mbinu ya onyesho inapoitwa.
`shown.bs.dropdown`	Tukio hili huwashwa wakati menyu kunjuzi imefanywa kuonekana kwa mtumiaji (itasubiri mabadiliko ya CSS, kukamilisha).
`hide.bs.dropdown`	Tukio hili linafutwa mara moja wakati mbinu ya mfano wa kujificha imeitwa.
`hidden.bs.dropdown`	Tukio hili hutupwa wakati menyu kunjuzi imekamilika kufichwa kutoka kwa mtumiaji (itasubiri mabadiliko ya CSS, kukamilika).

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

Kunjuzi

Muhtasari

Ufikivu

Mifano

Kitufe kimoja

Kitufe cha kugawanya

Ukubwa

Maelekezo

Kuacha

Dropright

Dropleft

Vipengee vya menyu

Inayotumika

Imezimwa

Mpangilio wa menyu

Maudhui ya menyu

Vichwa vya habari

Wagawanyaji

Maandishi

Fomu

Matumizi

Kupitia sifa za data

Kupitia JavaScript

`data-toggle="dropdown"`bado inahitajika

Chaguo

Mbinu

Matukio

Kunjuzi

Muhtasari

Ufikivu

Mifano

Kitufe kimoja

Kitufe cha kugawanya

Ukubwa

Maelekezo

Kuacha

Dropright

Dropleft

Vipengee vya menyu

Inayotumika

Imezimwa

Mpangilio wa menyu

Maudhui ya menyu

Vichwa vya habari

Kijajuu kunjuzi

Wagawanyaji

Maandishi

Fomu

Chaguo kunjuzi

Matumizi

Kupitia sifa za data

Kupitia JavaScript

data-toggle="dropdown"bado inahitajika

Chaguo

Mbinu

Matukio

`data-toggle="dropdown"`bado inahitajika