탐색 바
네비게이션 바는 페이지 상단에 위치 탐색 헤더입니다 :
으로 Bootstrap , 네비게이션 바는 확장 할 수 있습니다 또는 화면의 크기에 따라, 축소합니다.
표준 탐색 모음이 만들어집니다 <nav class="navbar navbar-default"> .
다음의 예는 페이지 상단에 탐색 모음을 추가하는 방법을 보여줍니다 :
예
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</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>
</nav>
...
»그것을 자신을 시도 이 페이지의 모든 예는 작은 화면에 너무 많은 공간을 차지 네비게이션 바 (단, 탐색 모음은 큰 화면에 하나의 줄에있을 것이다 - 때문에 표시됩니다 Bootstrap 응답). (작은 스크린)이 문제는이 페이지에서 마지막 예에서 해결 될 것입니다.
반전 네비게이션
기본 탐색 모음의 스타일이 마음에 들지 않으면, Bootstrap 대안, 검은 네비게이션 바에을 제공합니다 :
그냥 변경 .navbar-default 으로 클래스를 .navbar-inverse :
예
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</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>
</nav>
»그것을 자신을 시도 고정 네비게이션
탐색 바는 상단 또는 페이지의 하단에 고정 될 수있다.
고정 네비게이션 바는 페이지 스크롤의 독립적 인 고정 된 위치 (상단 또는 하단)에서 볼 수 유지됩니다.
.navbar-fixed-top 클래스 상단에 고정 탐색 모음을합니다 :
예
<nav class="navbar navbar-inverse
navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</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>
</nav> »그것을 자신을 시도 .navbar-fixed-bottom 클래스는 하단의 네비게이션 바 숙박합니다 :
예
<nav class="navbar navbar-inverse
navbar-fixed-bottom">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</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>
</nav> »그것을 자신을 시도 드롭 다운으로 네비게이션
탐색 바는 드롭 다운 메뉴를 보유 할 수 있습니다.
다음의 예는 "페이지 1"버튼의 드롭 다운 메뉴를 추가합니다 :
예
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li
class="dropdown">
<a
class="dropdown-toggle" data-toggle="dropdown" href="#">Page
1
<span class="caret"></span></a>
<ul
class="dropdown-menu">
<li><a href="#">Page
1-1</a></li>
<li><a href="#">Page
1-2</a></li>
<li><a href="#">Page
1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav> »그것을 자신을 시도 마우스 오른쪽 정렬 네비게이션
.navbar-right 클래스는 오른쪽 정렬 탐색 모음 버튼에 사용됩니다.
다음 예에서 우리는 "회원 가입"버튼을 탐색 줄에 오른쪽에 "로그인"버튼을 삽입합니다. 우리는 또한 두 개의 새로운 버튼의 각각에 glyphicon를 추가 :
예
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</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>
<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>
</nav> »그것을 자신을 시도 탐색 바 붕괴
탐색 바는 작은 화면에 너무 많은 공간을 차지합니다.
우리는 탐색 모음을 숨기한다 필요할 때에 만 표시.
다음 예에서 탐색 모음은 오른쪽 상단에있는 버튼으로 대체됩니다. 버튼을 클릭 할 경우에만 탐색 모음이 표시됩니다 :
예
<nav class="navbar navbar-inverse">
<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="#">WebSiteName</a>
</div>
<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>
</div>
</nav> »그것을 자신을 시도