이 글에서는 Bootstrap 의 버튼 구성 요소를 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.
관련 권장 사항: "부트스트랩 튜토리얼 "
버튼 그룹도 독립적인 구성 요소이므로 해당 소스 코드 파일을 찾을 수 있습니다:
Less:button.less
Sass:_buttons.scss
Css: Bootstrap.css Line 3131 ~ Line 3291
버튼 그룹은 드롭다운 메뉴 구성 요소와 동일하며 제대로 작동하려면 Button.js 플러그인을 사용해야 합니다.
구조적 측면: 클래스 이름이 btn-group인 컨테이너를 사용하고 이 컨테이너에 여러 개의 버튼을 배치합니다.
<div>
<button>
<span></span>
</button>
…
<button>
<span></span>
</button>
</div> 로그인 후 복사
CSS:
.btn-group,
.btn-group-vertical {
position: relative;
display: inline-block;
vertical-align: middle;
}
.btn-group > .btn,
.btn-group-vertical > .btn {
position: relative;
float: left;
}
.btn-group > .btn:hover,
.btn-group-vertical > .btn:hover,
.btn-group > .btn:focus,
.btn-group-vertical > .btn:focus,
.btn-group > .btn:active,
.btn-group-vertical > .btn:active,
.btn-group > .btn.active,
.btn-group-vertical > .btn.active {
z-index: 2;
}
.btn-group > .btn:focus,
.btn-group-vertical > .btn:focus {
outline: none;
}
.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group {
margin-left: -1px;
} 로그인 후 복사
요소 외에도 태그와 같은 다른 태그 요소를 사용할 수도 있습니다. .btn-group 컨테이너 내부의 레이블 요소에는 클래스 이름이 있어야 합니다. btn
버튼 그룹의 네 모서리는 측면이 둥근 첫 번째 버튼과 마지막 버튼을 제외하고는 둥글게 되어 있습니다. 둥근 모서리가 없어야 합니다.
자세한 설명:
1. 기본: 모든 버튼의 모서리가 둥글게 처리되었습니다.
2. 첫 번째 버튼과 마지막 버튼을 제외한 나머지 버튼의 모서리는 둥글게 처리되었습니다.
3. 모서리 및 오른쪽 하단 모서리 둥근 모서리
소스 코드:
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 0;
}
.btn-group > .btn:first-child {
margin-left: 0;
}
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group > .btn:last-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 {
float: left;
}
.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 > .btn-group:last-child> .btn:first-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
} 로그인 후 복사
버튼 그룹 도구 모음
서식 있는 텍스트 편집기에서 복사, 잘라내기, 그룹 붙여넣기, 왼쪽 정렬, 중간 정렬, 양쪽 끝에서 그룹을 오른쪽 정렬하고 정렬하려면 부트스트랩 프레임워크 버튼 도구 모음 btn-toolbar
<div>
<div>
…
</div>
<div>
…
</div>
<div>
…
</div>
<div>
…
</div>
</div> 로그인 후 복사
원리: 가장 중요한 것은 컨테이너의 여러 그룹을 부동으로 만들고 그 사이를 유지하는 것입니다. 그룹 5픽셀 왼쪽 여백
.btn-toolbar {
margin-left: -5px;
}
.btn-toolbar .btn-group,
.btn-toolbar .input-group {
float: left;
}
.btn-toolbar > .btn,
.btn-toolbar > .btn-group,
.btn-toolbar > .input-group {
margin-left: 5px;
} 로그인 후 복사
btn-toolbar에서 부동소수점 지우기에 주의하세요
.btn-toolbar:before,
.btn-toolbar:after｛
display: table;
content: " ";
｝
.btn-toolbar:after{
clear: both;
} 로그인 후 복사
예:
<div>
<div>
<button>
<span></span>
</button>
<button>
<span></span>
</button>
<button>
<span></span>
</button>
<button>
<span></span>
</button>
</div>
<div>
<button>
<span></span>
</button>
<button>
<span></span>
</button>
</div>
</div> 로그인 후 복사
버튼 중첩 그룹화
많은 경우 드롭다운 메뉴가 있는 공통 버튼 그룹을 배열하여 탐색 메뉴에 미치는 영향:
사용할 때 이전에 드롭다운 메뉴를 생성하는 데 사용된 드롭다운 컨테이너의 클래스 이름을 btn-group으로 변경하고 일반 버튼과 동일한 수준에 배치하면 됩니다.
<div>
<button>首页</button>
<button>产品展示</button>
<button>案例分析</button>
<button>联系我们</button>
<div>
<button>
关于我们<span></span>
</button>
<ul>
<li><a>公司简介</a></li>
<li><a>企业文化</a></li>
<li><a>组织结构</a></li>
<li><a>客服服务</a></li>
</ul>
</div>
</div> 로그인 후 복사
.btn-group > .btn-group {
float: left;
}
.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 > .btn-group:last-child> .btn:first-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
outline: 0;
}
.btn-group > .btn + .dropdown-toggle {
padding-right: 8px;
padding-left: 8px;
}
.btn-group > .btn-lg + .dropdown-toggle {
padding-right: 12px;
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: none;
} 로그인 후 복사
버튼 수직 그룹화
수평 그룹화 클래스 이름 .btn-group을 .btn-group-vertical로 바꾸세요.
<div>
<button>首页</button>
<button>产品展示</button>
<button>案例分析</button>
<button>联系我们</button>
<div>
<button>
关于我们<span></span>
</button>
<ul>
<li><a>公司简介</a></li>
<li><a>企业文化</a></li>
<li><a>组织结构</a></li>
<li><a>客服服务</a></li>
</ul>
</div>
</div> 로그인 후 복사
.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group,
.btn-group-vertical > .btn-group > .btn {
display: block;
float: none;
width: 100%;
max-width: 100%;
}
.btn-group-vertical > .btn-group > .btn {
float: none;
}
.btn-group-vertical > .btn + .btn,
.btn-group-vertical > .btn + .btn-group,
.btn-group-vertical > .btn-group + .btn,
.btn-group-vertical > .btn-group + .btn-group {
margin-top: -1px;
margin-left: 0;
}
.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
border-radius: 0;
}
.btn-group-vertical > .btn:first-child:not(:last-child) {
border-top-right-radius: 4px;
border-bottom-right-radius: 0;
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-left-radius: 4px;
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group-vertical > .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%입니다. 버튼 group.btn-group에 대한 클래스 .btn-group-justified
<div>
<buttton>首页</buttton>
<buttton>案例分析</buttton>
<buttton>联系我们</buttton>
<buttton>关于我们</buttton>
</div> 로그인 후 복사
.btn-group-justified {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: separate;
}
.btn-group-justified > .btn,
.btn-group-justified > .btn-group {
display: table-cell;
float: none;
width: 1%;
}
.btn-group-justified > .btn-group .btn {
width: 100%;
} 로그인 후 복사
라는 이름은 .btn-group-justified를 테이블(디스플레이: 테이블)로 시뮬레이션하고 내부의 버튼 템플릿을 테이블 셀(디스플레이: 테이블 셀).
참고: 동일한 버튼 그룹을 만들 때
태그를 사용하여 버튼을 만들어 보세요. 왜냐하면 버튼 태그 요소를 사용할 때 일부 브라우저에서는 display: table이 친숙하지 않기 때문입니다. 지식이 있으시면 프로그래밍 입문을 방문해 주세요! !
위 내용은 부트스트랩 학습 버튼 구성요소 (1)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
