왕진 블로그
부트스트랩 드롭다운 · 점보트론 · 내비게이션바 · 진행바 완전 정리
버튼 드롭다운, 점보트론, static-top 내비게이션바, 진행바를 Bootstrap 3 기준으로 정리합니다.
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">버튼 <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu"><li><a href="#">메뉴</a></li></ul>
</div>
<div class="jumbotron"><div class="container"><h1>Hello, world!</h1><p>중요 내용</p></div></div>
<nav class="navbar navbar-default navbar-static-top">...</nav>
<div class="progress"><div class="progress-bar" aria-valuenow="90" style="width:90%"></div></div>100번 폴더는 Bootstrap 3 UI 컴포넌트 네 가지를 다룹니다. 버튼 드롭다운은 메뉴 동작, 점보트론은 강조 영역, navbar는 사이트 탐색, progress bar는 진행 상태 표현을 담당합니다.
- 드롭다운과 navbar collapse는 JavaScript가 필요합니다.
- 점보트론과 진행바는 CSS 구조만으로도 표시됩니다.
- 진행바는 접근성을 위해 aria 값과 sr-only 문구를 함께 둡니다.
- 모두 Bootstrap 3 기준 문법으로 읽어야 합니다.
btn-group 안에 button.dropdown-toggle과 ul.dropdown-menu를 넣으면 버튼 클릭 시 메뉴가 열립니다. caret은 작은 삼각형 표시입니다.
| 클래스 | 역할 | 주의 |
|---|---|---|
| btn-group | 버튼 그룹 컨테이너 | 메뉴와 버튼을 같은 단위로 묶습니다. |
| dropdown-toggle | 메뉴 여는 버튼 | data-toggle=dropdown과 함께 사용합니다. |
| dropdown-menu | 메뉴 목록 | li와 a를 내부에 둡니다. |
| divider | 구분선 | 메뉴 그룹을 나눕니다. |
분할 버튼은 기본 동작 버튼과 드롭다운 토글 버튼을 따로 둡니다. 왼쪽 버튼은 즉시 실행, 오른쪽 caret 버튼은 추가 메뉴를 여는 식으로 역할을 나눕니다.
- btn-group을 만듭니다.
- 첫 번째 button에는 기본 동작을 둡니다.
- 두 번째 button에는 dropdown-toggle과 caret을 둡니다.
- 뒤에 dropdown-menu를 배치합니다.
- 색상 클래스는 두 버튼에 함께 맞춥니다.
btn-lg, btn-sm으로 버튼 크기를 바꾸고, btn-group에 dropup을 붙이면 메뉴가 위로 펼쳐집니다. 화면 하단에 버튼이 있을 때 dropup이 유용합니다.
| 클래스 | 역할 | 주의 |
|---|---|---|
| btn-lg | 큰 드롭다운 버튼 | 대표 액션에 적합합니다. |
| btn-sm | 작은 드롭다운 버튼 | 조밀한 UI에 적합합니다. |
| dropup | 위쪽 메뉴 | 하단 공간이 부족할 때 사용합니다. |
| btn-danger | 위험 색상 | 삭제성 메뉴에는 신중히 사용합니다. |
jumbotron은 큰 제목과 설명, CTA 버튼을 담는 강조 영역입니다. 원문은 전체 폭 점보트론과 container 내부 점보트론의 글자 크기 차이를 비교합니다.
- 중요 공지나 랜딩 상단 메시지를 강조합니다.
- 안쪽에 container를 두면 콘텐츠 폭을 맞출 수 있습니다.
- h1과 p가 일반 본문보다 크게 보입니다.
- Bootstrap 최신 버전에서는 jumbotron이 제거되어 직접 구현이 필요합니다.
navbar navbar-default navbar-static-top은 상단 네비게이션바를 만듭니다. fixed가 아니므로 스크롤하면 함께 위로 올라갑니다.
| 클래스 | 역할 | 주의 |
|---|---|---|
| navbar | 네비게이션바 기본 | 전체 구조의 시작입니다. |
| navbar-default | 기본 색상 | Bootstrap 3 테마입니다. |
| navbar-static-top | 상단 배치 | 고정은 아니고 문서 흐름에 있습니다. |
| navbar-brand | 로고 영역 | 사이트 이름이나 로고 링크입니다. |
navbar-toggle 버튼은 모바일에서 접힌 메뉴를 여는 버튼입니다. data-target은 collapse 영역의 선택자와 일치해야 합니다.
- navbar-header 안에 toggle 버튼을 둡니다.
- sr-only로 Toggle navigation 문구를 넣습니다.
- icon-bar 세 개로 햄버거 아이콘을 만듭니다.
- collapse navbar-collapse 영역에 메뉴를 넣습니다.
- data-target과 collapse 클래스 이름을 맞춥니다.
nav navbar-nav는 메뉴 목록이고, navbar-form navbar-right는 네비게이션바 오른쪽 검색 폼입니다. 원문은 메뉴와 검색 입력을 같은 collapse 영역에 넣습니다.
| 클래스 | 역할 | 주의 |
|---|---|---|
| navbar-nav | 네비게이션 메뉴 | ul에 붙입니다. |
| active | 현재 메뉴 | 현재 위치 표시입니다. |
| navbar-form | 네비게이션바 안 폼 | 검색 폼에 적합합니다. |
| navbar-right | 오른쪽 정렬 | Bootstrap 3 float 기반입니다. |
progress 안에 progress-bar를 넣고 style width로 진행률을 지정합니다. aria-valuenow, aria-valuemin, aria-valuemax는 보조기술에 진행률을 설명합니다.
| 클래스 | 역할 | 주의 |
|---|---|---|
| progress | 진행바 컨테이너 | 전체 막대 영역입니다. |
| progress-bar | 실제 막대 | width 값만큼 채워집니다. |
| aria-valuenow | 현재 값 | 화면 표시와 일치해야 합니다. |
| sr-only | 숨김 텍스트 | 진행률 설명을 제공합니다. |
progress-bar-success, info, warning, danger는 진행 상태 의미를 색상으로 표현합니다. 성공률, 정보성 진행, 주의, 위험 상태를 구분할 때 사용합니다.
| 클래스 | 역할 | 주의 |
|---|---|---|
| progress-bar-success | 성공 상태 | 완료나 정상 진행 |
| progress-bar-info | 정보 상태 | 일반 안내 |
| progress-bar-warning | 주의 상태 | 확인 필요 |
| progress-bar-danger | 위험 상태 | 실패나 오류 |
progress-striped는 줄무늬 진행바를 만들고 active를 추가하면 움직이는 효과가 납니다. 애니메이션은 시선을 끌지만 과하면 피로감을 줄 수 있습니다.
- progress-striped는 패턴을 추가합니다.
- active는 움직이는 효과를 줍니다.
- 작업이 실제로 진행 중일 때만 애니메이션을 쓰는 편이 좋습니다.
- 정적인 완료 상태에는 일반 진행바가 더 차분합니다.
하나의 progress 안에 여러 progress-bar를 넣으면 누적 진행바가 됩니다. 성공 40%, 경고 30%, 위험 20%처럼 여러 상태의 합계를 한 줄에 표시할 수 있습니다.
| 클래스 | 역할 | 주의 |
|---|---|---|
| 첫 번째 bar | 40% success | 정상 완료 |
| 두 번째 bar | 30% warning | 주의 필요 |
| 세 번째 bar | 20% danger | 문제 구간 |
| 합계 | 90% | 100%를 넘지 않게 관리 |
드롭다운과 navbar collapse는 Bootstrap JavaScript가 필요합니다. jQuery를 먼저 로드하고 그 다음 bootstrap.min.js를 로드해야 합니다.
- jQuery 스크립트를 먼저 둡니다.
- bootstrap.min.js를 그 다음 둡니다.
- data-toggle 속성이 맞는지 확인합니다.
- 콘솔 오류가 없고 클릭 시 메뉴가 열리는지 확인합니다.
이 폴더 이름은 Bootstrap5지만 원문 코드는 Bootstrap 3 문법입니다. jumbotron, navbar-default, navbar-toggle, progress-striped는 Bootstrap 3 기준으로 읽어야 합니다.
| 클래스 | 역할 | 주의 |
|---|---|---|
| jumbotron | Bootstrap 3/4 계열 | Bootstrap 5에는 기본 컴포넌트가 없습니다. |
| navbar-toggle | Bootstrap 3 모바일 토글 | 최신 버전은 navbar-toggler입니다. |
| data-toggle | Bootstrap 3/4 방식 | Bootstrap 5는 data-bs-toggle입니다. |
| progress-striped | Bootstrap 3 방식 | 최신 버전 클래스 확인 필요 |
- 드롭다운 버튼에 data-toggle="dropdown"이 있습니다.
- jQuery와 bootstrap.min.js 로드 순서가 맞습니다.
- navbar toggle의 data-target과 collapse 클래스가 일치합니다.
- progress-bar의 width와 aria-valuenow가 같은 의미를 가집니다.
- 누적 진행바의 합계가 100%를 넘지 않습니다.
- Bootstrap 3 문법을 최신 버전에 그대로 복사하지 않습니다.
| 목표 | 추천 컴포넌트 | 이유 |
|---|---|---|
| 추가 명령 메뉴 | button dropdown | 주요 버튼 주변에 보조 명령을 숨길 수 있습니다. |
| 상단 강조 메시지 | jumbotron | 큰 제목과 설명을 한 번에 보여 줍니다. |
| 사이트 전역 메뉴 | navbar | 브랜드, 메뉴, 검색을 함께 담을 수 있습니다. |
| 작업 진행률 | progress | 현재 진행 상태를 시각적으로 보여 줍니다. |
| 복합 상태 | stacked progress | 성공, 경고, 위험 비율을 한 줄에 표시합니다. |
| 컴포넌트 | 증상 | 확인할 것 |
|---|---|---|
| dropdown | 클릭해도 메뉴가 열리지 않음 | jQuery, bootstrap.min.js, data-toggle 순서 |
| dropup | 메뉴가 화면 밖으로 나감 | 버튼 위치와 위쪽 여백 |
| jumbotron | 강조 영역 폭이 어색함 | container 안/밖 배치 차이 |
| navbar | 모바일 토글이 열리지 않음 | data-target과 collapse 클래스 이름 |
| progress | 진행률이 잘못 보임 | style width 값과 aria-valuenow 값 |
| stacked progress | 막대가 넘침 | 각 progress-bar width 합계 |
- 드롭다운 버튼에는 메뉴가 열린다는 것을 알 수 있는 caret이나 텍스트가 필요합니다.
- 아이콘 막대만 있는 navbar-toggle에는 sr-only 문구가 반드시 필요합니다.
- 진행바에는 화면에 보이는 비율과 보조기술용 aria 값이 함께 있어야 합니다.
- 점보트론 안의 CTA 버튼 문구는 Learn more처럼 목적이 모호하지 않게 구체화합니다.
- 색상 진행바는 색상만으로 의미를 전달하지 말고 숨김 텍스트나 주변 문구를 보완합니다.
- Bootstrap 5에서는 data-toggle이 아니라 data-bs-toggle을 사용합니다.
- navbar-toggle은 navbar-toggler 구조로 바뀌었습니다.
- jumbotron은 기본 컴포넌트에서 빠졌으므로 유틸리티 클래스로 직접 구성합니다.
- progress의 기본 구조는 유지되지만 색상 클래스와 보조 클래스는 버전 문서를 확인합니다.
- Bootstrap 3 예제를 최신 프로젝트로 옮길 때는 스크립트 의존성과 클래스 이름을 함께 점검합니다.
- 동작 컴포넌트는 HTML 클래스 변환뿐 아니라 JavaScript 초기화 방식도 같이 바뀔 수 있습니다.
- 마이그레이션 전에는 원본 예제가 Bootstrap 3 문법이라는 점을 문서에 남겨 혼동을 줄입니다.
| 실수 | 문제 | 해결 |
|---|---|---|
| jQuery보다 bootstrap.js를 먼저 로드 | 드롭다운과 navbar가 동작하지 않습니다. | jQuery를 먼저 로드합니다. |
| data-target 불일치 | 모바일 메뉴가 열리지 않습니다. | toggle 버튼과 collapse 선택자를 맞춥니다. |
| aria 값과 width 불일치 | 보조기술에 잘못된 진행률을 전달합니다. | width와 aria-valuenow를 함께 갱신합니다. |
| dropup 위치 오판 | 메뉴가 화면 밖으로 나갈 수 있습니다. | 버튼 위치와 화면 여백을 확인합니다. |
| Bootstrap 5 문법으로 착각 | data-toggle 등이 동작하지 않을 수 있습니다. | 원문은 Bootstrap 3 기준으로 해석합니다. |
핵심 한 줄 요약
Tags
'php' 카테고리의 다른 글
| 부트스트랩 캐러셀 · 모달 · 스크롤스파이 완전 정리 (0) | 2026.07.18 |
|---|---|
| 부트스트랩 라벨 · 배지 · 알림 · 목록그룹 완전 정리 (0) | 2026.07.18 |
| 부트스트랩 네비게이션 · 페이지네이션 · 패널 완전 정리 (0) | 2026.07.17 |
| 부트스트랩 타이포그래피 · 반응형 유틸리티 완전 정리 (0) | 2026.07.17 |
| 부트스트랩 그리드 완전 정리 (0) | 2026.07.17 |
댓글