매일 배워야 할 부트스트랩 버튼_자바스크립트 기술
- WBOY원래의
- 2016-05-16 15:29:441189검색
1. 버튼(버튼 그룹)
웹 페이지에서 단일 버튼을 사용하는 것이 비즈니스 요구 사항을 충족하지 못하는 경우가 있습니다. 예를 들어 서식 있는 텍스트 편집기의 작은 아이콘 버튼 세트와 같이 여러 버튼이 함께 사용되는 경우가 있습니다. 그래서 이번 섹션에서는 부트스트랩 프레임워크에서 제공하는 버튼 그룹 컴포넌트를 주로 소개합니다.
소스 코드 쿼리:
버튼 그룹도 독립된 구성 요소이므로 해당 소스 코드 파일을 찾을 수 있습니다.
🙌 LESS 버전: 해당 소스 파일은button.less
🙌 Sass 버전: 해당 소스 파일은 _buttons.scss
🙌 CSS 버전 : bootstrap.css 파일 3131~3291행에 해당
사용법:
드롭다운 메뉴 구성 요소와 같은 버튼 그룹이 제대로 작동하려면 Button.js 플러그인을 사용해야 합니다. 그러나 bootstrap.js 파일만 직접 호출할 수도 있습니다. 이 파일에는 Button.js 플러그인 기능이 통합되어 있기 때문입니다.
구조는 매우 간단합니다. "btn-group"이라는 컨테이너를 사용하고 이 컨테이너에 여러 개의 버튼을 넣으세요. 아래와 같이:
<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-fast-backward"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-backward"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-play"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-pause"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-stop"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-forward "></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-forward"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-forward"></span></button> </div>
작동 효과는 다음과 같습니다.
bb9345e55eb71822850ff156dfde57c8 요소 외에도 3499910bf9dac5ae3c52d5ede7383485 태그와 같은 다른 태그 요소를 사용할 수도 있습니다. 유일하게 확인해야 할 것은 어떤 태그가 사용되든 ".btn-group" 컨테이너의 태그 요소에는 클래스 이름 ".btn"이 있어야 한다는 것입니다.
버튼그룹 구현 소스코드는 다음과 같습니다.
/查看bootstrap.css文件第3131行～第3161行/
.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;
}
렌더링을 보면 버튼 그룹의 네 모서리가 둥글게 되어 있는 것을 볼 수 있는데(CSS3을 지원하는 브라우저), 몇몇 친구들은 우리가 보통 웹 페이지를 만들 때 각 버튼의 모서리가 둥글게 되어 있는지 물어볼 것입니다. 버튼 그룹의 첫 번째 버튼과 마지막 버튼은 모서리가 둥글고 다른 버튼은 모서리가 둥글지 않습니다. 어떻게 해야 합니까? 실제로 구현 방법은 매우 간단합니다.
- 1. 모든 버튼은 기본적으로 모서리가 둥글게 되어 있습니다.
- 2. 첫 번째 버튼과 마지막 버튼(드롭다운 버튼 제외)을 제외한 모든 버튼은 둥근 모서리 효과를 취소합니다
- 3. 첫 번째 버튼의 왼쪽 상단과 왼쪽 하단만 둥글게 처리되었습니다
- 4. 마지막 버튼의 오른쪽 상단과 오른쪽 하단만 둥글게 처리되었습니다
해당 소스코드는 다음과 같습니다.
/boottrap.css 파일의 3174~3203행 보기/
.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;
}
2. 버튼(버튼 툴바)
서식 있는 텍스트 편집기에서 다음 그림과 같이 그룹 복사, 잘라내기, 붙여넣기 등의 버튼 그룹을 그룹으로 정렬합니다.
그런 다음 부트스트랩 프레임워크 버튼 도구 모음도 이러한 생성 방법을 제공합니다. 아래와 같이 버튼 그룹 "btn-group"을 그룹으로 큰 컨테이너 "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의 왼쪽 여백을 유지하는 것입니다. 코드는 다음과 같습니다.
/소스코드는 bootstrap.css 파일의 3162~3173라인을 참고하세요/
.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"에서 플로트를 지우는 데 주의하세요.
/소스코드는 bootstrap.css 파일의 5062번째 줄을 참고하세요/
.btn-toolbar:before,
.btn-toolbar:after｛
display: table;
content: " ";
｝
.btn-toolbar:after{
clear: both;
}
작동 효과는 다음과 같습니다.
버튼 그룹 크기 설정
버튼 소개 섹션에서 버튼은 btn-lg, btn-sm 및 btn-xs의 세 가지 클래스 이름을 사용하여 패딩, 글꼴 크기, 줄 높이 및 테두리 반경 속성 값을 조정한다는 것을 알고 있습니다. 버튼 크기를 변경하려면 그런 다음 비슷한 방법을 사용하여 버튼 그룹의 크기를 결정할 수도 있습니다.
🙌 .btn-group-lg:——대형 버튼 그룹
🙌 .btn-group-sm:——작은 버튼 그룹
🙌 .btn-group-xs:——아주 작은 버튼 그룹
다양한 크기의 버튼 그룹을 얻으려면 ".btn-group" 클래스 이름에 해당 클래스 이름을 추가하기만 하면 됩니다. 아래와 같이:
<div class="btn-toolbar"> <div class="btn-group btn-group-lg"> … </div> <div class="btn-group"> … </div> <div class="btn-group btn-group-sm"> … </div> <div class="btn-group btn-group-xs"> … </div> </div>
버튼 그룹 크기 효과 스타일 코드를 구현하는 코드는 다음과 같습니다.
/소스코드는 bootstrap.css 파일의 2320~2340라인을 참고하세요/
.btn-lg,
.btn-group-lg> .btn{
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
.btn-sm,
.btn-group-sm> .btn {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
.btn-xs,
.btn-group-xs> .btn{
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
3、按钮（嵌套分组）
很多时候，我们常把下拉菜单和普通的按钮组排列在一起，实现类似于导航菜单的效果。如下所示：
使用的时候，只需要把当初制作下拉菜单的“dropdown”的容器换成“btn-group”，并且和普通的按钮放在同一级。如下所示：
<div class="btn-group"> <button class="btnbtn-default" type="button">首页</button> <button class="btnbtn-default" type="button">产品展示</button> <button class="btnbtn-default" type="button">案例分析</button> <button class="btnbtn-default" type="button">联系我们</button> <div class="btn-group"> <button class="btnbtn-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>
实现的样式代码：
/查看bootstrap.css文件第3192行～第3223行/
.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;
}
4、按钮（垂直分组）
前面看到的示例，按钮组都是水平显示的。但在实际运用当中，总会碰到垂直显示的效果。在Bootstrap框架中也提供了这样的风格。我们只需要把水平分组的“btn-group”类名换成“btn-group-vertical”即可。
运行的效果如下：
实现垂直分组的样式代码：
/请查看bootstrap.css文件第3234行～第3276行/
.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;
}
和水平分组按钮不一样的是：
☑ 水平分组按钮第一个按钮左上角和左下角具有圆角以及最后一个按钮右上角和右下角具有圆角
☑ 垂直分组按钮第一个按钮左上角和右上角具有圆角以及最后一个按钮左下角和右下角具有圆角
5、按钮（等分按钮）
等分按钮的效果在移动端上特别的实用。整个按钮组宽度是容器的100%，而按钮组里面的每个按钮平分整个容器宽度。例如，如果你按钮组里面有五个按钮，那么每个按钮是20%的宽度，如果有四个按钮，那么每个按钮是25%宽度，以此类推。
等分按钮也常被称为是自适应分组按钮，其实现方法也非常的简单，只需要在按钮组“btn-group”上追加一个“btn-group-justified”类名，如下所示：
运行效果如下：
实现原理非常简单，把“btn-group-justified”模拟成表格（display:table），而且把里面的按钮模拟成表格单元格（display:table-cell）。具体样式代码如下：
/源码请查看bootstrap.css文件第3277行～第3291行/
.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%;
}
特别声明：在制作等分按钮组时，请尽量使用3499910bf9dac5ae3c52d5ede7383485标签元素来制作按钮，因为使用bb9345e55eb71822850ff156dfde57c8标签元素时，使用display:table在部分浏览器下支持并不友好。
6、按钮下拉菜单
按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的。不同的是在普通的下拉菜单的基础上封装了按钮（.btn）样式效果。简单点说就是点击一个按钮，会显示隐藏的下拉菜单。
按钮下拉菜单其实就是普通的下拉菜单，只不过把“3499910bf9dac5ae3c52d5ede7383485”标签元素换成了“bb9345e55eb71822850ff156dfde57c8”标签元素。唯一不同的是外部容器“div.dropdown”换成了“div.btn-group”。如下所示：
<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>
实现样式代码如下：
/查看bootstrap.css文件第3204行～第3223行/
.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;
}
运行的效果如下：
7、按钮的向下向上三角形
按钮的向下三角形，我们是通过在bb9345e55eb71822850ff156dfde57c8标签中添加一个“45a2772a6b6107b401db3c9b82c049c2”标签元素，并且命名为“caret”:
这个三角形完全是通过CSS代码来实现的：
/源码请查看bootstrap.css文件第2994行～第3003行/
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px solid;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
另外在按钮中的三角形“caret”做了一定的样式处理：
/源码查看bootstrap.css文件第3224行～第3233行/
.btn .caret {
margin-left: 0;
}
.btn-lg .caret {
border-width: 5px 5px 0;
border-bottom-width: 0;
}
.dropup .btn-lg .caret {
border-width: 0 5px 5px;
}
有的时候我们的下拉菜单会向上弹起，这个时候我们的三角方向需要朝上显示，实现方法：需要在“.btn-group”类上追加“dropup”类名（这也是做向上弹起下拉菜单要用的类名）。
/源码请查看bootstrap.css文件第3109行～第3114行/
.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
content: "";
border-top: 0;
border-bottom: 4px solid;
}
上面代码中可以看出，向上三角与向下三角的区别：其实就是改变了一个border-bottom的值。
下面是向上弹起菜单的例子：
<div class="btn-group dropup"> <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>
运行效果如下：
以上就是关于Bootstrap按钮组工具栏的全部内容，希望对大家的学习有所帮助。