목차

Bootstrap Tabs and Pills

  • description : Bootstrap Tabs and Pills
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-03-29


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

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

예제


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

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

Tabs


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

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

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

예제

\\ =====Tabs With Dropdown Menu===== Tabs는 드롭다운 메뉴를 포함할 수도 있습니다.\\ \\ 다음 예제는 "메뉴 1"에 드롭다운 메뉴를 추가합니다.\\ ====예제====

Result


Pills


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

예제


Vertical Pills


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

예제

Vertical Pills

Use the .nav-stacked class to vertically stack pills:


Vertical Pills in a Row


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

예제

Vertival Pills

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quae itaque, repellendus ducimus excepturi molestias laudantium.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit nemo doloribus dolor? Laborum?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, tempore labore.


Pills With Dropdown Menu


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

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

예제


Centered Tabs and Pills


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

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

예제

Centered Tabs

To center/justify the tabs and pills, use the .nav-justified class. Note that on screens that are smaller than 768px, the list items are stacked (content will remain centered).


Centered Pills


Toggleable / Dynamic Tabs


탭을 토글 가능하게 하려면, 각 링크에 data-toggle = "tab" 속성을 추가하십시오.
그런 다음 모든 탭에 대해서 고유 ID가 있는 .tab-pane 클래스를 추가하고
.tab-content 클래스를 사용하여

요소 내부에서 tabs을 감쌉니다.

tabs를 클릭할 때 tabs이 페이드 인(fade in) 및 페이드 아웃(fade out) 되도록 하려면,
.tab-pane.fade 클래스를 추가하십시오.

예제

Dynamic Tabs

To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.

HOME

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum, rem.


Toggleable / Dynamic Pills

pills에도 동일한 코드가 적용됩니다. data-toggle 속성만 data-toggle = "pill"로 변경하십시오.

예제

Dynamic Pills

To make the tabs toggleable, add the data-toggle="pill" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.

HOME

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum, rem.

Result