차이

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

--- wiki:bootstrap:bootstrap_note:bs_tabs_pills [2021/03/29 11:10]
emblim98
+++ wiki:bootstrap:bootstrap_note:bs_tabs_pills [2023/01/13 18:44] (현재)
@@ 줄 188: / 줄 188: @@
 \\
 =====Centered Tabs and Pills=====
+{{:wiki:bootstrap:bootstrap_note:centeredtabs.png?600|}}\\
 tabs와 pills을 중앙/정렬하려면 ''%%.nav-justified%%'' 클래스를 사용하십시오.\\
 \\
@@ 줄 193: / 줄 194: @@
 ====예제====
 <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|}}\\

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

사용자 도구

사이트 도구

차이

문서 도구