Паѓања

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

Преглед

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

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

Ако го градите нашиот 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" data-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </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>
</div>

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

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

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

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

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" 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-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-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-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-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-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-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-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-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-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Dropleft

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

<!-- Default dropleft button -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" 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">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" 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" data-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu">
    <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>

Можете исто така да креирате неинтерактивни паѓачки ставки со .dropdown-item-text. Слободно стилизирајте дополнително со приспособени CSS или текстуални алатки.

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

Активен

Додајте .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">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

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

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

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

Респонзивно усогласување

Ако сакате да користите одговорно порамнување, оневозможете динамичко позиционирање со додавање на data-display="static"атрибутот и користете ги класите на варијации со одговор.

За да го усогласите десното паѓачко мени со дадената точка на прекин или поголема, додадете .dropdown-menu{-sm|-md|-lg|-xl}-right.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <div class="dropdown-menu dropdown-menu-lg-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>

За да го усогласите левото паѓачко мени со дадената точка на прекин или поголема, додадете .dropdown-menu-rightи .dropdown-menu{-sm|-md|-lg|-xl}-left.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
    <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>

Забележете дека не треба да додавате data-display="static"атрибут на паѓачките копчиња во лентите за навигација, бидејќи Popper не се користи во лентите за навигација.

Заглавија

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

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

Форми

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

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

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

Користете data-offsetили data-referenceза да ја промените локацијата на паѓачкото мени.

<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" data-offset="10,20">
      Offset
    </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>
  </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-toggle="dropdown" aria-expanded="false" data-reference="parent">
      <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>
</div>

Употреба

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

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

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

Додајте data-toggle="dropdown"на врска или копче за да вклучите паѓачко мени.

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

Преку JavaScript

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

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

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

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

Опции

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

Име	Тип	Стандардно	Опис
офсет	број \| низа \| функција	0	Поместување на паѓачкото мени во однос на неговата цел. Кога функцијата се користи за одредување на поместувањето, таа се повикува со објект што ги содржи податоците за офсет како нејзин прв аргумент. Функцијата мора да врати објект со иста структура. Активирачкиот елемент DOM јазол се пренесува како втор аргумент. За повеќе информации погледнете ги офсет документите на Попер .
превртување	булови	вистина	Дозволете паѓачкото мени да се превртува во случај на преклопување на референтниот елемент. За повеќе информации погледнете ги прелистувачките документи на Попер .
граница	низа \| елемент	'scrollParent'	Границата на ограничување за прелевање на паѓачкото мени. Ги прифаќа вредностите на `'viewport'`, `'window'`, `'scrollParent'`или референца на HTMLElement (само JavaScript). За повеќе информации, погледнете ги Popper's preventOverflow docs .
референца	низа \| елемент	'вклучи'	Референтен елемент од паѓачкото мени. Ги прифаќа вредностите на `'toggle'`, `'parent'`или референца на HTMLElement. За повеќе информации, погледнете го Поперовиот referenceObject docs .
приказ	низа	'динамичен'	Стандардно, ние користиме Popper за динамично позиционирање. Оневозможете го ова со `static`.
popperConfig	нула \| објект	нула	За да ја промените стандардната Popper конфигурација на Bootstrap, видете ја конфигурацијата на Popper

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

Методи

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

Настани

Сите паѓачки настани се активираат на .dropdown-menuматичниот елемент и имаат relatedTargetсвојство, чија вредност е преклопниот елемент за прицврстување. hide.bs.dropdownа hidden.bs.dropdownнастаните имаат clickEventсвојство (само кога оригиналниот тип на настан е click) што содржи објект на настан за настанот со кликнување.

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

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

Паѓања

Преглед

Пристапност

Примери

Едно копче

Копче за разделување

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

Правци

Спуштање

Dropright

Dropleft

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

Активен

Оневозможено

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

Респонзивно усогласување

Содржина на менито

Заглавија

Разделувачи

Текст

Форми

Употреба

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

Преку JavaScript

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

Опции

Методи

Настани

Паѓања

Преглед

Пристапност

Примери

Едно копче

Копче за разделување

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

Правци

Спуштање

Dropright

Dropleft

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

Активен

Оневозможено

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

Респонзивно усогласување

Содржина на менито

Заглавија

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

Разделувачи

Текст

Форми

Опции за паѓање

Употреба

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

Преку JavaScript

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

Опции

Методи

Настани

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