차이

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

--- wiki:bootstrap:bootstrap_note:bs_tabs_pills [2021/03/29 11:27]
emblim98
+++ wiki:bootstrap:bootstrap_note:bs_tabs_pills [2023/01/13 18:44] (현재)
@@ 줄 217: / 줄 217: @@
 \\
 =====Toggleable / Dynamic Tabs=====
+{{:wiki:bootstrap:bootstrap_note:dynamictabs.png?600|}}\\
 탭을 토글 가능하게 하려면, 각 링크에 ''%%data-toggle = "tab"%%'' 속성을 추가하십시오.\\
 그런 다음 모든 탭에 대해서 고유 ID가 있는 ''%%.tab-pane%%'' 클래스를 추가하고\\
@@ 줄 225: / 줄 226: @@
 ====예제====
 <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|}}\\

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

사용자 도구

사이트 도구

차이

문서 도구