Bootstrap Navigation Bar

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


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 챕터에서 배울 것입니다.

.navbar-text 클래스를 사용하여, 링크가 아닌 navbar 내부의 모든 요소를 수직 정렬합니다.
(적절한 패딩 및 텍스트 색상 보장).

네비게이션 바는 페이지 상단이나 하단에 고정할 수도 있습니다.

고정 네베게이션 바는 페이지 스크롤과 관계없이 고정된 위치 (상단 또는 하단)에 계속 표시됩니다.


.navbar-fixed-top 클래스는 상단에 네비게이션 바가 고정되게 합니다.

.navbar-fixed-bottom 클래스는 네비게이션 바를 하단에 고정되게 합니다.

네비게이션 바는 작은 화면에서 때로는 너무 많은 공간을 차지합니다.

네비게이션 바를 숨기고, 필요할 경우에만 보이게 합니다.

하기 예제에서, 네비게이션 바는 상단 우측 모서리의 버튼으로 대체됩니다.
버튼을 클릭할 때에만, 네비게이션 바가 표시됣니다.