wiki:bootstrap:bootstrap_note:bs_tabs_pills
차이
문서의 선택한 두 판 사이의 차이를 보여줍니다.
| 다음 판 | 이전 판 | ||
|
wiki:bootstrap:bootstrap_note:bs_tabs_pills [2021/03/29 09:17] emblim98 만듦 |
wiki:bootstrap:bootstrap_note:bs_tabs_pills [2023/01/13 18:44] (현재) |
||
|---|---|---|---|
| 줄 129: | 줄 129: | ||
| \\ | \\ | ||
| =====Vertical Pills in a Row===== | =====Vertical Pills in a Row===== | ||
| + | {{: | ||
| 하기 예제에서는 마지막 컬럼 안에 세로 pill 메뉴를 배치합니다. 따라서 큰 화면에서는 메뉴가 오른쪽에 표시됩니다.\\ | 하기 예제에서는 마지막 컬럼 안에 세로 pill 메뉴를 배치합니다. 따라서 큰 화면에서는 메뉴가 오른쪽에 표시됩니다.\\ | ||
| 그러나 작은 화면에서는 콘텐츠가 자동으로 단일 컬럼 레이아웃으로 조정됩니다.\\ | 그러나 작은 화면에서는 콘텐츠가 자동으로 단일 컬럼 레이아웃으로 조정됩니다.\\ | ||
| ====예제==== | ====예제==== | ||
| < | < | ||
| + | < | ||
| + | <div class=" | ||
| + | < | ||
| + | <div class=" | ||
| + | <div class=" | ||
| + | < | ||
| + | </ | ||
| + | <div class=" | ||
| + | < | ||
| + | </ | ||
| + | <div class=" | ||
| + | < | ||
| + | </ | ||
| + | <div class=" | ||
| + | <ul class=" | ||
| + | <li class=" | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| </ | </ | ||
| + | \\ | ||
| + | =====Pills With Dropdown Menu===== | ||
| + | {{: | ||
| + | Pills는 드롭다운 메뉴를 포함 할 수도 있습니다.\\ | ||
| + | \\ | ||
| + | 다음 예제는 " | ||
| + | ====예제==== | ||
| + | < | ||
| + | < | ||
| + | <div class=" | ||
| + | < | ||
| + | <ul class=" | ||
| + | <li class=" | ||
| + | <li class=" | ||
| + | <a class=" | ||
| + | <ul class=" | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ul> | ||
| + | </li> | ||
| + | < | ||
| + | < | ||
| + | </ul> | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | \\ | ||
| + | =====Centered Tabs and Pills===== | ||
| + | {{: | ||
| + | tabs와 pills을 중앙/ | ||
| + | \\ | ||
| + | 768px보다 작은 화면에서는, | ||
| + | ====예제==== | ||
| + | < | ||
| + | < | ||
| + | <div class=" | ||
| + | < | ||
| + | <p>To center/ | ||
| + | <ul class=" | ||
| + | <li class=" | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ul> | ||
| + | <br> | ||
| + | < | ||
| + | <ul class=" | ||
| + | <li class=" | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ul> | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | \\ | ||
| + | =====Toggleable / Dynamic Tabs===== | ||
| + | {{: | ||
| + | 탭을 토글 가능하게 하려면, 각 링크에 '' | ||
| + | 그런 다음 모든 탭에 대해서 고유 ID가 있는 '' | ||
| + | '' | ||
| + | \\ | ||
| + | tabs를 클릭할 때 tabs이 페이드 인(fade in) 및 페이드 아웃(fade out) 되도록 하려면, | ||
| + | '' | ||
| + | ====예제==== | ||
| + | < | ||
| + | < | ||
| + | <div class=" | ||
| + | < | ||
| + | <p> | ||
| + | To make the tabs toggleable, add the data-toggle=" | ||
| + | .tab-content. | ||
| + | </p> | ||
| + | <ul class=" | ||
| + | <li class=" | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ul> | ||
| + | <div class=" | ||
| + | <div id=" | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | <div id=" | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | <div id=" | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | <div id=" | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | \\ | ||
| + | =====Toggleable / Dynamic Pills===== | ||
| + | pills에도 동일한 코드가 적용됩니다. data-toggle 속성만 '' | ||
| + | ====예제==== | ||
| + | < | ||
| + | < | ||
| + | <div class=" | ||
| + | < | ||
| + | <p> | ||
| + | To make the tabs toggleable, add the data-toggle=" | ||
| + | .tab-content. | ||
| + | </p> | ||
| + | <ul class=" | ||
| + | <li class=" | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ul> | ||
| + | <div class=" | ||
| + | <div id=" | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | <div id=" | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | <div id=" | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | <div id=" | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | ===Result=== | ||
| + | {{: | ||
| + | |||
| + | |||
| {{tag> | {{tag> | ||
/volume1/web/dokuwiki/data/attic/wiki/bootstrap/bootstrap_note/bs_tabs_pills.1616977046.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)
별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
