여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. Bootstrap – Bootstrap 4 드롭다운
Bootstrap – Bootstrap 4 드롭다운
5개월전 작성
6개월전 수정



부트스트랩 4 드롭다운

기본 드롭다운

드롭다운 메뉴는 사용자가 미리 정의된 목록에서 하나의 값을 선택할 수 있도록 하는 전환 가능한 메뉴다.
.dropdown 클래스는 드롭다운 메뉴를 나타낸다.

예제

드롭다운 메뉴를 열려면 .dropdown-toggle 클래스 및 data-toggle=”dropdown”속성이 포함된 버튼이나 링크를 사용하자.

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

<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-divider클래스는 드롭다운 메뉴 내부의 링크를 얇은 가로 테두리로 구분하는 데 사용된다.

예제
<div class="dropdown-divider"></div>
기본 예시
예제 보기

드롭다운 헤더

.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” 메뉴를 생성할 수도 있다.
캐럿/화살표는 자동으로 추가된다.

예제 1
<div class="dropdown dropright">
기본 예시
예제 보기
예제 2
<div class="dropdown dropleft">
기본 예시
예제 보기

드롭다운 메뉴 오른쪽

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

예제
<div class="dropdown-menu dropdown-menu-right">
기본 예시
예제 보기

드롭업

드롭다운 메뉴를 아래쪽이 아닌 위쪽으로 확장하려면 class=”dropdown”인

요소를 다음과 같이 class=”dropup”으로 변경한다.

예제
<div class="dropup">
기본 예시
예제 보기

드롭다운 텍스트

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

예제
<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Link 1</a>
  <a class="dropdown-item" href="#">Link 2</a>
  <a class="dropdown-item-text" href="#">Text Link</a>
  <span class="dropdown-item-text">Just Text</span>
</div>
기본 예시
예제 보기

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

예제
<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>
기본 예시
예제 보기
참고
Mingg`s Diary
밍구
공부 목적 블로그