======Bootstrap Tabs and Pills====== * description : Bootstrap Tabs and Pills * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-29 \\ =====Menus===== 대부분의 웹 페이지에는 일종의 메뉴가 있습니다.\\ \\ %%HTML%%에서, 메뉴는 종종 아래와 같이 정렬되지 않은 목록 ''%%

Home
Menu 1
Menu 2
Menu 3

Inline List

%%''으로 현재 페이지를 표시하십시오.\\ \\ 다음 예제는 네비게이션 탭(Navigation Tabs)을 만듭니다.\\ ====예제====
Tabs
- Home
- menu 1
- Menu 2
- Menu 3
\\ =====Tabs With Dropdown Menu===== Tabs는 드롭다운 메뉴를 포함할 수도 있습니다.\\ \\ 다음 예제는 "메뉴 1"에 드롭다운 메뉴를 추가합니다.\\ ====예제====
Tabs With Dropdown Menu
- Home
- Menu 1
- Menu 2
- Menu 3
===Result=== {{:wiki:bootstrap:bootstrap_note:tabs-with-dropdown-menu.png?600|}}\\ =====Pills===== {{:wiki:bootstrap:bootstrap_note:pills.png?600|}}\\ Pills는 ''%%
- %%''로 표시합니다.\\ ====예제====
  Pills
  - Home
  - Menu 1
  - Menu 2
  - Menu 3
  \\ =====Vertical Pills===== {{:wiki:bootstrap:bootstrap_note:verticalpills.png?600|}}\\ Pills를 세로로 표시할 수도 있습니다. ''%%.nav-stacked%%'' 클래스만 추가하면 됩니다.\\ ====예제====
  Vertical Pills
  
  Use the .nav-stacked class to vertically stack pills:
  - Home
  - Menu 1
  - Menu 2
  - Menu 3
  \\ =====Vertical Pills in a Row===== {{:wiki:bootstrap:bootstrap_note:verticalpill.png?600|}}\\ 하기 예제에서는 마지막 컬럼 안에 세로 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.
  Nome
  
  Menu 1
  
  Menu 2
  
  Menu 3
  \\ =====Pills With Dropdown Menu===== {{:wiki:bootstrap:bootstrap_note:pillswithdropdownmenu.png?600|}}\\ Pills는 드롭다운 메뉴를 포함 할 수도 있습니다.\\ \\ 다음 예제는 "메뉴 1"에 드롭다운 메뉴를 추가합니다.\\ ====예제====
  Pills With Dropdown Menu
  - Home
  - Menu 1
  - Menu 2
  - Menu 3
  \\ =====Centered Tabs and Pills===== {{:wiki:bootstrap:bootstrap_note:centeredtabs.png?600|}}\\ 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).
  - Home
  - Menu 1
  - Menu 2
  - Menu 3
  Centered Pills
  - Home
  - Menu 1
  - Menu 2
  - Menu 3
  \\ =====Toggleable / Dynamic Tabs===== {{:wiki:bootstrap:bootstrap_note:dynamictabs.png?600|}}\\ 탭을 토글 가능하게 하려면, 각 링크에 ''%%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
  - Menu 1
  - Menu 2
  - Menu 3
  HOME
  
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum, rem.
  
  Menu 1
  
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempore, unde.
  
  Menu 2
  
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, explicabo.
  
  Menu 3
  
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. At, enim.
  \\ =====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
  - Menu 1
  - Menu 2
  - Menu 3
  HOME
  
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum, rem.
  
  Menu 1
  
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempore, unde.
  
  Menu 2
  
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, explicabo.
  
  Menu 3
  
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. At, enim.
  ===Result=== {{:wiki:bootstrap:bootstrap_note:dynamicpill.png?600|}}\\ {{tag>오션 Bootstrap Tabs and Pills}}