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

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
======Bootstrap Button Groups======
<WRAP left notice 80%>
  * description : Bootstrap Button Groups
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-03-25
</WRAP>
<WRAP clear></WRAP>
\\
=====Button Groups=====
Bootstrap은 다양한 스타일의 버튼을 제공합니다.\\
{{:wiki:bootstrap:bootstrap_note:button-groups.png?150|}}\\
출처: [[https://www.w3schools.com/bootstrap/bootstrap_button_groups.asp|W3Schools.com - Bootstrap Button Groups]]\\
\\
''%%.btn-group%%'' 클래스와 ''%%<div>%%'' 요소를 함께 사용하여 버튼 그룹을 만듭니다.\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Button Group</h2>
        <p>The .btn-group class creates a button group:</p>
        <div class="btn-group">
            <button type="button" class="btn btn-primary">Apple</button>
            <button type="button" class="btn btn-primary">Samsung</button>
            <button type="button" class="btn btn-primary">Sony</button>
        </div>
    </div>

</body>
</HTML>
\\
**Tip:**\\
그룹의 모든 버튼에 버튼 크기를 적용하는 대신에, ''%%.btn-group-lg | sm | xs%%''를 사용하여 그룹의 모든 버튼 크기를 조정합니다:\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Button Groups - Set Sizes</h2>
        <p>Add class .btn-group-* to size all buttons in a button group.</p>
        <h3>Large Buttons:</h3>
        <div class="btn-group btn-group-lg">
            <button type="button" class="btn btn-primary">Apple</button>
            <button type="button" class="btn btn-primary">Samsung</button>
            <button type="button" class="btn btn-primary">Sony</button>
        </div>
        <h3>Default Buttons:</h3>
        <div class="btn-group">
            <button type="button" class="btn btn-primary">Apple</button>
            <button type="button" class="btn btn-primary">Samsung</button>
            <button type="button" class="btn btn-primary">Sony</button>
        </div>
        <h3>Small Buttons:</h3>
        <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-primary">Apple</button>
            <button type="button" class="btn btn-primary">Samsung</button>
            <button type="button" class="btn btn-primary">Sony</button>
        </div>
        <h3>Extra Small Buttons:</h3>
        <div class="btn-group btn-group-xs">
            <button type="button" class="btn btn-primary">Apple</button>
            <button type="button" class="btn btn-primary">Samsung</button>
            <button type="button" class="btn btn-primary">Sony</button>
        </div>
    </div>

</body>
</HTML>
\\
=====Vertical Button Groups=====
Bootstrap은 수직 버튼 그룹도 지원합니다:\\
{{:wiki:bootstrap:bootstrap_note:vertical-button-groups.png|}}\\
출처: [[https://www.w3schools.com/bootstrap/bootstrap_button_groups.asp|W3Schools.com - Bootstrap Button Groups]]\\
''%%.btn-group-vertical%%'' 클래스를 사용하여 수직 버튼 그룹을 만듭니다.\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Vertical Button Group</h2>
        <p>Use the .btn-group-vertical class to create a vertical button group:</p>
        <div class="btn-group-vertical">
            <button type="button" class="btn btn-primary">Apple</button>
            <button type="button" class="btn btn-primary">Samsung</button>
            <button type="button" class="btn btn-primary">Sony</button>
        </div>
    </div>

</body>
</HTML>
\\
=====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

사용자 도구

사이트 도구

문서 도구
