목차
Bootstrap Tabs and Pills
- description : Bootstrap Tabs and Pills
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-03-29
Menus
대부분의 웹 페이지에는 일종의 메뉴가 있습니다.
HTML에서, 메뉴는 종종 아래와 같이 정렬되지 않은 목록 <ul>(그리고 나중에 스타일이 지정됨)에서 정의됩니다.
예제
또는 Bootstraps의 Tabs 및 Pills을 사용하여 위의 메뉴를 표시할 수 있습니다 (아래 참조).
Note:
Tabs와 Pill을 토글/동적(toggleable/dynamic)으로 만드는 방법을 알아 보려면 이 페이지의 마지막 예를 참조하십시오.
Tabs
탭은 <ul class = "nav nav-tabs">으로 생성됩니다.
Tips: 또한 <li class = "active">으로 현재 페이지를 표시하십시오.
다음 예제는 네비게이션 탭(Navigation Tabs)을 만듭니다.
예제
Tabs
Tabs With Dropdown Menu
Result
Pills
Pills는 <ul class = "nav nav-pills">으로 생성됩니다. 또한 현재 페이지를 <li class = "active">로 표시합니다.
예제
Pills
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”에 드롭다운 메뉴를 추가합니다.
예제
Pills With Dropdown Menu
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
