부트스트랩 4 드롭다운

기본 드롭다운

드롭다운 메뉴는 사용자가 미리 정의된 목록에서 하나의 값을 선택할 수 있는 토글 가능한 메뉴입니다.

예시

<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Dropdown button
</button>
<div class="dropdown-menu">
    <a class="dropdown-item" href="#">Link 1</a>
    <a class="dropdown-item" href="#">Link 2</a>
    <a class="dropdown-item" href="#">Link 3</a>
</div>
</div>

예시 설명

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

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

실제로 드롭다운 메뉴를 빌드하려면 요소에 .dropdown-menu클래스를 추가 합니다. <div>그런 다음 .dropdown-item드롭다운 메뉴 내의 각 요소(링크 또는 버튼)에 클래스를 추가합니다.

드롭다운 디바이더

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

예시

드롭다운 헤더

.dropdown-header클래스는 드롭다운 메뉴 내부에 헤더를 추가하는 데 사용됩니다 .

예시

<div class="dropdown-header">Dropdown header 1</div>

비활성화 및 활성 항목

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

드롭다운 메뉴에서 항목을 비활성화하려면 .disabled클래스를 사용합니다.

예시

<a class="dropdown-item active" href="#">Active</a>
<a class="dropdown-item disabled" href="#">Disabled</a>

드롭다운 위치

.dropright드롭다운 요소에 또는 .dropleft클래스를 추가하여 "dropright" 또는 "dropleft" 메뉴를 만들 수도 있습니다 . 캐럿/화살표가 자동으로 추가됩니다.

드롭라이트

드롭레프트

드롭다운 메뉴 오른쪽

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

예시

드롭업

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

예시

드롭다운 텍스트

클래스는 드롭다운 항목에 일반 텍스트를 추가 하는 .dropdown-item-text데 사용되거나 기본 링크 스타일 지정을 위해 링크에 사용됩니다.

예시

드롭다운이 있는 그룹화된 버튼

예시

<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Sony
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>
    </div>
</div>
</div>

분할 버튼 드롭다운

예시

<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
</div>
</div>

수직 버튼 그룹(드롭다운 포함)

예시

<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Sony
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>
    </div>
</div>
</div>

전체 부트스트랩 4 드롭다운 참조

모든 드롭다운 옵션, 메서드 및 이벤트에 대한 전체 참조를 보려면 Bootstrap 4 JS 드롭다운 참조 로 이동 하십시오.

❮ 이전의 다음 ❯

부트스트랩 4 튜토리얼

부트스트랩 4 그리드

부트스트랩 4 기타

부트스트랩 4 참조