네비게이션 바는 페이지의 상단에 배치된 네비게이션 헤더입니다.


Bootstrap을 사용하면, 화면 크기에 따라 네비게이션 바를 확장 또는 접을 수 있습니다.

표준 네비게이션 바는 <nav class = "navbar navbar-default">로 생성됩니다.

하기 예제는 페이지 상단에 네비게이션 바를 추가하는 방법을 보여줍니다.

Note:
이 페이지의 모든 예제는 작은 화면에서 너무 많은 공간을 차지하는 내비게이션 바를 표시합니다.
(그러나 내비게이션 바는 부트스트랩이 반응형이기 때문에, 큰 화면에서는 한 줄에 표시됩니다).
이 문제 (작은 화면 포함)는 본 페이지의 마지막 예제에서 해결됩니다.

기본 네비게이션 바 스타일이 마음에 들지 않으면, Bootstrap은 대안인 검정색 navbar를 제공합니다.

.navbar-default 클래스를 navbar-inverse로 변경하세요

네비게이션 바에는 드롭다운 메뉴도 포함될 수 있습니다.

하기 예제는 “페이지 1” 버튼에 대한 드롭다운 메뉴를 추가합니다.

.navbar-right 클래스는 네비게이션 바 버튼을 오른쪽 정렬하는 데 사용됩니다.

다음 예제에서는, 네비게이션 바 오른쪽에 “등록(Sign Up)” 버튼과 “로그인(Login)” 버튼을 삽입합니다.
또한 두 개의 새로운 버튼 각각에 글리피콘(glyphicon)을 추가합니다.

네비게이션 바 내부에 버튼을 추가하기 위해, .navbar-btn 클래스를 부트스트랩 버튼에 추가합니다.

navbar 내부에 양식 요소(form element)를 추가하려면,
.navbar-form 클래스를 양식 요소에 추가하고 입력(input)을 추가하십시오.
입력을 보유하는 div 컨테이너에 .form-group 클래스를 추가했습니다.
이렇게 하면 입력이 두 개 이상인 경우 적절한 패딩이 추가됩니다.

.input-group 및 .input-group-addon 클래스를 사용하여,
입력 필드 옆에 아이콘이나 도움말 텍스트를 첨부할 수도 있습니다.
이러한 클래스에 대한 자세한 내용은 Bootstrap Inputs 챕터에서 배울 것입니다.