[Navbars]
.navbar (네비게이션 바 생성)
.navbar-brand (네비게이션 바 안의 로고나 헤더 표시)
.navbar-btn (네비게이션 바 안의 버튼 수직 정렬)
.navbar-collapse (작은 기기에서 네비게이션 바 감추기)
.navbar-default (기본 네비게이션 바 생성) - 옅은 회색 메뉴바
.navbar-fixed-bottom (화면 하단에 네비게이션 바 고정)
.navbar-fixed-top (화면 상단에 네비게이션 바 고정)
.navbar-form (네비게이션 바 안에서 폼 요소 수직 정렬)
.navbar-header (네비게이션 바 안의 로고나 헤더 감싸는 요소)
.navbar-inverse (검은색 네비게이션 바 생성)
.navbar-left (네비게이션 바 안의 링크, 폼, 버튼, 텍스트를 왼쪽에 정렬)
.navbar-link (네비게이션 바 안의 요소를 링크처럼 보이게 하기)
.navbar-nav (네비게이션 바 안의 링크 메뉴 항목을 감싸는 <ul> 태그에 사용)</ul>
.navbar-right (네비게이션 바 안의 링크, 폼, 버튼, 텍스트를 오른쪽에 정렬)
.navbar-static-top (네비게이션 바의 좌측, 상단, 우측 경계선을 제거)
.navbar-text (네비게이션 바 안의 링크 아닌 요소의 수직 정렬)
.navbar-toggle (작은 화면에서 네비게이션 바 여는 토글 버튼 스타일)
.icon-bar (네비게이션 바 안의 햄버거 버튼 만드는 가로 막대)
navbar 연회색바
<nav class="navbar navbar-default ">
<div class="container-fluid">
<div class="navbar-header ">
<a class="navbar-brand " href="#">홈짱닷컴</a>
</div>
<ul class="nav navbar-nav ">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JS</a></li>
</ul>
</div>
</nav>
예제보기
navbar 검은색바
<nav class="navbar navbar-inverse ">
<div class="container-fluid">
<div class="navbar-header ">
<a class="navbar-brand " href="#">홈짱닷컴</a>
</div>
<ul class="nav navbar-nav ">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JS</a></li>
</ul>
</div>
</nav>
예제보기
Navbar + Dropdown (드롭다운)
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">홈짱닷컴</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 Align (우측정렬)
<nav class="navbar navbar-inverse ">
<div class="container-fluid">
<div class="navbar-header ">
<a class="navbar-brand" href="#">홈짱닷컴</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>
</ul>
<ul class="nav navbar-nav navbar-right ">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> 회원가입</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 로그인</a></li>
</ul>
</div>
</nav>
Navbar + Button (버튼)
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">홈짱닷컴</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<button class="btn btn-danger navbar-btn ">Button</button>
</div>
</nav>
Navbar + Form (폼양식) : 검색창
글자 검색버튼
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">홈짱닷컴</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>
</ul>
<form class="navbar-form navbar-left" action="/action_page.php">
<div class="form-group ">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</nav>
아이콘 검색버튼
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">홈짱닷컴</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>
</ul>
<form class="navbar-form navbar-left" action="/action_page.php">
<div class="input-group ">
<input type="text" class="form-control" placeholder="Search " name="search ">
<div class="input-group-btn ">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
</div>
</nav>
Navbar + Text (글자)
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
</ul>
<p class="navbar-text ">홈짱닷컴</p>
</nav>
Navbar Fix (상단고정바 + 하단고정바)
상단고정
<nav class="navbar navbar-inverse navbar-fixed-top ">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">홈짱닷컴</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>
하단고정
<nav class="navbar navbar-inverse navbar-fixed-bottom ">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">홈짱닷컴</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 Collapse (메뉴접기 = 모바일메뉴)
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=" #hz " >
<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=" hz ">
<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> 회원가입</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 로그인</a></li>
</ul>
</div>
</div>
</nav>
예제보기
