네비게이션 바
페이지의 최상위에 위치하는 네이게이션 헤더
부트스크랩과 함께 스크린 사이즈에 따라서 네비게이션 바는 늘어날 수도 있고 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>
데스크탑 사이즈
모바일 사이즈
'Bootstrap' 카테고리의 다른 글
반응형 그리드 시스템 (0) | 2015.01.11 |
---|---|
점보트론(jumbotron) 이용하기 (0) | 2015.01.11 |