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


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

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

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

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

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

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

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

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

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

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

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