"부트스트랩 내비게이션바 자동접기 navbar-collapse"의 두 판 사이의 차이

잔글 (봇: 내비게이션바(을)를 Navbar(으)로 분류 대체함)
잔글 (봇: 자동으로 텍스트 교체 (-==참고 자료== +==참고==))
45번째 줄: 45번째 줄:
*[[부트스트랩 드롭다운]]
*[[부트스트랩 드롭다운]]


==참고 자료==
==참고==
*http://www.w3schools.com/bootstrap/bootstrap_navbar.asp
*http://www.w3schools.com/bootstrap/bootstrap_navbar.asp


[[분류:Bootstrap]]
[[분류:Bootstrap]]
[[분류:Navbar]]
[[분류:Navbar]]

2017년 7월 15일 (토) 03:55 판

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 참고

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}