6-2. 내비게이션 바
■ 내비게이션 바
내비게이션 바 안에 링크를 추가하려면 요소 <ul>(또는 <div>) 요소에 클래스 .navbar-nav를 추가한 다음 클래스 .nav-item
을 <li>요소를 추가합니다. 그리고 <a> 요소에 클래스 .nav-link를 추가합니다.
<div class="container mt-3">
<h3>내비게이션 바</h3>
<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>
</div>
ex6-10.html의 실행 결과
■ 내비게이션 바 색상
내비게이션 바의 배경색을 변경하려면 색상 클래스(.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark, .bg-light)를
사용합니다.
<div class="container mt-3">
<h3>내비게이션 바 색상</h3>
<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>
<nav class="navbar navbar-expand-sm bg-primary navbar-dark mt-4">
<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>
</div>
ex6-11.html의 실행 결과
■ 드롭다운 내비게이션 바
다음은 내비게이션 바에 드롭다운 기능을 추가한 예입니다.
<div class="container mt-3">
<h3>드롭다운 내비게이션 바</h3>
<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="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<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>
</div>
ex6-12.html의 실행 결과
■ 검색 내비게이션 바
다음은 내비게이션 바에 검색 기능을 추가한 예입니다.
<div class="container mt-3">
<h3>검색 내비게이션 바</h3>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0)">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="text" placeholder="Search">
<button class="btn btn-primary" type="button">Search</button>
</form>
</div>
</div>
</nav>
</div>
ex6-13.html의 실행 결과
■ 고정 내비게이션 바
클래스 .fixed-top를 사용하면 내비게이션 바를 브라우저 상단에 고정할 수 있습니다.
<div style="height:1500px;">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Fixed top</a>
</div>
</nav>
<div class="container" style="margin-top:80px">
<h3>글 제목</h3>
<p>글 내용입니다.</p>
</div>
</div>
ex6-14.html의 실행 결과
