11. 네비게이션
부트스트랩은 nav 클래스를 활용하여 네이게이션도 간단하게 표현이 가능합니다. 순수 html만 작상하면 아래처럼 출력됩니다.
감싸고 있는 ul에 nav nav-tabs 클래스를 지정합니다.
수직으로 정열된 li 링크들이 수평으로 재정렬됩니다.
활성화 하고싶은 링크에 active 클래스를 지정합니다.
지정된 링크가 활성화 되었습니다.
nav-pills 클래스를 활용하면 채움형식의 탭으로 출력됩니다.
네비게이션 탭에 드롭다운리스트를 적용하는 것도 가능합니다. 드롭다운 소스는 바로 전 스터디의 소스를 활용하면 됩니다.
nav-stacked 클래스를 활용하면 세로로 메뉴를 정렬할 수 있습니다.
'Bootstrap' 카테고리의 다른 글
| 부트스트랩에서 제공하는 기본 CSS(10) - 프로그레스 바 (Progress Bar) (0) | 2013.07.26 |
|---|---|
| 부트스트랩에서 제공하는 기본 CSS(9) - 네비게이션2 (0) | 2013.07.25 |
| 부트스트랩에서 제공하는 기본 CSS(7) - 드롭다운 (0) | 2013.07.23 |
| 부트스트랩에서 제공하는 기본 CSS(6) - 버튼 그룹 (0) | 2013.07.22 |
| 부트스트랩에서 제공하는 기본 CSS(5) - 수평형 폼 (0) | 2013.07.21 |
