목차
Bootstrap Button Groups
- description : Bootstrap Button Groups
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-03-25
Button Groups
Bootstrap은 다양한 스타일의 버튼을 제공합니다.
출처: W3Schools.com - Bootstrap Button Groups
.btn-group 클래스와 <div> 요소를 함께 사용하여 버튼 그룹을 만듭니다.
예제
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은 수직 버튼 그룹도 지원합니다:
출처: 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 클래스를 사용하십시오:
하기 예제는 <a> 요소에 사용하는 것입니다.
예제
Justified Button Groups
To span the entire width of the screen, use the .btn-group-justified class:
Note:<button> 요소의 경우 .btn-group 클래스에서 각 버튼을 감싸야 합니다.
예제
Justified Button Groups
Nesting Button Groups & Fropdown Menus
드롭 다운(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
에제
Split Buttons
