======Bootstrap Dropdowns====== * description : Bootstrap Panels * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-26 \\ =====Basic Dropdown===== 드롭다운 메뉴는 사용자가 사전 정의된 목록에서 하나의 값을 선택할 수 있는 토글가능한(toggleable) 메뉴입니다.\\ ====예제====

Dropdowns

The .dropdown class is used to indicate a dropdown menu.

Use the .dropdown-menu class to atually build the dropdown menu.

To open the dropdwon menu, use a button or a link whti a class of .dropdown-toggle and data-toggle="dropdown".

===Result=== {{:wiki:bootstrap:bootstrap_note:dropdowns.png?600|}}\\ ====예제 설명==== ''%%.dropdown%%'' 클래스는 드롭다운 메뉴를 나타냅니다.\\ \\ 드롭 다운 메뉴를 열려면 ''%%.dropdown-toggle%%'' 클래스와 ''%%data-toggle = "dropdown"%%'' 속성이 있는 버튼 또는 링크를 사용합니다.\\ \\ ''%%.caret%%'' 클래스는 버튼이 드롭다운임을 나타내는 캐럿 화살표 아이콘을 만듭니다.\\ \\ 드롭다운 메뉴를 실제로 빌드하려면 ''%%.dropdown-menu%%'' 클래스를 ''%%

Dropdowns

The .divider class is used to separate links inside the dropdown menu with a thin horizontal line:

Dropdowns

The .dropdown-header class is used to add headers inside the dropdown menu:

Dropdowns

the .active class adds a blue background color to the active link.

The .disabled class disables a dropdown item (grey text color).

Dropdowns

Add the .dropdown-menu-right class to .dropdown-menu to right-align the dropdown menu:

%% 요소를''%%"dropup"%%''으로 변경합니다.\\ ====예제====

Dropdowns

The .dropup class makes the dropdown menu expand upwards instead of downwards:

=====Dropdown Accessibility===== 스크린 리더를 사용하는 사람들의 접근성을 높이려면,\\ 드롭다운 메뉴를 만들 때 ''role'' 및 ''%%aria- *%%'' 속성을 포함해야 합니다. ====예제====

Dropdowns

The .dropup class is used to indicate a dropdown menu.

Use the .dropdown-menu class to actually build the dropdown menu.

===Result=== {{:wiki:bootstrap:bootstrap_note:dropsown-menu-cloass.png?600|}}\\ {{tag>오션 Bootstrap Dropdowns}}