문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

현재 위치: start » wiki » bootstrap » bootstrap_note » bs_dropdowns
wiki:bootstrap:bootstrap_note:bs_dropdowns

목차

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


예제 설명

.dropdown 클래스는 드롭다운 메뉴를 나타냅니다.

드롭 다운 메뉴를 열려면 .dropdown-toggle 클래스와 data-toggle = "dropdown" 속성이 있는 버튼 또는 링크를 사용합니다.

.caret 클래스는 버튼이 드롭다운임을 나타내는 캐럿 화살표 아이콘을 만듭니다.

드롭다운 메뉴를 실제로 빌드하려면 .dropdown-menu 클래스를 <ul> 요소에 추가하십시오.

.divider 클래스는 얇은 가로 테두리로 드롭다운 메뉴 내의 링크를 분리하는 데 사용됩니다:

예제

Dropdowns

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

Result



드롭다운 메뉴 내부에 헤더를 추가하기 위해 .dropdown-header 클래스를 사용합니다.

예제

Dropdowns

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

Result



Disable and Active items

.active 클래스로 특정 드롭다운 항목을 강조 표시 합니다(파란색 배경색 추가).

드롭다운 메뉴에서 항목을 비활성화 하려면 .disabled 클래스를 사용합니다(마우스 오버 시 밝은 회색 텍스트 색상과 “주차 금지”아이콘이 표시됨):

예제

Dropdowns

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

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

Result



드롭다운을 오른쪽 정렬하려면 .dropdown-menu를 가진 요소에 .dropdown-menu-right 클래스를 추가합니다.

예제

Dropdowns

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

Result



Dropup

드롭다운 메뉴를 아래쪽이 아닌 위쪽으로 확장하려면, class = "dropdown"이 있는 <div> 요소를"dropup"으로 변경합니다.

예제

Dropdowns

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

스크린 리더를 사용하는 사람들의 접근성을 높이려면,
드롭다운 메뉴를 만들 때 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


, ,
/volume1/web/dokuwiki/data/pages/wiki/bootstrap/bootstrap_note/bs_dropdowns.txt · 마지막으로 수정됨: 2023/01/13 18:44 (바깥 편집)

문서 도구

별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki