댓글 목록

부트스트랩4 드롭다운

페이지 정보

작성자 운영자 작성일 18-03-24 14:21 조회 1,393 댓글 0

동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.

기본 드롭다운


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

1c2f02a52d95d3ecfdc6a4d20be85dfa_1521893090_2168.png 

<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)


1c2f02a52d95d3ecfdc6a4d20be85dfa_1521893817_7833.png
.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)


4c34e48de08a646fa32f0a163c90eb87_1521938286_8751.png
 

.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>


활성과 비활성 항목

4c34e48de08a646fa32f0a163c90eb87_1521938768_4182.png

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


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


드롭다운 위치

4c34e48de08a646fa32f0a163c90eb87_1521939094_9011.png
드롭다운을 오른쪽 정렬하려면 .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


4c34e48de08a646fa32f0a163c90eb87_1521939424_7036.png
드롭다운 메뉴를 아래쪽이 아닌 위쪽으로 확장하려면 .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>

드롭다운 분할 버튼


4c34e48de08a646fa32f0a163c90eb87_1521939787_7292.png
드롭다운 메뉴에서 부메뉴버튼 분리를 위해 .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>


댓글목록 0

등록된 댓글이 없습니다.