차이

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

--- wiki:bootstrap:bootstrap_note:bs_button_groups [2021/03/25 14:08]
emblim98 만듦
+++ wiki:bootstrap:bootstrap_note:bs_button_groups [2023/01/13 18:44] (현재)
@@ 줄 92: / 줄 92: @@
 \\
 =====Justified Button Groups=====
+화면의 전체 너비를 확장하려면 ''%%.btn-group-justified%%'' 클래스를 사용하십시오:\\
+{{:wiki:bootstrap:bootstrap_note:justified-button-groups.png?600|}}\\
+하기 예제는 ''%%<a>%%'' 요소에 사용하는 것입니다.\\
+====예제====
+<HTML>
+<body>
+    <div class="container">
+        <h2>Justified Button Groups</h2>
+        <p>To span the entire width of the screen, use the .btn-group-justified class:</p>
+        <div class="btn-group btn-group-justified">
+            <a href="#" class="btn btn-primary">Apple</a>
+            <a href="#" class="btn btn-primary">Samsung</a>
+            <a href="#" class="btn btn-primary">sony</a>
+        </div>
+    </div>
+</body>
+</HTML>
+\\
+**Note:**''%%<button>%%'' 요소의 경우 ''%%.btn-group%%'' 클래스에서 각 버튼을 감싸야 합니다.\\
+====예제====
+<HTML>
+<body>
+    <div class="container">
+        <h2>Justified Button Groups</h2>
+        <div class="btn-group btn-group-justified">
+            <div class="btn-group">
+                <button type="button" class="btn btn-primary">Apple</button>
+            </div>
+            <div class="btn-group">
+                <button type="button" class="btn btn-primary">Samsung</button>
+            </div>
+            <div class="btn-group">
+                <button type="button" class="btn btn-primary">Sony</button>
+            </div>
+        </div>
+    </div>
+</body>
+</HTML>
+\\
+=====Nesting Button Groups & Fropdown Menus=====
+{{:wiki:bootstrap:bootstrap_note:nesting-button-group.png?300|}}\\
+드롭 다운(dropdown) 메뉴를 만들기 위해 버튼 그룹을 중첩시킵니다.\\
+====예제====
+<HTML>
+<body>
+    <div class="container">
+        <h2>Nesting Button Groups</h2>
+        <p>Nest button groups to create drop down menus:</p>
+        <div class="btn-group">
+            <button type="button" class="btn btn-primary">Apple</button>
+            <button type="button" class="btn btn-primary">Samsung</button>
+            <div class="btn-group">
+                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Sony <span class="caret"></span></button>
+                <ul class="dropdown-menu" role="menu">
+                    <li><a href-"#"></a>Tablet</li>
+                    <li><a href-"#"></a>Smartphone</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+    <div class="container">
+        <div class="btn-group">
+            <h2>Nesting Button Groups</h2>
+            <p>Nest button groups to create drop down menus:</p>
+            <div class="btn-group">
+                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Apple<span class="caret"></span></button>
+                <ul class="dropdown-menu" role="menu">
+                    <li><a href-"#"></a>IPad</li>
+                    <li><a href-"#"></a>IPad Pro</li>
+                </ul>
+            </div>
+            <div class="btn-group">
+                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Samsung<span class="caret"></span></button>
+                <ul class="dropdown-menu" role="menu">
+                    <li><a href-"#"></a>Galaxy S7</li>
+                    <li><a href-"#"></a>Galaxy Active</li>
+                    <li><a href-"#"></a>Galaxy S6 Lite</li>
+                </ul>
+            </div>
+            <div class="btn-group">
+                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">LG Electronics<span class="caret"></span></button>
+                <ul class="dropdown-menu" role="menu">
+                    <li><a href-"#"></a>LG G pad 5</li>
+                    <li><a href-"#"></a>PRADA Phone</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</body>
+</HTML>
+\\
+=====Split Button Dropdowns=====
+{{:wiki:bootstrap:bootstrap_note:split-buttons-dropdown.png?200|}}\\
+====에제====
+<HTML>
+<body>
+    <div class="container">
+        <h2>Split Buttons</h2>
+        <div class="btn-group">
+            <button type="button" class="btn btn-primary">Samsung</button>
+            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
+            <ul class="dropdown-menu" rold="menu">
+                <li><a href="#"></a>냉장고</li>
+                <li><a href="#"></a>세탁기</li>
+                <li><a href="#"></a>에어컨</li>
+            </ul>
+        </div>
+    </div>
+</body>
+</HTML>
 {{tag>오션 Bootstrap Button Groups}}

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

사용자 도구

사이트 도구

차이

문서 도구