기본 네비게이션 바는 여러 컴포넌트를 조합할 수 있으며, 두 가지 색상을 제공합니다.
<div class="navbar">
<a class="btn btn-gray btn-small"><i class="icon-search"></i> Mini button</a>
<a class="btn btn-gray btn-small"><i class="icon-search"></i> Mini button</a>
</div>
<div class="navbar navbar-black">
<div class="group">
<a class="btn btn-gray btn-small">Mini button</a>
<a class="btn btn-gray btn-small">Mini button</a>
</div>
</div>
<div class="navbar navbar-white-flat" style="overflow: hidden;">
<div class="inline-right">
<span>Text1</span> <span>Text2</span> <span>Text3</span>
</div>
</div>
<div class="navbar navbar-black-flat" style="overflow: hidden;">
<div class="inline-right">
<span style="inlineor: white;">Text1</span> <span style="inlineor: white;">Text2</span>
</div>
</div>인라인은 네비게이션 바의 컴포넌트를 그룹 형태로 묶는 기능을 제공합니다. 또한 컴포넌트를 우측에 정렬시킬 수 있습니다.
<div class="inline">
<div class="group">
<a class="btn btn-gray btn-small">Mini button</a>
<a class="btn btn-gray btn-small">Mini button</a>
<a class="btn btn-gray btn-small">Mini button</a>
</div>
</div>
<div class="inline">
<a class="btn btn-gray btn-small">Mini button</a>
</div>
<div class="inline-right">
<div class="group">
<input id="gtest_input" type="text" class="input input-small" />
<ul style="display: none">
<li><a id="g" href="#" value="1">MAIN</a></li>
<li><a href="#" value="2">Domain</a></li>
<li><a href="#" value="3">Domain2</a></li>
</ul>
<a class="btn btn-small btn-toggle"><i class="icon-arrow2"></i></a>
<a class="btn btn-small">Select...</a>
</div>
</div>인라인-로우는 네비게이션 바에서 행을 만들 수 있는 기능을 제공합니다. 해당 태그 안에서 인라인과의 조합도 가능합니다.
<div class="navbar navbar-black">
<div class="inline-row">
<a class="btn btn-gray btn-small">Mini button</a>
<a class="btn btn-gray btn-small">Mini button</a>
<a class="btn btn-gray btn-small">Mini button</a>
</div>
<div class="inline-row">
<a class="btn btn-gray btn-small">Mini button</a>
<a class="btn btn-gray btn-small">Mini button</a>
</div>
<div class="inline-row">
<div class="inline">
<a class="btn btn-gray btn-small">Mini button</a>
</div>
<div class="inline-right">
<a class="btn btn-gray btn-small">Mini button</a>
<a class="btn btn-gray btn-small">Mini button</a>
</div>
</div>
</div>네비게이션 바를 메뉴 형태로 사용할 수 있는 기능을 제공합니다.
<div class="navbar">
<ul class="nav">
<li><a href="#">Menu1</a></li>
<li class="active">Menu2</li>
<li><a href="#">Menu3</a></li>
</ul>
</div>
<div class="navbar navbar-black">
<ul class="nav-right">
<li><a href="#">Menu1</a></li>
<li class="active">Menu2</li>
<li><a href="#">Menu3</a></li>
</ul>
</div>네비게이션 바를 화면 상단에 고정시킬 수 있습니다.
<div class="navbar navbar-fixed-top">
<ul class="nav-right">
<li><a href="#">Menu1</a></li>
<li class="active">Menu2</li>
<li><a href="#">Menu3</a></li>
</ul>
</div>네비게이션 바를 화면 하단에 고정시킬 수 있습니다.
<div class="navbar navbar-fixed-bottom">
<ul class="nav-right">
<li><a href="#">Menu1</a></li>
<li class="active">Menu2</li>
<li><a href="#">Menu3</a></li>
</ul>
</div>