최신판 |
당신의 편집 |
4번째 줄: |
4번째 줄: |
|
| |
|
| ==예시== | | ==예시== |
| *화면너비가 넓으면 navbar-collapse이 표시되고, navbar-toggle은 숨겨짐
| | *http://zetawiki.com/bootstrap/navbar-collapse.html |
| *화면너비가 작으면 navbar-collapse은 숨겨지고, navbar-toggle은 표시됨
| |
| :대신 버튼을 누르면 세로 드롭다운 형식으로 나타남
| |
| *http://zetawiki.com/ex/bootstrap/navbar-collapse.html | |
| <syntaxhighlight lang='html5'>
| |
| <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>
| |
| </syntaxhighlight>
| |
|
| |
|
| ==같이 보기== | | ==같이 보기== |
| *[[부트스트랩 양쪽정렬 내비게이션바]] | | *[[부트스트랩 양쪽정렬 네비게이션바]] |
| *[[부트스트랩 내비게이션바]] | | *[[부트스트랩 네비게이션바]] |
| *[[부트스트랩 드롭다운]]
| |
|
| |
|
| ==참고== | | ==참고 자료== |
| *http://www.w3schools.com/bootstrap/bootstrap_navbar.asp | | *http://www.w3schools.com/bootstrap/bootstrap_navbar.asp |
|
| |
|
| [[분류:Bootstrap]] | | [[분류: Bootstrap]] |
| [[분류:Navbar]]
| |