차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- 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=====
+{{:wiki:bootstrap:bootstrap_note:verticalpill.png?600|}}\\
 하기 예제에서는 마지막 컬럼 안에 세로 pill 메뉴를 배치합니다. 따라서 큰 화면에서는 메뉴가 오른쪽에 표시됩니다.\\
 그러나 작은 화면에서는 콘텐츠가 자동으로 단일 컬럼 레이아웃으로 조정됩니다.\\
 ====예제====
 <HTML>
+<body>
+    <div class="container">
+        <h3>Vertival Pills</h3>
+        <div class="row">
+            <div class="col-md-3">
+                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quae itaque, repellendus ducimus excepturi molestias laudantium.</p>
+            </div>
+            <div class="col-md-3">
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit nemo doloribus dolor? Laborum?</p>
+            </div>
+            <div class="col-md-3">
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, tempore labore.</p>
+            </div>
+            <div class="col-md-3">
+                <ul class="nav nav-pills nav-stacked">
+                    <li class="active"><a href="#">Nome</a></li>
+                    <li><a href="#">Menu 1</a></li>
+                    <li><a href="#">Menu 2</a></li>
+                    <li><a href="#">Menu 3</a></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</body>
 </HTML>
+\\
+=====Pills With Dropdown Menu=====
+{{:wiki:bootstrap:bootstrap_note:pillswithdropdownmenu.png?600|}}\\
+Pills는 드롭다운 메뉴를 포함 할 수도 있습니다.\\
+\\
+다음 예제는 "메뉴 1"에 드롭다운 메뉴를 추가합니다.\\
+====예제====
+<HTML>
+<body>
+    <div class="container">
+        <h3>Pills With Dropdown Menu</h3>
+        <ul class="nav nav-pills nav-stacked">
+            <li class="active"><a href="#">Home</a></li>
+            <li class="dropdown">
+                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1<span class="caret"></span></a>
+                <ul class="dropdown-menu">
+                    <li><a href="#">Submenu 1-1</a></li>
+                    <li><a href="#">Submenu 1-2</a></li>
+                    <li><a href="#">Submenu 1-3</a></li>
+                </ul>
+            </li>
+            <li><a href="#">Menu 2</a></li>
+            <li><a href="#">Menu 3</a></li>
+        </ul>
+    </div>
+</body>
+</HTML>
+\\
+=====Centered Tabs and Pills=====
+{{:wiki:bootstrap:bootstrap_note:centeredtabs.png?600|}}\\
+tabs와 pills을 중앙/정렬하려면 ''%%.nav-justified%%'' 클래스를 사용하십시오.\\
+\\
+px보다 작은 화면에서는, 목록 항목이 누적됩니다 (콘텐츠는 중앙에 유지됨).\\
+====예제====
+<HTML>
+<body>
+    <div class="container">
+        <h3>Centered Tabs</h3>
+        <p>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).</p>
+        <ul class="nav nav-tabs nav-justified">
+            <li class="active"><a href="#">Home</a></li>
+            <li><a href="#">Menu 1</a></li>
+            <li><a href="#">Menu 2</a></li>
+            <li><a href="#">Menu 3</a></li>
+        </ul>
+        <br>
+        <h3>Centered Pills</h3>
+        <ul class="nav nav-pills nav-justified">
+            <li class="active"><a href="#">Home</a></li>
+            <li><a href="#">Menu 1</a></li>
+            <li><a href="#">Menu 2</a></li>
+            <li><a href="#">Menu 3</a></li>
+        </ul>
+    </div>
+</body>
+</HTML>
+\\
+=====Toggleable / Dynamic Tabs=====
+{{:wiki:bootstrap:bootstrap_note:dynamictabs.png?600|}}\\
+탭을 토글 가능하게 하려면, 각 링크에 ''%%data-toggle = "tab"%%'' 속성을 추가하십시오.\\
+그런 다음 모든 탭에 대해서 고유 ID가 있는 ''%%.tab-pane%%'' 클래스를 추가하고\\
+''%%.tab-content%%'' 클래스를 사용하여 <div> 요소 내부에서 tabs을 감쌉니다.\\
+\\
+tabs를 클릭할 때 tabs이 페이드 인(fade in) 및 페이드 아웃(fade out) 되도록 하려면,\\
+''%%.tab-pane%%''에 ''%%.fade%%'' 클래스를 추가하십시오.\\
+====예제====
+<HTML>
+<body>
+    <div class="container">
+        <h2>Dynamic Tabs</h2>
+        <p>
+            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.
+        </p>
+        <ul class="nav nav-tabs">
+            <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
+            <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
+            <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
+            <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
+        </ul>
+        <div class="tab-content">
+            <div id="home" class="tab-pane fade in active">
+                <h3>HOME</h3>
+                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum, rem.</p>
+            </div>
+            <div id="menu1" class="tab-pane fade">
+                <h3>Menu 1</h3>
+                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempore, unde.</p>
+            </div>
+            <div id="menu2" class="tab-pane fade">
+                <h3>Menu 2</h3>
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, explicabo.</p>
+            </div>
+            <div id="menu3" class="tab-pane fade">
+                <h3>Menu 3</h3>
+                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. At, enim.</p>
+            </div>
+        </div>
+    </div>
+</body>
+</HTML>
+\\
+=====Toggleable / Dynamic Pills=====
+pills에도 동일한 코드가 적용됩니다. data-toggle 속성만 ''%%data-toggle = "pill"%%''로 변경하십시오.\\
+====예제====
+<HTML>
+<body>
+    <div class="container">
+        <h2>Dynamic Pills</h2>
+        <p>
+            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.
+        </p>
+        <ul class="nav nav-pills">
+            <li class="active"><a data-toggle="pill" href="#home">Home</a></li>
+            <li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
+            <li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
+            <li><a data-toggle="pill" href="#menu3">Menu 3</a></li>
+        </ul>
+        <div class="tab-content">
+            <div id="home" class="tab-pane fade in active">
+                <h3>HOME</h3>
+                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum, rem.</p>
+            </div>
+            <div id="menu1" class="tab-pane fade">
+                <h3>Menu 1</h3>
+                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempore, unde.</p>
+            </div>
+            <div id="menu2" class="tab-pane fade">
+                <h3>Menu 2</h3>
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, explicabo.</p>
+            </div>
+            <div id="menu3" class="tab-pane fade">
+                <h3>Menu 3</h3>
+                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. At, enim.</p>
+            </div>
+        </div>
+    </div>
+</body>
+</HTML>
+===Result===
+{{:wiki:bootstrap:bootstrap_note:dynamicpill.png?600|}}\\
 {{tag>오션 Bootstrap Tabs and Pills}}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

차이

문서 도구