대부분의 웹 페이지에는 일종의 메뉴가 있습니다.

HTML에서, 메뉴는 종종 아래와 같이 정렬되지 않은 목록 <ul>(그리고 나중에 스타일이 지정됨)에서 정의됩니다.

• Home
• Menu 1
• Menu 2
• Menu 3


상기 목록의 가로 메뉴를 만들고 싶은 경우, <ul>에 .list-inline 클래스를 추가하세요.

또는 Bootstraps의 Tabs 및 Pills을 사용하여 위의 메뉴를 표시할 수 있습니다 (아래 참조).

Note:
Tabs와 Pill을 토글/동적(toggleable/dynamic)으로 만드는 방법을 알아 보려면 이 페이지의 마지막 예를 참조하십시오.

탭은 <ul class = "nav nav-tabs">으로 생성됩니다.

Tips: 또한 <li class = "active">으로 현재 페이지를 표시하십시오.

다음 예제는 네비게이션 탭(Navigation Tabs)을 만듭니다.

Pills는 <ul class = "nav nav-pills">으로 생성됩니다. 또한 현재 페이지를 <li class = "active">로 표시합니다.

Pills를 세로로 표시할 수도 있습니다. .nav-stacked 클래스만 추가하면 됩니다.

하기 예제에서는 마지막 컬럼 안에 세로 pill 메뉴를 배치합니다. 따라서 큰 화면에서는 메뉴가 오른쪽에 표시됩니다.
그러나 작은 화면에서는 콘텐츠가 자동으로 단일 컬럼 레이아웃으로 조정됩니다.

Pills는 드롭다운 메뉴를 포함 할 수도 있습니다.

다음 예제는 “메뉴 1”에 드롭다운 메뉴를 추가합니다.

tabs와 pills을 중앙/정렬하려면 .nav-justified 클래스를 사용하십시오.

768px보다 작은 화면에서는, 목록 항목이 누적됩니다 (콘텐츠는 중앙에 유지됨).