부트스트랩 버튼 컴포넌트_javascript 스킬에 대한 자세한 설명

드롭다운 메뉴 구성 요소와 같은 버튼 그룹이 제대로 작동하려면 Button.js 플러그인을 사용해야 합니다.

구조적 측면: 클래스 이름이 btn-group인 컨테이너를 사용하고 이 컨테이너에 여러 개의 버튼을 배치합니다.

버튼 그룹도 독립된 구성 요소이므로 해당 소스 코드 파일을 찾을 수 있습니다.

간략히: 버튼이 없습니다

Sass:_buttons.scss

Css:Bootstrap.css 3131행 ~ 3291행

<div class="btn-group">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-step-backward"></span>
</button>
…
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-step-forward"></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 class="btn-toolbar">
<div class="btn-group">
…
</div>
<div class="btn-group">
…
</div>
<div class="btn-group">
…
</div>
<div class="btn-group">
…
</div>
</div>

원리: 주요 목적은 컨테이너의 여러 그룹 .btn-group 요소를 플로팅하고 그룹 간에 5px의 왼쪽 여백을 유지하는 것입니다.

.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 class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-align-left"></span>
</button>
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-align-center"></span>
</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-align-right"></span>
</button>
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-align-justify"></span>
</button>
</div>
<div class="btn-group">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-font"></span>
</button>
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-bold"></span>
</button>
</div>
</div>

버튼 중첩 그룹화

탐색 메뉴와 유사한 효과를 얻기 위해 공통 버튼 그룹을 드롭다운 메뉴에 함께 배열하는 경우가 많습니다.

사용시 드롭다운 메뉴를 생성하는 데 사용된 드롭다운 컨테이너의 클래스 이름을 btn-group으로 변경하고 일반 버튼과 같은 레벨에 배치하면 됩니다.

<div class="btn-group">
<button class="btn btn-default" type="button">首页</button>
<button class="btn btn-default" type="button">产品展示</button>
<button class="btn btn-default" type="button">案例分析</button>
<button class="btn btn-default" type="button">联系我们</button>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
关于我们<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">公司简介</a></li>
<li><a href="#">企业文化</a></li>
<li><a href="#">组织结构</a></li>
<li><a href="#">客服服务</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 class="btn-group-vertical">
<button class="btn btn-default" type="button">首页</button>
<button class="btn btn-default" type="button">产品展示</button>
<button class="btn btn-default" type="button">案例分析</button>
<button class="btn btn-default" type="button">联系我们</button>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
关于我们<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">公司简介</a></li>
<li><a href="#">企业文化</a></li>
<li><a href="#">组织结构</a></li>
<li><a href="#">客服服务</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 class="btn-group btn-group-justified">
<buttton class="btn btn-default" type="button">首页</buttton>
<buttton class="btn btn-default" type="button">案例分析</buttton>
<buttton class="btn btn-default" type="button">联系我们</buttton>
<buttton class="btn btn-default" type="button">关于我们</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을 사용하는 것이 친숙하지 않기 때문입니다. 🎜>

스크립트하우스 추천도서 :

부트스트랩 버튼 상세설명

위는 에디터가 소개한 부트스트랩 버튼 컴포넌트입니다. 많은 분들께 도움이 되었으면 좋겠습니다!