이전 기사에서 Bootstrap의 버튼 구성 요소를 소개했습니다. 이번 기사에서는 Bootstrap 버튼 구성 요소를 소개하겠습니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.
관련 추천: "부트스트랩 튜토리얼"
버튼 드롭다운 메뉴
버튼 드롭다운 메뉴는 기본적으로 드롭다운 메뉴와 모양이 동일합니다. 이들 사이의 유일한 차이점은 외부 컨테이너 p.dropdown이 p.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; }
버튼의 아래쪽-위쪽 삼각형
버튼의 아래쪽을 가리키는 삼각형으로 대체된다는 것입니다. 버튼에 전달된 스팬 태그 요소를 추가하고 클래스 이름은 .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; }
더 많은 프로그래밍 관련 지식은 다음과 같습니다. , 다음 페이지를 방문하세요: 프로그래밍 소개! !
위 내용은 부트스트랩 학습 버튼 구성 요소(2)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!