웹 페이지에서 단일 버튼을 사용하는 것이 비즈니스 요구 사항을 충족하지 못하는 경우가 있습니다. 예를 들어 서식 있는 텍스트 편집기의 작은 아이콘 버튼 세트와 같이 여러 버튼이 함께 사용되는 경우가 있습니다. 이 글에서는 부트스트랩 버튼 그룹을 사용하는 방법을 자세히 소개합니다
드롭다운 메뉴 구성요소와 마찬가지로 버튼 그룹도 제대로 작동하려면 버튼.js 플러그인을 사용해야 합니다. 그러나 bootstrap.js 파일만 직접 호출할 수도 있습니다. 이 파일에는 Button.js 플러그인 기능이 통합되어 있기 때문에
마찬가지로 Bootstrap의 구성 요소 상호 작용 효과는 모두 jQuery 라이브러리에서 작성된 플러그인에 의존하기 때문에 효과를 생성하려면 bootstrap.js를 사용하기 전에 jquery.js를 로드해야 합니다.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css?1.1.11" rel="stylesheet"></head><body><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js?1.1.11"></script><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js?1.1.11"></script></body></html>
기본 사용법
스크린 리더 사용자에게 올바른 버튼 그룹을 전달하려면 적절한 role 속성을 제공해야 합니다. 버튼 그룹의 경우 role="group"이어야 하고, 도구 모음(도구 모음)의 경우 role="toolbar"여야 합니다.
또한 버튼 그룹 및 도구 모음도 있어야 합니다. 올바른 role 속성을 설정했음에도 불구하고 명시적인 레이블 태그를 정의하면 대부분의 보조 기술이 해당 태그를 올바르게 읽지 못합니다. aria-label 또는 aria-labelledbyrole 属性。对于按钮组合，应该是 role="group"，对于toolbar（工具栏）应该是 role="toolbar"
此外，按钮组和工具栏应给定一个明确的label标签，尽管设置了正确的 role 属性，但是大多数辅助技术将不会正确的识读他们。可以使用 aria-label
<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>
✓ .btn-group -xs: 초소형 버튼 그룹
".btn-group" 클래스 이름에 해당 클래스 이름만 추가하면 다양한 크기의 버튼 그룹을 얻을 수 있습니다
<div class="btn-toolbar"> <div class="btn-group"><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button> </div> <div class="btn-group"><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-left"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-right"></span></button> </div> <div class="btn-group"><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-font"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-bold"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-italic"></span></button> </div> <div class="btn-group"><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-height"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-width"></span></button> </div></div>
<div class="btn-group btn-group-lg"> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <button type="button" class="btn btn-default">3</button></div><div class="btn-group"> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <button type="button" class="btn btn-default">3</button></div><div class="btn-group btn-group-sm"> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <button type="button" class="btn btn-default">3</button></div><div class="btn-group btn-group-xs"> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <button type="button" class="btn btn-default">3</button></div>
<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>
<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-justified >는 table-cell을 설정합니다. 셀은 여백을 설정할 수 없으며 -margin 값은 테두리를 제거하기 위해 코드에 설정되어 있지만 이는 분명히 적용되지 않습니다. 따라서 중복 테두리를 제거하는 코드는 테이블 테두리를 병합하는 것이어야 합니다 - border-collapse:collapse
.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%;
} 为了将 <button> 元素用于两端对齐的按钮组中，必须将每个按钮包裹进一个按钮组中。因为大部分的浏览器不能将CSS 应用到对齐的 <button> 元素上，但是，可以用按钮式下拉菜单来解决这个问题
<div class="btn-group btn-group-justified"><div class="btn-group" role="group"><button class="btn btn-default" >首页</button></div> <div class="btn-group" role="group"><button class="btn btn-default" >产品展示</button></div> <div class="btn-group" role="group"><button class="btn btn-default" >案例分析</button></div> <div class="btn-group" role="group"><button class="btn btn-default" >联系我们</button></div> </div>
위 내용은 Bootstrap 버튼 그룹에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
