기본 드롭다운

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

<div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      웹강좌
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">실전홈페이지제작</a>
      <a class="dropdown-item" href="#">CSS Grid</a>
      <a class="dropdown-item" href="#">PHP5 & 그누보드5</a>
    </div>
</div>

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

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

실제로 드롭다운 메뉴를 작성하기 위해서 <div>요소에 .dropdown-menu클래스를 추가합니다. 그다음 드롭다운 메뉴의 각 요소(링크 또는 버튼)에 .dropdown-item클래스를 추가합니다.

 드롭다운 분배기(Divider)

.dropdown-divider클래스는 얇은 가로 테두리가 있는 드롭다운 메뉴 내 링크를 구분하는데 사용합니다.

<div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      강좌소개
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">실전홈페이지제작</a>
      <a class="dropdown-item" href="#">CSS Grid강좌</a>
      <a class="dropdown-item" href="#">PHP5 & 그누보드5강좌</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">강좌신청</a>
    </div>
</div>

드롭다운 해더(Header)

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

<div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      강좌
    </button>
    <div class="dropdown-menu">
      <h5 class="dropdown-header">유료강좌</h5>
      <a class="dropdown-item" href="#">실전홈페이지제작</a>
      <a class="dropdown-item" href="#">CSS Grid강좌</a>
      <a class="dropdown-item" href="#">PHP5 & 그누보드5강좌</a>
      <h5 class="dropdown-header">무료강좌</h5>
      <a class="dropdown-item" href="#">HTML강좌</a>
      <a class="dropdown-item" href="#">CSS강좌</a>
    </div>
  </div>

활성과 비활성 항목

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

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

드롭다운 위치

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

<div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      웹분야 강좌
    </button>
    <div class="dropdown-menu dropdown-menu-right">
      <a class="dropdown-item" href="#">실전홈페이지제작</a>
      <a class="dropdown-item" href="#">CSS Grid강좌</a>
      <a class="dropdown-item" href="#">PHP5 & 그누보드5강좌</a>
    </div>
</div>

Dropup

드롭다운 메뉴를 아래쪽이 아닌 위쪽으로 확장하려면 .dropdown 대신 .dropup을 사용합니다.

<div class="dropup">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      웹분야 강좌
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">실전홈페이지제작</a>
      <a class="dropdown-item" href="#">CSS Grid강좌</a>
    </div>
</div>

드롭다운 분할 버튼

드롭다운 메뉴에서 부메뉴버튼 분리를 위해 .dropdown-toggle-split클래스를 추가합니다.

<div class="btn-group">
    <button type="button" class="btn btn-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="#">실전홈페이지제작</a>
      <a class="dropdown-item" href="#">CSS Grid강좌</a>
    </div>
</div>