버튼 그룹은 또한 독립적 인 구성 요소입니다. 버튼 그룹은 드롭 다운 메뉴 구성 요소와 동일하며 Button.js 플러그인에 의존해야합니다.
<div> 그룹을 하나의 <div>에 결합하여보다 복잡한 구성 요소를 만듭니다.
<div role = "툴바"> <div> <버튼 유형 = "버튼"> 1 </button> <버튼 유형 = "button"> 2 </button> <버튼 타입 = "버튼"> 3 </button> <button button "> 4 </button> <버튼 유형 ="button "> 5 </button> <div> <버튼> <버튼"> 타입 = "버튼"> 7 </button> <버튼 유형 = "버튼"> 8 </button> </div> <div> <버튼 타입 = "버튼"> 9 </div> </div>
버튼 드롭 다운 메뉴는 드롭 다운 메뉴처럼 보입니다. 그들 사이의 유일한 차이점은 외부 컨테이너 div.dropdown이 div.btn-group으로 대체된다는 것입니다.
<div> <버튼 데이터-토글 = "드롭 다운"> 버튼 드롭 다운 메뉴 <span> </span> </button> <ul> <li> <#"> 메뉴 목록 1 </a> </li> <li> <a href ="#"> 메뉴 목록 2 </a> </li> <li> <a href ="#"</li> </li>>>>>>>>>>> <li>> <li>> 메뉴 목록. href = "#"> 메뉴 목록 4 </a> </li> <li> <a href = "#"> 메뉴 목록 5 </a> </li> </ul> </div>
bootstrap.css 파일
.btn-group .Dropdown-toggle : active, .btn-group.open .dropdown-toggle {개요 : 0;}. btn-group> .btn + .dropdown-toggle {padding-right : 8px; 왼쪽 패딩 : 8px;}. Padding-Left : 12px;}. Btn-Group.open .Dropdown-Toggle {-webkit-box-shadow : inset 0 3px 5px rgba (0, 0, 0, .125); Box-Shadow : inset 0 3px 5px rgba (0, 0, 0, .125);}. btn-group.open .dropdown-toggle.btn-link {-webkit-box-shadow : none; Box-Shadow : 없음;}버튼의 아래쪽 위쪽 삼각형
버튼의 아래쪽 삼각형은 버튼 태그에 스팬 태그 요소를 추가하고 클래스 이름은 .caret입니다.
<버튼 데이터-토글 = "드롭 다운"> 버튼 드롭 다운 메뉴 <Span> </span> </button>
이 삼각형 형태는 CSS를 통해 구현됩니다. 다음은 bootstrap.css의 소스 코드입니다.
.caret {디스플레이 : 인라인-블록; 너비 : 0; 높이 : 0; 마진 왼쪽 : 2px; 수직 정상 : 중간; 테두리 : 4px 고체; 경계 오른쪽 : 4px 고체 투명; 왼쪽 경계 : 4px 고체 투명;}위의 내용은이 기사에 관한 모든 것입니다. 모든 사람의 학습에 도움이되기를 바랍니다.