부트스트랩 Bootstrap 3 구성요소 Navbar
- 퍼블리셔/Bootstrap
- 2013. 9. 29. 01:00
bar 형태의 네비게이션 메뉴입니다.
여기서는 그냥 네비라고 말합니다. 부트스트랩에서 네비는 해더 역활을 하기도 하며 반응형으로 작동이 됩니다.
너비가 줄어들면 즉 폰 사이즈에 맞게되면 모든 네비의 메뉴가 감쳐지며 클릭을 하면 보여지는 형식으로 변경이 됩니다.
우측의 아이콘을 클릭하면 다시 하위메뉴가 펼쳐지는 형식이죠.
클릭을 했을때 하위 메뉴가 보이는것은 자바스크립트 플러그인(collapse.js) 가 있어야 합니다.
또 접근성을 위해 role="navigation" 도 사용되고 있음을 알아야합니다.
그럼 어느 너비까지 줄어들면 이런 형태로 가느냐?
그리드 시스템에 변수 @grid-float-breakpoint 라는것이 있습니다. 사용자정의(Customize)에 보시면 이것을 설정하는 곳이 있습니다.
기본 크기는 아래 이미지에 보시듯 폰 사이즈에 맞쳐져 있습니다.
이걸 변경하면 다른 사이즈에서 이런 형태를 볼 수 있습니다.
네비의 기본형태는 아래와 같은 형태이며 코드도 아래가 기본 코드 입니다.
밑에서 하나 하나 설명하도록 하겠습니다.
Buttons
네비안에 버튼을 말합니다.
<form> 으로 시작하며 .navbar-btn 클래스를 사용합니다.
Text
네비에서 테스트를 표시하는 경우입니다.
.navbar-text 클래스를 사용합니다. 이 클래스를 사용하면 왼쪽으로 정렬이 되어서 두개이상일 경우 왼쪽으로 차곡 차곡 쌓입니다.(float : left)
기본적으로 p 태그에 주로 사용하며 기본 색상을 따릅니다.
Non-nav links
비탐색 링크로 네비에 사용되는 링크로써 링크는 윈래 고유의 색상을 가지고 있습니다. 이것이 링크라는것을 알리기 위함이죠.
여기서는 .navbar-link 라는 클래스를 사용하고 이 클래스를 사용하면 네비에서의 일반 텍스트와 마찬가지인 색상을 가집니다.
즉 일반 테스트라고 알리기 위함이죠. 링크는 링크인데 표시하고 싶지 않은, 중요도가 낮은 링크일때 사용합니다.
네비에서 왼쪽으로 정렬하거나 오른쪽으로 정렬하는 것들을 말합니다. 또는 페이지 상단이나 하단에 네비가 위치하는 것등을 말합니다.
그리고 목록인 ul 등에 사용되는 클래스, 유틸리티를 이야기 합니다.
Fixed to top (맨위에 고정)
네비는 원래 맨위에 위치시킵니다. 하지만 스크롤을 아래로 하면 순차적으로 없어지는것이 일반적입니다.
이 경우는 스크롤을 해도 항상 맨위에 고정이 되어 있는 네비를 말합니다. 부트스트랩 홈페이지가 현재 그렇게 되어 있지요.
구경가기 => http://getbootstrap.com/components/#navbar-fixed-top
맨 위에 항상 네비를 고정하려면 .navbar-fixed-top 클래스를 추가하면 됩니다.
주의할 점
항상 위에 고정하는것은 네비에 스타일이 position: fixed 라고 지정이 되어 있기 때문입니다.
이는 그 만큼의 영역을 차지하지 않기 때문에 네비의 부모인 body 에 그 만큼의 여백을 만들어줘야 합니다.
만들지 않으면, 네비 다음에 오는 컨텐츠가 위로 붙어버립니다.
그래서 body 영역에 네비의 영역만큼 padding-top: 70px 정도를 줍니다.
이는 일반적인 경우구요. 여기서 70px 는 각각의 상황마다 다를수 있습니다. 그렇기 때문에 화면을 보고 적절한 패딩값을 줘야합니다.
Fixed to bottom (맨아래 고정)
맨위와 반대로 이번에는 맨 아래에 항상 고정하는 방법입니다.
.navbar-fixed-bottom 클래스를 사용하면 됩니다.
마찬가지로 주의점을 말하네요.
위와 반대입니다. 아래로 여백을 주면 됩니다.
Static top
움직이지 않는 상단에 고정된 네비입니다.
일반적으로 사용하는 네비라고 보시면 될 듯 합니다.
.navbar-static-top 라는 클래스를 사용하며, .navbar-fixed-* 클래스와는 달리 body 에 패딩값을 주지 않아도 됩니다.
Inverted navbar (반전 네비)
직역하니 이상하네요. 기본 스타일이 흰색인데 반전시켜서 검은색의 스타일로 보인다는 말입니다.
.navbar 에 .navbar-inverse 클래스만 사용하면 아래 형태의 네비를 사용할 수 있습니다.
