Паѓања

Вклучете ги контекстуалните преклопувања за прикажување списоци со врски и повеќе со паѓачкиот приклучок Bootstrap.

Преглед

Паѓачките мени се преклопни, контекстуални преклопувања за прикажување списоци со врски и многу повеќе. Тие се интерактивни со вклучениот приклучок за JavaScript за паѓање Bootstrap. Тие се префрлаат со кликнување, а не со лебдење; ова е намерна одлука за дизајн.

Паѓачките мени се изградени на библиотека од трета страна, Popper.js , која обезбедува динамично позиционирање и откривање на порти за гледање. Не заборавајте да вклучите popper.min.js пред JavaScript на Bootstrap или користете bootstrap.bundle.min.js/ bootstrap.bundle.jsшто содржи Popper.js. Popper.js не се користи за позиционирање на паѓачките копчиња во навигаторите, иако не е потребно динамичко позиционирање.

Ако го градите нашиот JavaScript од извор, тоа бараutil.js .

Пристапност

Стандардот WAI ARIA дефинира вистински role="menu"додаток , но ова е специфично за менија слични на апликации кои активираат дејства или функции. Менијата ARIA може да содржат само ставки од менито, ставки од менито на полето за избор, ставки од менито на копчињата за радио, групи копчиња за радио и подменија.

Спуштањата на Bootstrap, од друга страна, се дизајнирани да бидат генерички и применливи за различни ситуации и структури за обележување. На пример, можно е да се креираат паѓачки списоци што содржат дополнителни влезови и контроли на формулари, како што се полиња за пребарување или форми за најавување. Поради оваа причина, Bootstrap не очекува (ниту автоматски додава) ниту еден од атрибутите roleи потребните за вистинските менија ARIA . Авторите ќе мора самите да ги вклучат овие поспецифични атрибути.aria-

Сепак, Bootstrap додава вградена поддршка за повеќето стандардни интеракции со менито на тастатурата, како што е можноста за движење низ поединечни .dropdown-itemелементи со помош на копчињата на курсорот и затворање на менито со ESCкопчето.

Примери

Завиткајте го преклопникот на паѓачкото мени (вашето копче или врска) и паѓачкото мени во .dropdown, или друг елемент што декларира position: relative;. Спуштањата може да се активираат од <a>или <button>елементи за подобро да одговараат на вашите потенцијални потреби.

Паѓања со едно копче

Секој сингл .btnможе да се претвори во паѓачкото копче со некои промени во обележувањето. Еве како можете да ги ставите да работат со двата <button>елементи:

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

И со <a>елементи:

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

Најдобриот дел е што можете да го направите ова со која било варијанта на копчиња, исто така:

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

Спуштање на копчињата за поделување

Слично на тоа, креирајте паѓачки паѓачки копчиња со поделени копчиња со практично иста ознака како паѓачкото копче со едно копче, но со додавање на .dropdown-toggle-splitза соодветно растојание околу паѓачкото копче.

Ја користиме оваа дополнителна класа за да ја намалиме хоризонталата paddingод двете страни на таблата за 25% и да ја отстраниме margin-leftдодадената за редовно паѓање на копчињата. Тие дополнителни промени го одржуваат цетричниот центар во копчето за разделување и обезбедуваат посоодветна големина за удар до главното копче.

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

Димензионирање

Спуштањето на копчињата работи со копчиња од сите големини, вклучувајќи ги стандардните и поделените паѓачки копчиња.

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

Падна варијација

Активирајте ги паѓачките менија над елементите со додавање .dropupво родителскиот елемент.

<!-- 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 варијација

Активирајте ги паѓачките менија десно од елементите со додавање .droprightво матичниот елемент.

<!-- 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во матичниот елемент.

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

Историски содржината на паѓачкото мени мораше да биде линкови, но тоа веќе не е случај со v4. Сега можете опционално да користите <button>елементи во паѓачкото мени наместо само <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>

Стандардно, паѓачкото мени автоматски се позиционира 100% од врвот и долж левата страна на неговиот родител. Додај .dropdown-menu-rightво a .dropdown-menuнадесно порамни го паѓачкото мени.

Главите горе! Спуштањата се позиционирани благодарение на Popper.js (освен кога се содржани во лента за навигација).

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

Додајте заглавие за означување на делови од дејства во кое било паѓачко мени.

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

Одделете групи поврзани ставки од менито со делител.

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

Додајте .activeво ставките во паѓачкото мени за да ги стилизирате како активни .

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

