목차
- Navbar 가로형
- Navbar 세로형
- Navbar 가운데정렬
- Navbar 검색창 / 검색버튼
- Navbar 텍스트 수직정렬
- Navbar 메뉴바 (상단고정 / 하단고정 / 스티키상단고정)
Navbar 가로형
※ 로고・배경색・글자색・토글=메뉴숨기기/보이기・드롭다운메뉴
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<!-- 브랜드/로고-->
<a class="navbar-brand" href="#">Text 로고 또는 Image 로고</a>
<!-- 토글 Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#hzNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- 메뉴링크 -->
<div class="collapse navbar-collapse" id="hzNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">메뉴1</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">메뉴2</a>
</li>
<li class="nav-item disabled">
<a class="nav-link" href="#">메뉴3</a>
</li>
<!-- 드롭다운 -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
메뉴4
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">메뉴4-1</a>
<a class="dropdown-item" href="#">메뉴4-2</a>
<a class="dropdown-item" href="#">메뉴4-3</a>
</div>
</li>
</ul>
</div>
</nav>
결과보기
1. BS4 메뉴 가로형 구간 설정 (= BS4 분기점) - 외곽 div 태그에 적용.
.navbar-expand-xl
@media (min-width:750px ){...}
최소 1200px까지 가로형. 그 이하는 세로형.
.navbar-expand-lg
@media (min-width:750px ){...}
최소 992px까지 가로형. 그 이하는 세로형.
.navbar-expand-md
@media (min-width:750px ){...}
최소 768px까지 가로형. 그 이하는 세로형.
.navbar-expand-sm
@media (min-width:576px){...}
최소 576px까지 가로형, 그 이하는 세로형.
2. 활성 vs 비활성 - <a> 태그에 적용.
.active
현재 활성화된 메뉴 (= 현재 선택된 메뉴)
.disabled
링크 비활성화 메뉴 (= 클릭 금지 메뉴)
3. 배경색 - 외곽 div 태그에 적용.
.bg-primary: 파란색
.bg-success : 녹색
.bg-info : 청녹색
.bg-warning : 귤색
.bg-danger : 선홍색
.bg-secondary : 진회색
.bg-dark : 연검정
.bg-light : 연회색
4. 글자색 - 외곽 div 태그에 적용.
.navbar-dark
흰색 글씨
.navbar-light
검은색 글씨
5. 브랜드/로고
텍스트로고
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">Logo</a>
...
</nav>
이미지로고 - 수직높이 자동조절됨.
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#"><img src="hz.jpg" alt="Logo" style="width:40px;"></a>
...
</nav>
6. 메뉴바 토글 버튼
6-1.
<ul> 메뉴링크를 <div> 태그로 묶고, 아래 클래스와 아이디 부여.
<div class="collapse navbar-collapse" id="hznavbar">
6-2.
button 태그에 아래 클래스와 속성 추가
<button class="navbar-toggler" data-toggle="collapse" data-target="#hzNavbar"...>...</button>
PS.
.navbar-expand-sm 클래스 제거해 메뉴바를 무조건 숨기고 토글 버튼 표시 가능.
7. 드롭다운 메뉴
위 예제 참고.
Navbar 세로형
위 예제에서 .navbar-expand-xl|lg|md|sm 클래스 제거
결과보기
Navbar 가운데정렬
<nav class="navbar navbar-expand-sm bg-light justify-content-center">
...
</nav>
위 예제 경우,
xl,lg,md : 가로형. 가운데정렬
sm : 세로형, 왼쪽정렬.
Navbar 검색창 / 검색버튼
1. 검색창/검색버튼 나란히 배치.
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<input class="form-control mr-sm-2" type="text" placeholder="검색어입력">
<button class="btn btn-success" type="submit">확인</button>
</form>
</nav>
2. <input> 입력필드 앞에 아이콘 추가
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" placeholder="Username">
</div>
</form>
</nav>
Navbar 텍스트 수직정렬
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- 메뉴링크 -->
<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>
</ul>
<!-- 일반텍스트 -->
<span class="navbar-text">
메뉴바 안 글자
</span>
</nav>
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 및 그 이전 버전에서는 작동 안 함. position:relative 속성으로 간주됨.
