찾다

집  >  기사  >  웹 프론트엔드  >  부트스트랩 버튼 그룹의 상세 예

부트스트랩 버튼 그룹의 상세 예

零下一度
零下一度원래의
2017-07-03 11:40:291479검색

이전 단어

　웹 페이지에서 단일 버튼을 사용하는 것이 때때로 비즈니스 요구 사항을 충족하지 못하는 경우가 있습니다. 예를 들어 서식 있는 텍스트 편집기의 작은 아이콘 버튼 세트와 같이 여러 버튼이 함께 사용되는 경우가 있습니다. 이 글에서는 부트스트랩 버튼 그룹 사용 방법을 자세히 소개합니다.

드롭다운 메뉴 구성요소와 마찬가지로 버튼 그룹도 제대로 작동하려면 버튼.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>

기본 사용법

　버튼 그룹 구조는 매우 간단합니다. "btn-group"이라는 컨테이너를 사용하고 이 컨테이너에 여러 개의 버튼을 넣으세요

스크린 리더 사용자에게 올바른 버튼 그룹을 전달하려면 적절한 role 속성을 ​​제공해야 합니다. 버튼 그룹의 경우 role="group"이어야 하고, 툴바의 경우 role="toolbar"여야 합니다.

또한 버튼 그룹과 툴바는 다음과 같아야 합니다. 명시적인 레이블 태그를 정의하면 올바른 role 속성을 ​​설정했음에도 불구하고 대부분의 보조 기술이 태그를 올바르게 읽지 못합니다. aria-label 또는 aria-labelledbyrole 属性。对于按钮组合，应该是 role="group"，对于toolbar（工具栏）应该是 role="toolbar"

　　此外，按钮组和工具栏应给定一个明确的label标签，尽管设置了正确的 role 属性，但是大多数辅助技术将不会正确的识读他们。可以使用 aria-label

를 사용할 수 있습니다. <button> 유일하게 확인해야 할 점은 어떤 태그가 사용되든 ".btn-group" 컨테이너의 태그 요소에는 클래스 이름이 ".btn"

<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>


Button Toolbar

이어야 한다는 것입니다. 서식 있는 텍스트 편집에서 브라우저에서 왼쪽 정렬, 가운데 정렬, 오른쪽 정렬 및 양쪽 맞춤 그룹 복사, 잘라내기, 붙여넣기 등의 그룹 버튼 그룹을 만듭니다. 부트스트랩 프레임워크 버튼 툴바도 이러한 생성 방법을 제공합니다. 그룹별로 "btn-toolbar"라는 큰 컨테이너에 버튼 그룹 "btn-group"을 배치하기만 하면 됩니다. 양식 버튼을 소개하는 블로그 게시물에서 버튼은 패딩, 글꼴 크기, 줄 높이 및 테두리 반경 속성 값을 조정하기 위해 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"><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>

중첩 그룹화

탐색 메뉴와 유사한 효과를 얻기 위해 드롭다운 메뉴와 일반 버튼 그룹을 함께 배열하는 경우가 많습니다. 사용할 때 원래 드롭다운 메뉴의 "드롭다운" 컨테이너를 "btn-group"으로 변경하고 수직으로 배열된 일반 버튼

<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>


과 동일한 레벨에 배치하기만 하면 됩니다.

기본적으로 버튼 그룹은 가로로 표시됩니다. 그러나 실제 적용에서는 항상 수직 디스플레이의 효과를 접하게 됩니다. 이 스타일은 Bootstrap 프레임워크에서도 제공됩니다. 가로 그룹화의 "btn-group" 클래스 이름을 "btn-group-vertical"로 변경하면 됩니다. 

<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>


Equal 버튼

등호 버튼의 효과는 모바일 측면에서 실용적입니다. 전체 버튼 그룹 너비는 컨테이너의 100%이며, 버튼 그룹의 각 버튼은 전체 컨테이너 너비를 동일하게 나눕니다. 예를 들어, 버튼 그룹에 5개의 버튼이 있으면 각 버튼의 너비는 20%이고, 4개의 버튼이 있으면 각 버튼의 너비는 25%입니다. 등

　 균등하게 분할된 버튼을 종종 호출합니다. 구현 방법 적응형 그룹 버튼의 구현 원리도 매우 간단합니다. "btn-group-justified" 클래스 이름을 추가하면 됩니다. 테이블(display:table)로 만들고 내부의 버튼을 테이블 셀(display:table-cell)로 시뮬레이션합니다.
　 [참고] 동일한 버튼 그룹을 만들 때 태그 요소를 사용하여 버튼을 만드세요. <button> 태그 요소를 사용할 때 일부 브라우저에서는 display:table을 사용하는 것이 적합하지 않습니다. 


<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 > .btn은 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>


 

위 내용은 부트스트랩 버튼 그룹의 상세 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：부트스트랩 버튼 드롭다운 메뉴 예제 튜토리얼다음 기사：부트스트랩 버튼 드롭다운 메뉴 예제 튜토리얼

관련 기사

더보기