부트스트랩 버튼 드롭다운 메뉴 예제 튜토리얼

말하자면

　버튼형 드롭다운 메뉴는 기본적으로 드롭다운 메뉴와 외관상 동일합니다. 차이점은 일반 드롭다운 메뉴는 블록 요소인 반면 버튼 드롭다운 메뉴는 인라인 블록 요소라는 것입니다. 이 글에서는 부트스트랩 버튼 드롭다운 메뉴를 자세히 소개하겠습니다

Overview

버튼 드롭다운 메뉴는 실제로는 일반적인 드롭다운 메뉴와는 달리 외부 컨테이너 "div.dropdown"이 대체되었다는 점만 다릅니다. "div.btn-group"에 의해 디스플레이가 블록에서 인라인 블록으로 변경되었습니다

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">按钮式下拉菜单 <span class="caret"></span>
  </button>
  <ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li>
  </ul></div><div class="dropdown">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">普通下拉菜单 <span class="caret"></span>
  </button>
  <ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li>
  </ul></div>

팝업

일부 메뉴는 페이지 하단에 팝업되어야 합니다. , 그리고 이 메뉴에는 드롭다운 메뉴가 있어서 사용자가 더 나은 경험을 할 수 있도록 드롭다운 메뉴 팝업이 있어야 했습니다. Bootstrap 프레임워크에서는 이 효과를 위해 클래스 이름 "dropup"이 특별히 제안되었습니다. 이 클래스 이름을 "btn-group"

【Triangle】

　버튼의 기본 아래쪽 삼각형이 전달됩니다. 태그의 "" 태그 요소에 이름을 "caret"로 지정합니다

　　按钮下拉菜单

로그인 후 복사

　이 삼각형은 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;
}

로그인 후 복사

버튼에 있는 삼각형은 "caret"입니다. 특정 스타일 처리를 거쳤습니다:

.btn .caret {
  margin-left: 0;
}.btn-lg .caret {
  border-width: 5px 5px 0;
  border-bottom-width: 0;
}.dropup .btn-lg .caret {
  border-width: 0 5px 5px;
}

로그인 후 복사

삼각형 방향을 위쪽으로 표시해야 하는 경우 ".btn-group" 클래스에 "dropup" 클래스 이름을 추가해야 합니다. 아래쪽 삼각형 차이점: 실제로 border-bottom

.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
  content: "";
  border-top: 0;
  border-bottom: 4px solid;
}

로그인 후 복사

<div class="btn-group dropup" style="margin-top:140px"><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>

로그인 후 복사

Split-style

의 값을 변경합니다. 분할 버튼 드롭다운 메뉴는 실제로 버튼과 삼각형을 인위적으로 분리합니다. , 결국에는 버튼이 하나 더 있습니다. 별도의 버튼이 있습니다

<div class="btn-group">
  <button type="button" class="btn">Action</button>
  <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span>
  </button>
  <ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li>
  </ul></div>

로그인 후 복사

Size

버튼 드롭다운 메뉴는 btn-xs, btn-lg, btn을 포함한 모든 크기의 버튼에 적합합니다. -sm 등 물론 일반 드롭다운 목록도 버튼 크기 변경을 지원합니다

<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li>
  </ul></div><div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li>
  </ul></div><div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li>
  </ul></div>

로그인 후 복사

Finally

구분선, 구분선, 정렬, 메뉴 항목 상태 등과 같은 일반 드롭다운 목록의 일부 확장된 사용을 위해 ., 버튼 드롭다운 메뉴도 지원됩니다. 그래서 개인적으로 부트스트랩에서 버튼 드롭다운 메뉴 구성요소를 설정하는 것은 조금 장황하다고 생각합니다. 단지 블록과 인라인 블록의 차이일 뿐 기능상의 차이는 없습니다

위 내용은 부트스트랩 버튼 드롭다운 메뉴 예제 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!