부트스트랩 버튼 드롭다운 메뉴 component_javascript 스킬에 대한 자세한 설명

버튼 그룹도 드롭다운 메뉴 구성 요소와 마찬가지로 독립적인 구성 요소이므로 버튼 그룹이 제대로 작동하려면 Button.js 플러그인을 사용해야 합니다.

그룹을

로 결합하여 더 복잡한 구성요소를 만드세요.

<div class="btn-toolbar" role="toolbar">
 <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>
  <button type="button" class="btn btn-default">4</button>
  <button type="button" class="btn btn-default">5</button>
  <button type="button" class="btn btn-default">6</button>
 </div>
 <div class="btn-group">
  <button type="button" class="btn btn-default">7</button>
  <button type="button" class="btn btn-default">8</button>
 </div>
 <div class="btn-group">
  <button type="button" class="btn btn-default">9</button>
 </div>
 </div>

버튼 드롭다운 메뉴는 기본적으로 드롭다운 메뉴와 모양이 동일합니다. 이들 사이의 유일한 차이점은 외부 컨테이너 div.dropdown이 div.btn-group

으로 대체된다는 것입니다.

<div class="btn-group">
 <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  按钮下拉菜单
  <span class="caret"></span>
 </button>
 <ul class="dropdown-menu">
  <li><a href="#">菜单列表1</a></li>
  <li><a href="#">菜单列表2</a></li>
  <li><a href="#">菜单列表3</a></li>
  <li><a href="#">菜单列表4</a></li>
  <li><a href="#">菜单列表5</a></li>
 </ul>
 </div>

bootstrap.css 파일

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

아래쪽 위쪽 삼각형 버튼

버튼 태그에 SPAN 태그 요소를 추가하여 버튼의 하향 삼각형을 생성하고 클래스 이름은 .caret입니다.

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 按钮下拉菜单
 <span class="caret"></span>
</button>

이 삼각형 형태는 CSS를 통해 구현됩니다. 다음은 bootstrap.css 소스 코드입니다.

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

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

더보기

인기 기사

어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션

4 몇 주 전 By DDD

Windows 11 KB5054979의 새로운 기능 및 업데이트 문제를 해결하는 방법

3 몇 주 전 By DDD

Atomfall에서 크레인 제어 키 카드를 찾을 수 있습니다

4 몇 주 전 By DDD

<s> : 데드 레일 - 모든 도전을 완료하는 방법

1 몇 달 전 By DDD

Atomfall Guide : 항목 위치, 퀘스트 가이드 및 팁

1 몇 달 전 By DDD

더보기

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

더보기

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7698

15

자바 튜토리얼

1640

14

Cakephp 튜토리얼

1393

52

라라벨 튜토리얼

1287

25

PHP 튜토리얼

1229

29

더보기