부트스트랩 Bootstrap 3 구성요소 Navs

Navs 는 리스트들의 모음입니다. 어찌보면 네비게이션 메뉴를 뜻하기도 하지만 부트스트랩에서는 Navbar 라고 또 있으니 Navbar 가 네비게이션 메뉴를 뜻하고, Navs 는 목록의 집합으로 보는것이 더 맞는듯 합니다.

즉 Navs 는 그냥 네비게이션 메뉴(목록의 모음)이고 Navbar 는 bar 형태의 네비게이션 메뉴라고 보면 될 듯 합니다.

여기에는 여러가지 형태가 존재하며 기본적으로 .nav 클래스로 시작하며 이 클래스는 네비게이션 공통 클래스 입니다.

뒤에 추가적으로 붙는 클래스에 의해서 네이게이션의 형태가 지정이 되며 없으면 기본 형태로 됩니다.

위에서 말했듯 nav 클래스는 공통입니다. 여기에 .nav-tabs 라는 클래스를 추가해주면 탭 형태의 네비게이션 메뉴가 됩니다.

위에는 현재 메뉴가 보더 형태로 둥근 버튼형태로 되어 있습니다. pills 이라는것은 그 부분이 색칠이 칠해져있다는 것입니다.

즉 현재 위치한 곳의 스타일의 차이입니다. 단 색깔이 들어가 있다는 것이죠.

nav-tabs 라는 클래스 대신 .nav-pills 라는 클래스를 사용하면 됩니다.

가로 형태가 아닌 수직 형태로 사용하고자 한다면 수직을 뜻하는 .nav-stacked 클래스를 추가하면 됩니다.

버튼에서도 나왔는데요. 부모의 너비만큼 꽉 찬 형태로 탭의 크기를 정한 형태입니다.

이때는 nav-justified 클래스를 사용하면 됩니다. 그러면 너비를 100%로 잡아서 부모의 너비를 모두 사용합니다.

그리고 그 자식인 li 에는 display: table 로 설정이 되어 있어서 테이블처럼 한 영역씩 차지하게 됩니다.

tabs 형태와 pills 형태 모두 사용할 수 있습니다.

링크를 비활성시킬려면 .disabled 클래스를 사용하면 됩니다. 이것은 tabs, pills, list 모두 사용할 수 있습니다.

링크에는 전부 오버(hover) 스타일이 지정되어 있습니다.

.disabled 클래스를 사용하면 마우스를 사용할 수 없다는 표시로 아래처럼 표시가 되면 기본 스타일은 회색으로 비활성된 링크로 표기가 됩니다.

드롭다운을 사용하려면 자바스크립트 플러그인(dorpdown.js)이 있어야 합니다.

tabs 형태에서 드롭다운을 사용하려면 nav 에 nav-tabs 클래스를 사용하면 탭형태를 만들고, 드롭다운은 li 에 dropdown 클래스를 사용하면 됩니다.

꽉찬형태도 nav-tabs 클래스 대신 nav-pills 클래스를 사용하면 꽉찬 형태의 드롭다운을 사용 할 수 있습니다.

아시다시피 드롭다운은 자바스크립트 플러그인(dropdown.js)이 있어야 합니다.

demun(대문블로그)