[basic] BS4 - Dropdown (BS드롭다운/BS드롭업 = BS드랍다운/BS드랍업)

1. Dropdown 기본
2. Dropdown Divider (메뉴구분)
3. Dropdown Header (머리말)
4. Dropdown Active (활성화) / Disable (비활성화)
5. Dropdown Position (위치)
6. Dropdown Menu Right (오른쪽하단)
7. Dropup (드롭업)
8. Dropdown Text (텍스트)
9. Dropdown Group Button (그룹버튼)
10. Dropdown Split Button (분리버튼)
11. Dropdown Vertical Group Button (수직그룹버튼)
12. Dropdown 종합 예제
13. Dropdown 예제 - 버튼그룹 (가로/세로)
14. Dropdown 예제 - 스플릿버튼 드롭다운

Dropdown 기본

 

<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="#">HTML</a>

        <a class="dropdown-item" href="#">CSS</a>

        <a class="dropdown-item" href="#">JS</a>

    </div>

</div>

 

예제보기 

Dropdown Divider (메뉴구분)

 

<div class="dropdown-divider"></div>

 

예제보기 

Dropdown Header (머리말)

 

<div class="dropdown-header">앞단 코딩언어</div>

 

예제보기 

Dropdown Active (활성화) / Disable (비활성화)

 

<a class="dropdown-item active" href="#">링크 활성화</a>

<a class="dropdown-item disabled" href="#">링크 비활성화</a>

 

Dropdown Position (위치)

 

버튼 우측에 드롭다운: <div class="dropdown dropright">

버튼 좌측에 드롭다운: <div class="dropdown dropleft">

예제보기 

Dropdown Menu Right (오른쪽하단)

 

<div class="dropdown-menu dropdown-menu-right">

 

예제보기 

Dropup (드롭업)

 

<div class="dropup">

 

예제보기 

Dropdown Text (텍스트)

 

<div class="dropdown-menu">

  <a class="dropdown-item" href="#">링크1</a>

  <a class="dropdown-item" href="#">링크2</a>

  <a class="dropdown-item-text" href="#">Text 링크</a>

  <span class="dropdown-item-text">Text</span>

</div>

 

예제보기 

Dropdown Group Button (그룹버튼)

 

<div class="btn-group">

    <button type="button" class="btn btn-primary">HTML</button>

    <button type="button" class="btn btn-primary">CSS</button>

    <div class="btn-group">

        <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="#">영카트</a>

        </div>

    </div>

</div>

 

예제보기 

Dropdown Split Button (분리버튼)

 

<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="#">링크 1</a>

        <a class="dropdown-item" href="#">링크 2</a>

    </div>

</div>

 

예제보기 

Dropdown Vertical Group Button (수직그룹버튼)

 

<div class="btn-group-vertical">

    <button type="button" class="btn btn-primary">버튼1</button>

    <button type="button" class="btn btn-primary">버튼2</button>

    <div class="btn-group">

        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">버튼3</button>

        <div class="dropdown-menu">

            <a class="dropdown-item" href="#">Tablet</a>

            <a class="dropdown-item" href="#">Smartphone</a>

        </div>

    </div>

</div>

 

예제보기 

Dropdown 종합 예제

 

<div class="dropdown dropright">

    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

      코딩언어

    </button>

    <div class="dropdown-menu dropdown-menu-right">

 

        <h5 class="dropdown-header">브라우저 언어</h5>

        <a class="dropdown-item" href="#">HTML</a>

        <a class="dropdown-item" href="#">CSS</a>

        <a class="dropdown-item-text" href="#">JS</a>

        <span class="dropdown-item-text">JQ</span>
        <a class="dropdown-item active" href="#">BS</a>

    

        <div class="dropdown-divider"></div>    

        <h5 class="dropdown-header">서버 언어</h5>

        <a class="dropdown-item " href="#">PHP</a>    

        <a class="dropdown-item disabled" href="#">SQL</a>

</div>

 

결과보기

---

[dropdown 클래스 교체]

 

dropup 클래스 : 드롭업메뉴 (= 무조건 위로 드롭)
(예) <div class="dropup">

btn-group 클래스 : 버튼그룹 (아래예제참고)

 

---

[dropdown 클래스 옆]

[드롭다운 위치]
클래스 없는 경우 : 아래로 드롭다운. (아래 공간 부족 시, 위로 드롭)

dropright 클래스 : 오른쪽에 드롭다운

dropleft 클래스 : 왼쪽에 드롭다운

 

---

[dropdown-toggle 클래스 옆]

 

dropdown-toggle-split 클래스 : 스클릿버튼 드롭다운

 

---

[dropdown-menu 클래스 옆]

 

[드롭다운메뉴 정렬]

클래스 없는 경우 : 드롭다운메뉴 왼쪽정렬

dropdown-menu-right 클래스 : 드롭다운메뉴 오른쪽정렬 

 

---

[소메뉴간 사이]

 

dropdown-divider 클래스 : 드롭다운 소메뉴 구분선

 

---

[dropdown-item 클래스 대체]

 

dropdown-item-text 클래스 : 소메뉴링크 또는 단순텍스트 (아래예제참고)

 

---

[dropdown-item 클래스 옆]

 

active 클래스 : 메뉴강조 (파란색배경)

disabled 클래스 : 비활성화 (=클릭방지)

Dropdown 예제 - 버튼그룹 (가로/세로)

 

<div class="btn-group">

  <button type="button" class="btn btn-primary">빌더</button>

  <button type="button" class="btn btn-primary">서버</button>

  <div class="btn-group">

    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

       코딩언어

    </button>

    <div class="dropdown-menu">

      <a class="dropdown-item" href="#">HTML</a>

      <a class="dropdown-item" href="#">CSS</a>

    </div>

  </div>

</div>

 

---

[btn-group 클래스 대체]

 

btn-group-vertical 클래스 : 세로 버튼그룹 드롭다운

 

---

[dropdown 클래스 대체]

 

btn-group 클래스 : 버튼그룹 안에 사용할 땐, dropdown 클래스 대신 btn-group 클래스 사용.

 

Dropdown 예제 - 스플릿버튼 드롭다운

 

<div class="btn-group">

  <button type="button" class="btn btn-primary">빌더</button>

  <button type="button" class="btn btn-primary">서버</button>

  <div class="btn-group">

    <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="#">HTML</a>

      <a class="dropdown-item" href="#">CSS</a>

    </div>

  </div>

</div>