버튼 그룹은 드롭 다운 메뉴 구성 요소와 동일하며 Button.js 플러그인에 의존해야합니다.
구조적 측면 : 클래스 이름 BTN-Group이있는 컨테이너를 사용 하고이 컨테이너에 여러 개의 버튼을 놓습니다.
버튼 그룹도 독립적 인 구성 요소이므로 해당 소스 파일을 찾을 수 있습니다.
덜 : 버튼
Sass : _buttons.scss
CSS : bootstrap.css 라인 3131 ~ 3291
<div> <버튼 유형 = "버튼"> <pan> </span> </button>…
CSS :
.btn-group, .btn-group-verctical {위치 : 상대; 디스플레이 : 인라인-블록; 수직-정렬 : 중간;}. btn-group> .btn, .btn-group-vergical> .btn {positive; float;}. btn-group> .btn : hover, .btn-group-verctical> .btn : hover, .btn-group-vertical>. .BTN : 초점, .btn-group-verctical> .btn : 초점, .btn-group-verctical> .btn : active, .btn-group-vertical> .btn : active, .btn-group> .btn.active, .btn-group-ververical> .btn.active {z-endex : 2;}. btn-group> .btn-vertical>. {개요 : 없음;}.<버튼> 요소를 사용하는 것 외에도 <a> 태그와 같은 다른 태그 요소를 사용할 수도 있습니다. 보장해야 할 유일한 것은 어떤 태그를 사용하든 .btn-group 컨테이너의 태그 요소에 클래스 이름이 있어야한다는 것입니다.
버튼 그룹의 네 모서리는 모서리에 둥근 모서리가있는 첫 번째 및 마지막 버튼을 제외하고는 모두 둥근 모서리입니다. 다른 버튼에는 둥근 모서리가 없습니다.
상해:
1. 기본값 : 모든 버튼은 둥근 모서리입니다
2. 첫 번째 버튼과 마지막 버튼을 제외하고 다른 버튼이 반올림됩니다.
3. 마지막 버튼은 둥근 모서리와 오른쪽 하단 모서리만으로 남아 있습니다.
소스 코드 :
.btn-group> .btn : not (: first-Child) : not (: last-Child) : not (.Dropdown-toggle) {border-radius : 0;}. 0; Border-Bottom-Right-Radius : 0;}. btn-group> .btn : latt-Child : Not (: First-Child) ,. Btn-group> .Dropdown-toggle : not (: First-Child) {Border-Top-Left-Radius : 0; Border-Bottom-Left-Radius : 0; Btn-Group>. .BTN-GROUP : NOT (: First-Child) : NOT (: Last-Child)> .BTN {Border-Radius : 0;}. BTN-Group> .BTN-Group : First-Child> .Btn : Last-Child, .btn-Group> .btn-Group : First-Child> .Dropdown-Toggle {Border-Top-Right-Radius : 0; Border-Bottom-Right-radius : 0; .btn-group : last-Child> .BTN : 1 차 자녀 {Border-Top-Left-Radius : 0; Border-Bottom-Left-Radius : 0;}버튼 그룹 도구 모음
리치 텍스트 편집기에서 버튼 그룹을 복사, 자르기, 붙여 넣기, 왼쪽, 중앙, 오른쪽 및 두쪽 끝과 같은 버튼 그룹을 함께 배열하고 부트 스트랩 프레임 버튼 도구 모음 BTN-Toolbar를 사용하십시오.
<div> <div>… </div> <div>… </div> <div>… </div> <div>… </div> <div>… </div> </div>
원리 : 주로 컨테이너의 여러 그룹이 .btn-group 요소가 떠 다니고 그룹간에 5px 왼쪽 외부 거리를 유지하도록합니다.
.btn-toolbar {margin-left : -5px;}.btn-toolbar의 플로트를 지우십시오
.btn-toolbar : 전, .btn-toolbar : after {display : table; content : "";}. btn-toolbar : {clear : 둘 다;}.예:
<div> <div> <버튼 유형 = "버튼"> <span> </span> </button> <버튼 유형 = "버튼"> <스패> </span> </버튼> <버튼> </span> </button> <버튼 "> <스팬> </span> </div> <div> <button"> </div> </div> </div> </div> </div> </div> </div> </div> </div
버튼 중첩 그룹화
여러 번, 드롭 다운 메뉴의 버튼 그룹을 함께 배열하여 탐색 메뉴와 유사한 효과를 달성합니다.
그것을 사용할 때는 Dropdown 컨테이너의 클래스 이름을 BTN-Group으로 만들었고 일반 버튼과 동일한 레벨에 놓습니다.
<div> <버튼 유형 = "버튼"> 홈 </button> <버튼 유형 = "버튼"> 제품 디스플레이 </button> <버튼 유형 = "버튼"> 케이스 분석 </button> <버튼 유형 = "버튼"> 연락처 </button> <div> <버튼 데이터-토글 = "dropdown"> about <span> </span> <ul> <ul> <a href = "#"#"#"#"#"#"#"#" 프로파일 </a> </li> <li> <a href = "#"> 기업 문화 </a> </li> <li> <a href = "#"> 조직 구조 </a> </li> <li> <a href = "#"> 고객 서비스 </a> </li> </ul> </div> .btn-group>. .BTN-GROUP : NOT (: First-Child) : NOT (: Last-Child)> .BTN {Border-Radius : 0;}. BTN-Group> .BTN-Group : First-Child, .Btn-Group> .BTN-Group : First-Child> .Dropdown-Toggle {Border-Top-Right-Radius : 0; Border-Bottom-Right-Radius : 0}. .btn-group : last-Child> .btn : 1 차 자녀 {Border-Top-Left-Radius : 0; Border-Bottom-Left-Radius : 0;}. btn-group. dropdown-toggle : active, .btn-group.open .dropdown-toggle {oldline : 0;}. btn-group> .btn-group> .dropdown-toggle {padding-lett : 8p-lett : gright-left-leftgle a. 8px;}. rgba (0, 0, 0, .125);}. btn-group.open .dropdown-toggle.btn-link {-webkit-box-shadow : none; box-shadow : none;}버튼은 세로로 그룹화되었습니다
수평 그룹화 된 클래스 이름을 .btn-group-vertical으로 바꾸십시오.
<div> <버튼 유형 = "버튼"> 홈 </button> <버튼 유형 = "버튼"> 제품 디스플레이 </button> <버튼 유형 = "버튼"> 케이스 분석 </button> <버튼 유형 = "버튼"> 연락처 </button> <div> <버튼 데이터-토글 = "dropdown"> about <span> </span> <ul> <ul> <a href = "#"#"#"#"#"#"#"#" 프로파일 </a> </li> <li> <a href = "#"> 기업 문화 </a> </li> <li> <a href = "#"> 조직 구조 </a> </li> <li> <a href = "#"> 고객 서비스 </a> </li> </ul> </div> .btn-vertical> .Btn-group-vertical>. .btn-group, .btn-group-verctical> .btn-group, .btn-group-verctical> .btn-group-verctical> .btn-group-verctical> .btn {display : block; float : none; width : 100%; max width : 100%; .btn, .btn-group-verctical> .btn + .btn-group, .btn-group-verctical> .btn-group + .btn, .btn-group-verctical> .btn-group + .btn-group {margin-top : -1px; margin-let : 0;}. btn-group-verfical>. {Border-Top-Right-Radius : 4px; 국경-바닥-오른쪽 라디우스 : .btn {Border-Bottom-Left-Radius : 0;}. btn-group-vertical> .btn : last-Child : Not (: First-Child) {Border-top-left-radius : 0; Border-Top-Right-Radius : 0; Border-Bottom-Radius : 4p-radius; > .BTN-GROUP : NOT (: First-Child) : NOT (: Last-Child)> .BTN {Border-Radius : 0;}. BTN-Group-vercial> .btn-Group : Not (: Last-Child)> .btn : Last-Child, .btn-Group-vertical> .btn-group : First-Child : NOT (: Dropdog-toggle)>. {Border-Bottom-Right-Radius : 0; Border-Bottom-Left-Radius : 0;}. Btn-Group-verctical> .btn-group : Last-Child : Not (: First-Child)> .btn : First-Child {Border-Top-left-Radius : 0; Border-Top-Right-Radius : 0;}이퀄라이제이션 버튼을 적응 형 그룹화 버튼이라고도합니다.
전체 버튼 그룹의 너비는 컨테이너의 100%이며 버튼 그룹의 각 버튼은 전체 컨테이너의 너비를 나눕니다. 예를 들어, 버튼 그룹에는 5 개의 버튼이 있으며 각 버튼은 컨테이너 너비의 20%입니다. 버튼 그룹에는 4 개의 버튼이 있으며 각 버튼은 컨테이너 너비의 25%입니다.
구현 방법 : 클래스 이름을 추가합니다.
<div> <buttton type = "button"> home </buttton> <buttton type = "button"> 사례 분석 </buttton> <buttton type = "button"> 연락처 </buttton> </div> .BTN-Group-Justified {display : width : 100%; Table-Layout : 고정; 경계-콜라 : 별도;}. .btn-group {display : table-cell; float : none; width : 1%;}..btn-group-Justified를 테이블 (디스플레이 : 테이블)으로 시뮬레이션하고 내부 버튼 템플릿을 테이블 셀 (디스플레이 : 테이블 세포)으로 시뮬레이션합니다.
참고 : 동일 버튼 그룹을 만들 때 <a> 태그를 사용하여 버튼 태그 요소를 사용할 때 디스플레이를 사용하기 때문에 테이블은 일부 브라우저에서 지원하기에 친숙하지 않기 때문입니다.
wulin.com에서 권장 읽기 :
부트 스트랩 버튼에 대한 자세한 설명
위는 편집기가 소개 한 부트 스트랩 버튼 구성 요소입니다. 나는 그것이 당신에게 도움이되기를 바랍니다!