부트스트랩 학습 버튼 구성요소 (1)-부트스트랩 튜토리얼-php.cn

이 글에서는 Bootstrap의 버튼 구성 요소를 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

부트스트랩 학습 버튼 구성요소 (1)

관련 권장 사항: "부트스트랩 튜토리얼"

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

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

로그인 후 복사

버튼 그룹의 네 모서리는 측면이 둥근 첫 번째 버튼과 마지막 버튼을 제외하고는 둥글게 되어 있습니다. 둥근 모서리가 없어야 합니다.

자세한 설명:

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>

로그인 후 복사

버튼 중첩 그룹화

많은 경우 드롭다운 메뉴가 있는 공통 버튼 그룹을 배열하여 탐색 메뉴에 미치는 영향:

부트스트랩 학습 버튼 구성요소 (1)

사용할 때 이전에 드롭다운 메뉴를 생성하는 데 사용된 드롭다운 컨테이너의 클래스 이름을 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!