Bootstrap 5

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

홈짱 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 837
목차
  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 Vertical Group Button (수직그룹버튼)

※ BS4와 거의 동일. 단 일부 바뀜.

 

Dropdown 기본

 

<div class="dropdown">

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

    코딩언어

  </button>

  <ul class="dropdown-menu">

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

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

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

  </ul>

</div>

 

결과보기 

cf. BS4 경우, data-toggle="dropdown" 속성 사용.

 

Dropdown Divider (메뉴구분)

 

<div class="dropdown">

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

    코딩언어

  </button>

  <ul class="dropdown-menu">

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

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

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

    <li><hr class="dropdown-divider"></li>

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

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

  </ul>

</div>

 

결과보기 

※ BS4와 동일

 

Dropdown Header (머리말)

 

<div class="dropdown">

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

    코딩언어

  </button>

  <ul class="dropdown-menu">

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

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

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

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

    <li><h5 class="dropdown-header">뒷단 코딩언어</h5></li>

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

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

  </ul>

</div>

 

결과보기 

 

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

※ <a> 태그에 아래 클래스 추가

  • .active 클래스 - 링크 활성화 (※ 파란색 배경에 흰글씨로 표시)
  • .disabled 클래스 - 링크 비활성화 (※ 연회색 글씨로 표시)

 

<div class="dropdown">

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

      코딩언어

    </button>

    <ul class="dropdown-menu">

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

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

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

    </ul>

</div> 

 

결과보기

※ BS4와 동일 

 

Dropdown Position (위치)

※ .dropdown 클래스 옆에 아래 클래스 추가

  • .dropend 클래스 - 버튼 우측 사이드에 드롭다운
  • .dropstart 클래스 - 버튼 좌측 사이드에 드롭다운


  <div class="dropdown dropend">

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

      코딩언어

    </button>

    <ul class="dropdown-menu">

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

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

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

    </ul>

  </div>

 

  <div class="dropdown dropstart text-end">

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

      코딩언어

    </button>

    <ul class="dropdown-menu">

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

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

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

    </ul>

  </div>


결과보기

PS. 주의사항

 

  • 드롭다운 공간 부족 시, 자동으로 위치가 반대로 바뀜.
  • .dropstart 효과 보여주기 위해 .text-end 클래스 추가함.

 

※ BS4 경우, (.dropright / .dropleft) 클래스 사용.

 

Dropdown Menu Right (오른쪽하단)

※ .dropdown 클래스 옆에 .dropdown-menu-end 클래스 추가.

 

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

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

      홈짱닷컴 (Homzzang.com) 코딩언어 강의

    </button>

    <ul class="dropdown-menu">

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

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

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

    </ul>

</div>

 

결과보기 

cf. BS4 경우, .dropdown-menu-right 클래스 사용. 

 

Dropup (드롭업)

※ .dropdown 클래스 대신, .dropup 클래스 사용. (나머진 동일)


<div class="dropup">

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

      코딩언어

    </button>

    <ul class="dropdown-menu">

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

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

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

    </ul>

</div>

 

결과보기 

 

Dropdown Text (텍스트)

※ .dropdown-item 클래스 대신, dropdown-item-text 클래스 사용.

 

  <div class="dropdown">

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

      코딩언어

    </button>

    <ul class="dropdown-menu">

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

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

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

      <li><span class="dropdown-item-text">TEXT</span></li>

    </ul>

  </div> 

</div>

 

결과보기 

※ BS4와 동일

 

Dropdown Group Button (그룹버튼)

※ .dropdown 클래스 대신 .btn-group 클래스 사용.

  

  <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-bs-toggle="dropdown">빌더</button>

      <ul class="dropdown-menu">

        <li><a class="dropdown-item" href="#">그누보드</a></li>

        <li><a class="dropdown-item" href="#">영카트</a></li>

      </ul>

    </div> 

  </div>

 

결과보기 


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

※ 맨 외곽 .btn-group 클래스 대신 .btn-group-vertical 클래스 사용.

 

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

    <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-bs-toggle="dropdown">빌더</button>

      <ul class="dropdown-menu">

        <li><a class="dropdown-item" href="#">그누보드</a></li>

        <li><a class="dropdown-item" href="#">영카트</a></li>

      </ul>

    </div> 

</div>

 

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

Bootstrap 5 관련글

Bootstrap 3 관련글

Bootstrap 4 관련글

코딩동강 관련글

HTML 관련글

CSS 관련글

JavaScript 관련글

JQuery 관련글

PHP 관련글

SQL 관련글
분류 제목
basic BS5 - HOME (BS소개)
basic BS5 - Start (BS시작) - BS5다운로드 / BS5CDN / BS5구문
basic BS5 - Container (BS컨테이너) - 박스형 vs 와이드형 (= .container vs. .co…
basic BS5 - Grid (BS그리드)
basic BS5 - Text/Typography (BS글자/BS텍스트)
basic BS5 - Color (BS색깔/BS색상) - 글자색 / 배경색
basic BS5 - Table (BS테이블) - 테이블테두리 / 테이블배경색 / 반응형테이블
basic BS5 - Image (BS이미지) - 이미지모양 / 이미지정렬 / 반응형이미지
basic BS5 - Jumbotron (BS점보트론) - 지원 X
basic BS5 - Alert (BS경고 = BS얼럿 = BS경보)
basic BS5 - Button (BS버튼) - 버튼색깔 + 버튼크기 + 버튼활성화 + 버튼비활성화
basic BS5 - Button Group (BS버튼그룹)
basic BS5 - Badge (BS배지)
basic BS5 - Progress Bar (BS진행바 = BS진도바 = BS프로그레스바)
basic BS5 - Spinner (BS스피너 = BS회전 = BS로더)
basic BS5 - Pagination (BS페이지매기기 = BS페이지번호 = BS페이징 = BS패지네이션) + BS…
basic BS5 - List Group (BS리스트그룹)
basic BS5 - Card (BS카드)
basic BS5 - Dropdown (BS드롭다운/BS드롭업 = BS드랍다운/BS드랍업)
basic BS5 - Collapse (BS접기 = BS컬랩스 = BS토글)
1/4
목록
  • 채팅방
  • 필독
1. 채팅창 헤드에서 접속자 확인 2. 닉네임 클릭해 1:1 채팅 가능 3. 닉네임 클릭해 귓속말 가능 4. 닉네임 클릭해 호출하기 가능 5. 우하단 클릭해 환경 설정 가능 6. 의뢰글 작성 후 의뢰 상담 가능 7. 질문글 작성 후 질문 상담 가능 8. 채팅방에 개인정보 입력 금지 9. 채팅방에 광고 욕설 비방 금지
　홈　 PC버전 로그인 일본어
웹디자인언어
서버관리언어
고급코딩언어
그누보드
제작의뢰
Q&A
커뮤니티
웹유틸
회원센터
홈짱 PC버전 로그인