wiki:bootstrap:bootstrap_note:bs_tabs_pills

차이

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

차이 보기로 링크

--- wiki:bootstrap:bootstrap_note:bs_tabs_pills [2021/03/29 12:04]
emblim98
+++ wiki:bootstrap:bootstrap_note:bs_tabs_pills [2023/01/13 18:44] (현재)
@@ 줄 265: / 줄 265: @@
 ====예제====
 <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|}}\\

/var/services/web/dokuwiki/data/attic/wiki/bootstrap/bootstrap_note/bs_tabs_pills.1616987078.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)