Падащи менюта

Основни Dropdown

Всяко едно dropdown меню е toggleable меню което позволява на потребителя да избира стойност от предифиниран лист. Вижте следният пример за такова меню.

Опитайте сами »

Обяснение на примера

Класа .dropdown  инициализира падащо меню. За да отворим падащото меню използваме бутон/button/ или линк със зададен клас .dropdown-toggle и атрибут data-toggle="dropdown". Класа .caret създава иконка с ъгълче която индикира, че бутона е падащ/dropdown/. Класа .dropdown-menu зададен към един <ul> елемент всъщност създава падащото меню.

Dropdown разделител

Класът .divider се използва за да раздели връзките в едно падащо меню:

Опитайте сами »

Dropdown заглавие

Класа .dropdown-header се изпозва за да добави заглавни части вътре в падащото меню:

Опитайте сами »

Деактивиране на елемент

За да деактивираме даден елемент използваме класа .disabled (придава светлосив цвят на текста и икона "забранено паркирането" на курсора).

Опитайте сами »

Позициониране на падащо меню

За да подравним падащото меню на дясно добавяме класа .dropdown-menu-right към елемент с клас .dropdown-menu:

Опитайте сами »

Ако искаме менюто да се отваря нагоре вместо да пада надолу трябва да променим класа на елемента <div> от class="dropdown" на "dropup":

Опитайте сами »

Достъпност на падащите менюта

За да помогнем на хора ползващи екранни четци трябва да добавим следните атрибути когато създаваме падащи менюта: role и aria-* :

Опитайте сами »
Упражнение 1 » Упражнение 2 » Упражнение 3 » Упражнение 4 » Упражнение 5 »