Додајте .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>

Употреба

Преку атрибути на податоци или JavaScript, паѓачкиот приклучок ја менува скриената содржина (паѓачкото мени) со префрлање на .showкласата на матичната ставка од списокот. На data-toggle="dropdown"атрибутот се потпираме за затворање на паѓачките менија на ниво на апликација, па затоа е добра идеја секогаш да го користите.

На уредите со овозможен допир, со отворањето на паѓачкото мени се додаваат празни управувачи ( $.noop) mouseoverна најблиските деца на <body>елементот. Ова, секако, грдото хакирање е неопходно за да се надмине необичноста во делегирањето на настани на iOS , што инаку би спречило допир каде било надвор од паѓачкото мени да го активира кодот што го затвора паѓачкото мени. Откако ќе се затвори паѓачкото мени, овие дополнителни празни mouseoverуправувачи се отстрануваат.

Преку атрибути на податоци

Додајте data-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>

Преку JavaScript

Повикајте ги паѓачките списоци преку JavaScript:

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

`data-toggle="dropdown"`сè уште се бара

Без оглед на тоа дали го повикувате паѓачкото мени преку JavaScript или наместо тоа го користите data-api, data-toggle="dropdown"секогаш се бара да биде присутен на елементот за активирање на паѓачкото мени.

Опции

Опциите може да се пренесат преку атрибути на податоци или JavaScript. За атрибути на податоци, додајте го името на опцијата на data-, како во data-offset="".

Име	Тип	Стандардно	Опис
офсет	број \| низа \| функција	0	Поместување на паѓачкото мени во однос на неговата цел. За повеќе информации погледнете ги офсет документите на Popper.js .
превртување	булови	вистина	Дозволете паѓачкото мени да се превртува во случај на преклопување на референтниот елемент. За повеќе информации погледнете ги прелистувачките документи на Popper.js .
граница	низа \| елемент	'scrollParent'	Границата на ограничување за прелевање на паѓачкото мени. Ги прифаќа вредностите на `'viewport'`, `'window'`, `'scrollParent'`или референца на HTMLElement (само JavaScript). За повеќе информации, погледнете ги документите за спречување на превртување на Popper.js .

Забележете кога boundaryе поставено на која било вредност освен 'scrollParent', стилот position: staticсе применува на .dropdownконтејнерот.

Методи

Метод	Опис
`$().dropdown('toggle')`	Го исклучува паѓачкото мени на дадена лента за навигација или навигација со јазичиња.
`$().dropdown('update')`	Ја ажурира позицијата на паѓачкото мени на елементот.
`$().dropdown('dispose')`	Уништува паѓачкото мени на елемент.

Настани

Сите паѓачки настани се активираат на .dropdown-menuматичниот елемент и имаат relatedTargetсвојство, чија вредност е преклопниот елемент за прицврстување.

Настан	Опис
`show.bs.dropdown`	Овој настан се вклучува веднаш кога ќе се повика методот на пример за прикажување.
`shown.bs.dropdown`	Овој настан се активира кога паѓачкото мени е видливо за корисникот (ќе почека CSS транзициите да се завршат).
`hide.bs.dropdown`	Овој настан се активира веднаш кога ќе се повика методот на пример за сокривање.
`hidden.bs.dropdown`	Овој настан се активира кога паѓачкото мени ќе заврши со сокривање од корисникот (ќе чека да заврши CSS транзициите).

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

Паѓања

Преглед

Пристапност

Примери

Паѓања со едно копче

Спуштање на копчињата за поделување

Димензионирање

Падна варијација

Dropright варијација

Варијација на капка

Ставки од менито

Порамнување на менито

Заглавија на менито

Разделувачи на менито

Форми на мени

Активни ставки од менито

Оневозможени ставки од менито

Употреба

Преку атрибути на податоци

Преку JavaScript

`data-toggle="dropdown"`сè уште се бара

Опции

Методи

Настани

Паѓања

Преглед

Пристапност

Примери

Паѓања со едно копче

Спуштање на копчињата за поделување

Димензионирање

Падна варијација

Dropright варијација

Варијација на капка

Ставки од менито

Порамнување на менито

Заглавија на менито

Заглавие на паѓање

Разделувачи на менито

Форми на мени

Активни ставки од менито

Оневозможени ставки од менито

Употреба

Преку атрибути на податоци

Преку JavaScript

data-toggle="dropdown"сè уште се бара

Опции

Методи

Настани

`data-toggle="dropdown"`сè уште се бара