• 회원가입
  • 로그인
  • 구글아이디로 로그인
웹디자인언어 Bootstrap 5Lv 1 : 손님

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

홈짱 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 831  
목차
  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토글)
basic BS5 - Nav (네브) - 간단메뉴 + 일반탭 + 알약탭
basic BS5 - Navbar (메뉴바) - 네비게이션 메뉴바 (= 네브바 = 네비바) ※ BS5분기점
basic BS5 - Carousel (BS캐러셀) ※ Slideshow (슬라이드쇼)
basic BS5 - Modal (BS모달)
basic BS5 - Tooltip (BS툴팁 = BS말풍선 허버형)
basic BS5 - Popover (BS팝오버) ★ - 클릭형말풍선
basic BS5 - Toast (BS토스트) - 순간말풍선 (= 팝업상자 = 짧은경고창 = 스낵바)
basic BS5 - Scrollspy (BS스크롤스파이) - 원페이지메뉴링크 (= 내부링크)
basic BS5 - Offcanvas (오프캔버스) - 숨겨진 사이드바 메뉴
basic BS5 - Utilities (BS유틸클래스) ★★★★★
basic BS5 - Flex (BS플렉스박스) ★★★★★
form BS5 - Form (BS폼양식)
form BS5 - Select Menu (실렉트메뉴) / Datalist (데이터리스트)
form BS5 - Checkbox (체크박스) / Radio button (라디오버튼) / Toggle Switch…
form BS5 - Range (레인지: 범위지정)
form BS5 - Input Group (BS입력그룹 = BS인풋그룹)
form BS5 - Form Floating Labels (폼 플로팅 라벨) ※ placeholder (플레이스홀더)
form BS5 - Form Validation (폼유효성검사)
grid BS5 - Grid (BS그리드) - 반응형 레이아웃 ★★★
grid BS5 - Grid Stacked-to-horizontal (BS그리드 수직정렬 → 수평정렬)
grid BS5 - Grid Extra Small (BS그리드 초소형기기) - .col-숫자, .col 클래스
grid BS5 - Grid Small (BS그리드 소형기기) - .col-sm-숫자, .col-sm 클래스
grid BS5 - Grid Medium (BS그리드 중형기기) - .col-md-숫자, .col-md 클래스
grid BS5 - Grid Large (BS그리드 대형기기) - .col-lg-숫자, .col-lg 클래스
grid BS5 - Grid Extra Large (BS그리드 초대형기기) - .col-xl-숫자, .col-xl 클…
grid BS5 - Grid XXL (BS그리드 초초대형기기) - .col-xxl-숫자, .col-xxl 클래스
grid BS5 - Grid Example (BS그리드 예제) ★
theme BS5 - Basic Template (기본템플릿)
typography BS5 - .lead 클래스 - 단락 돋보이게 하기 (= 단락강조 = .lead클래스 = 리드클래스)
typography BS5 - .text-start 클래스 - 텍스트 왼쪽정렬 (= 글자 좌측정렬 = .text-start클래스…
typography BS5 - .text-break 클래스 - 긴 텍스트에 의한 레이아웃 깨짐 방지 (= .text-break클…
typography BS5 - .text-center 클래스 - 텍스트 중앙정렬 (= 글자 가운데정렬 = .text-center…
typography BS5 - .text-decoration-none 클래스 - 텍스트 장식선(=꾸밈선) 제거 (= .text-…
typography BS5 - .text-end 클래스 - 텍스트 오른쪽정렬 (= 글자 우측정렬 = .text-end클래스 = …
typography BS5 - .text-nowrap 클래스 - 텍스트 연속 공백 통합 후 한 줄로 표현 (= .text-now…
typography BS5 - .text-lowercase 클래스 - 텍스트를 소문자로 변환 (= .text-lowercase …
typography BS5 - .text-uppercase 클래스 - 텍스트를 대문자로 변환 (= .text-uppercase …
typography BS5 - .text-capitalize 클래스 - 영단어 각 첫글자만 대문자로 변환 (= .text-cap…
typography BS5 - .initialism 클래스 - <abbr> 태그 안 글씨를 대문자로 변환 후, 살짝 작은 글씨로…
list BS5 - .list-unstyled 클래스 - 리스트 기본스타일과 왼쪽 padding 제거 (= .list…
1/2
목록
오늘: 9,105 | 어제: 9,318 | 최대: 11,609 | 전체: 6,439,428
  • (견적/의뢰/질문/등업) 상담은 게시판 이용해 주세요.
  • 인터넷 임시파일 제거 시 속도 ↑ (Ctrl + Shift + Del)

공지사항

최신글

최신댓글

사이트명:홈짱, 연락처:
Copyright ⓒ https://homzzang.com. All rights reserved.
찾아주셔서 감사합니다. Since 2012