네비게이션 바

네비게이션 바

페이지의 최상위에 위치하는 네이게이션 헤더

부트스크랩과 함께 스크린 사이즈에 따라서 네비게이션 바는 늘어날 수도 있고 collapse될 수도 있다.

표준 네비게이션 바는 <nav class="navbar navbar-default"> 로 정의될 수 있다.

<nav class="navbar navbar-default">

<div class="container-fluid">

<div class="navbar-header">

<a class="navbar-brand" href="#">WebSiteName</a>

</div>

<div>

<ul class="nav navbar-nav">

<li class="active"><a href="#">Home</a></li>

<li><a href="#">Page 1</a></li>

<li><a href="#">Page 2</a></li>

<li><a href="#">Page 3</a></li>

</ul>

</div>

</div>

</nav>

드롭다운 기능을 갖춘 네이게이션 바

화면이 좁아지면 오른쪽에 막대기 세개짜리 아이콘이 나옴

<div class="collapse navbar-collapse" id="myNavbar">

<ul class="nav navbar-nav">

<li class="active"><a href="#">Home</a></li>

<li><a href="#">Page 1</a></li>

<li><a href="#">Page 2</a></li>

<li><a href="#">Page 3</a></li>

</ul>

<ul class="nav navbar-nav navbar-right">

<li><a href="#"><span class="glyphicon glyphicon-user"></span>

Sign Up</a></li>

<li><a href="#"><span class="glyphicon glyphicon-log-in"></span>

Login</a></li>

</ul>

</div>

데스크탑 사이즈

모바일 사이즈