======Bootstrap Button Groups====== * description : Bootstrap Button Groups * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-25 \\ =====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%%'' 클래스와 ''%%
%%'' 요소를 함께 사용하여 버튼 그룹을 만듭니다.\\ ====예제====

Button Group

The .btn-group class creates a button group:

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

Button Groups - Set Sizes

Add class .btn-group-* to size all buttons in a button group.

Large Buttons:

Default Buttons:

Small Buttons:

Extra Small Buttons:

\\ =====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%%'' 클래스를 사용하여 수직 버튼 그룹을 만듭니다.\\ ====예제====

Vertical Button Group

Use the .btn-group-vertical class to create a vertical button group:

\\ =====Justified Button Groups===== 화면의 전체 너비를 확장하려면 ''%%.btn-group-justified%%'' 클래스를 사용하십시오:\\ {{:wiki:bootstrap:bootstrap_note:justified-button-groups.png?600|}}\\ 하기 예제는 ''%%%%'' 요소에 사용하는 것입니다.\\ ====예제====

Justified Button Groups

To span the entire width of the screen, use the .btn-group-justified class:

Apple Samsung sony
\\ **Note:**''%%
\\ =====Nesting Button Groups & Fropdown Menus===== {{:wiki:bootstrap:bootstrap_note:nesting-button-group.png?300|}}\\ 드롭 다운(dropdown) 메뉴를 만들기 위해 버튼 그룹을 중첩시킵니다.\\ ====예제====

Nesting Button Groups

Nest button groups to create drop down menus:

Nesting Button Groups

Nest button groups to create drop down menus:

\\ =====Split Button Dropdowns===== {{:wiki:bootstrap:bootstrap_note:split-buttons-dropdown.png?200|}}\\ ====에제====

Split Buttons

{{tag>오션 Bootstrap Button Groups}}