목차
Navbar 가로형 Navbar 세로형 Navbar 가운데정렬 Navbar 배경색/글자색 Navbar 브랜드/로고 Navbar 단순 텍스트 Navbar 햄버거 메뉴 (= 접힌 메뉴) Navbar 드롭다운 메뉴 Navbar 검색창 / 검색버튼 Navbar 메뉴바 (상단고정 / 하단고정 / 스티키고정)
Navbar 가로형
.navbar
.navbar-expand-xxl|xl|lg|md|sm 반응형 클래스 (= 해당 기기 이상부터 각 메뉴를 수평 배치)
기본 클래스 옆에 추가해 사용.
[예제] - (sm 미만: 수직 / sm 이상: 수평) 배치
<nav class="navbar navbar-expand-sm bg-light">
<div class="container-fluid">
<ul class="navbar-nav ">
<li class="nav-item ">
<a class="nav-link " href="#">링크1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">링크2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">링크3</a>
</li>
</ul>
</div>
</nav>
Navbar 세로형
위 예제에서 .navbar-expand-xxl|xl|lg|md|sm 클래스 제거
결과보기
Navbar 가운데정렬
<nav class="navbar navbar-expand-sm bg-light justify-content-center ">
...
</nav>
Navbar 배경색/글자색
배경색
.bg-primary - 파란색 (중요)
.bg-success - 녹색 (성공)
.bg-info - 파랑 (정보)
.bg-warning - 주황 (경고)
.bg-danger - 빨강 (위험)
.bg-secondary - 회색 (덜 중요)
.bg-dark - 진회색
.bg-light - 연회색
글자색 (주의 !!)
.navbar-dark - 흰색 글자
.navbar-light - 검정 글자
[예제] - 검은색 배경에 흰색 글씨bg-dark navbar-dark ">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active " href="#">활성화(=현재 선택) 된 링크</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">링크</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">링크</a>
</li>
<li class="nav-item">
<a class="nav-link disabled " href="#">비활성화(= 클릭 금지) 된 링크</a>
</li>
</ul>
</div>
</nav>
PS. 링크 활성화/비활성화 클래스
.active - 활성화 (= 현재 선택) 된 메뉴 표시
.disabled - 비활성화 (= 클릭 금지) 된 메뉴 표시
Navbar 브랜드/로고
.navbar-brand 클래스 - (브랜드명/로고/프로젝트명) 등 강조.
[예제1] - 텍스트 로고 경우
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand " href="#">텍스트 로고</a>
</div>
</nav>
[예제2] - 이미지 로고 경우
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand " href="#">
<img src="logo.png" alt="이미지 로고" style="width: 80%;" class="rounded-pill">
</a>
</div>
</nav>
Navbar 단순 텍스트
.navbar-text 클래스 - 메뉴바 안 단순 텍스트 수직/수평 자동 정렬.
[예제]
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<span class="navbar-text ">단순 text</span>
</div>
</nav>
Navbar 햄버거 메뉴 (= 접힌 메뉴)
[예제] - (sm 미만: 접힌 메뉴 상태) / (sm 이상: 안 접힌 메뉴 상태)
※ .navbar-expand-sm 클래스 제거 시, 항상 접힌 상태로 표시됨.
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">로고</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#Hz " >
<span class="navbar-toggler-icon" ></span>
</button>
<div class="collapse navbar-collapse" id="Hz " >
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">링크1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">링크2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">링크3</a>
</li>
</ul>
</div>
</div>
</nav>
Navbar 드롭다운 메뉴
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#Hz">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="Hz">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">링크1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">링크2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">링크3</a>
</li>
<li class="nav-item dropdown ">
<a class="nav-link dropdown-toggle " href="#" role="button" data-bs-toggle="dropdown" >링크4 (드롭다운)</a>
<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 " href="#">서브링크3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Navbar 검색창 / 검색버튼
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0)">로고</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#Hz">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="Hz">
<ul class="navbar-nav me-auto ">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">링크1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">링크2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">링크3</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="text" placeholder="검색어를 입력하세요.">
<button class="btn btn-primary" type="button">검색</button>
</form>
</div>
</div>
</nav>
PS. .me-auto 클래스 의미: margin-right: auto !important;
Navbar 메뉴바 (상단고정 / 하단고정 / 스티키고정)
[상단 고정]
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top ">
...
</nav>
[하단 고정]
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom ">
...
</nav>
[스티키 고정]
※ 스티키 고정 의미: 처음엔 원래 위치였다가, 스크롤 시 상단 고정.
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top ">
...
</nav>
※ 주의: sticky-top 속성은 IE11 이하에선 작동X. (position:relative 속성으로 간주됨.)
