• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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-toggledata-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-toggledata-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-splitdata-toggle="dropdown">

       코딩언어

    </button>

    <div class="dropdown-menu">

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

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

    </div>

  </div>

</div>

 


 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
basic BS4 - HOME (BS소개)
basic BS4 - Start (BS시작) - BS4다운 / BS4CDN / BS4구문
basic BS4 - Container (BS컨테이너) - 박스형 vs 와이드형 (= .container vs. .co…
basic BS4 - Grid (BS그리드)
basic BS4 - Text/Typography (BS글자 = BS텍스트)
basic BS4 - Color (BS색깔 = BS색상) - BS글자색 + BS배경색
basic BS4 - Table (BS테이블) - 테이블테두리 + 테이블배경색 + 반응형테이블
basic BS4 - Image (BS이미지) - 이미지모양 + 이미지정렬 + 반응형이미지
basic BS4 - Jumbotron (BS점보트론) - 박스형 vs 와이드형
basic BS4 - Alert (BS경고 = BS얼럿 = BS경보) - 배경색 + 글자색 + 링크색 + 닫기 + 애니…
basic BS4 - Button (BS버튼) - 버튼색깔 + 버튼크기 + 버튼활성화 + 버튼비활성화
basic BS4 - Button Group (BS버튼그룹)
basic BS4 - Badge (BS배지)
basic BS4 - Progress Bar (BS진행바 = BS진도바 = BS프로그레스바)
basic BS4 - Spinner (BS스피너 = BS회전 = BS로더)
basic BS4 - Pagination (BS페이지매기기 = BS페이지번호 = BS페이징 = BS패지네이션) + BS…
basic BS4 - List Group (BS리스트그룹)
basic BS4 - Card (BS카드) - Well (BS웰) + Panel (BS패널) + Thumbnail (B…
basic BS4 - Dropdown (BS드롭다운/BS드롭업 = BS드랍다운/BS드랍업)
basic BS4 - Collapse (BS접기 = BS컬랩스 = BS토글)
basic BS4 - Nav (네브) - 간단메뉴 + 일반탭 + 알약탭
basic BS4 - Navbar (메뉴바) - 네비게이션 메뉴바 (= 네브바 = 네비바) ※ BS4분기점
basic BS4 - Form (BS폼양식)
basic BS4 - Input (BS입력 = BS인풋)
basic BS4 - Input Group (BS입력그룹 = BS인풋그룹)
basic BS4 - Custom Form (BS커스텀폼)
basic BS4 - Carousel (BS캐러셀)
basic BS4 - Modal (BS모달)
basic BS4 - Tooltip (BS툴팁 = BS말풍선 허버형)
basic BS4 - Popover (BS팝오버) ★ - 클릭형말풍선
basic BS4 - Toast (BS토스트) - 순간말풍선 (= 팝업상자 = 짧은경고창 = 스낵바)
basic BS4 - Scrollspy (BS스크롤스파이) - 원페이지메뉴링크 (= 내부링크)
basic BS4 - Utilities (BS유틸클래스 + BS4추가클래스) ★★★★★
basic BS4 - Flex (BS플렉스박스) ★★★★★
basic BS4 - Icon (BS아이콘)
basic BS4 - Media Object (BS미디어객체) - 썸네일형, 요약형
basic BS4 - Filter (필터링) ★ - 테이블필터링 + 리스트필터링 + 드롭다운필터링 + div안 텍스트필…
grid BS4 - Grid (BS그리드) - 반응형 레이아웃 ★★★
grid BS4 - Grid Stacked-to-horizontal (BS그리드 수직정렬 → 수평정렬)
grid BS4 - Grid Extra Small (BS그리드 초소형기기) - .col-숫자, .col 클래스
grid BS4 - Grid Small (BS그리드 소형기기) - .col-sm-숫자, .col-sm 클래스
grid BS4 - Grid Medium (BS그리드 중형기기) - .col-md-숫자, .col-md 클래스
grid BS4 - Grid Large (BS그리드 대형기기) - .col-lg-숫자, .col-lg 클래스
grid BS4 - Grid Extra Large (BS그리드 초대형기기) - .col-xl-숫자, .col-xl 클…
grid BS4 - Grid Example (BS그리드 예제) ★
theme BS4 - Template (BS템플릿)
BS_bookmark BS4 - BS메가메뉴
BS_bookmark BS4 - Masonry (메이슨리) 갤러리
목록
찾아주셔서 감사합니다. Since 2012