부트스트랩 내비게이션바 자동접기 navbar-collapse

1 개요[편집]

Collapsing The Navigation Bar, navbar-collapse
부트스트랩 네비게이션바 자동접기

2 예시[편집]

  • 화면너비가 넓으면 navbar-collapse이 표시되고, navbar-toggle은 숨겨짐
  • 화면너비가 작으면 navbar-collapse은 숨겨지고, navbar-toggle은 표시됨
대신 버튼을 누르면 세로 드롭다운 형식으로 나타남
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/latest/js/bootstrap.min.js"></script>
 
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="#">제타위키</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#"></a></li>
        <li><a href="#">메뉴1</a></li>
        <li><a href="#">메뉴2</a></li> 
        <li><a href="#">메뉴3</a></li> 
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">회원가입</a></li>
        <li><a href="#">로그인</a></li>
      </ul>
    </div>
  </div>
</nav>

3 같이 보기[편집]

4 참고[편집]