부트스트랩 드롭다운 메뉴 튜토리얼 예시

이 장에서는 Bootstrap 클래스를 사용하여 버튼에 드롭다운 메뉴를 추가하는 방법을 설명합니다. 버튼에 드롭다운 메뉴를 추가하려면 버튼과 드롭다운 메뉴를 .btn-group 에 배치하면 됩니다. 또한 f092556db850dedfd562431d5552770054bdf357c58b8a65c66d7c19c8e4d114을 사용하여 버튼이 드롭다운 메뉴로 작동함을 나타낼 수도 있습니다.

다음 예는 기본적이고 간단한 버튼 드롭다운 메뉴를 보여줍니다.

예제

<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">默认        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li>
            <a href="#">功能</a>
        </li>
        <li>
            <a href="#">另一个功能</a>
        </li>
        <li>
            <a href="#">其他</a>
        </li>
        <li class="divider"></li>
        <li>
            <a href="#">分离的链接</a>
        </li>
    </ul></div><div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">原始        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li>
            <a href="#">功能</a>
        </li>
        <li>
            <a href="#">另一个功能</a>
        </li>
        <li>
            <a href="#">其他</a>
        </li>
        <li class="divider"></li>
        <li>
            <a href="#">分离的链接</a>
        </li>
    </ul></div>

기본 사용법

Bootstrap 프레임워크에서 드롭다운 메뉴 구성 요소를 사용할 때 올바른 구조를 사용하는 것이 매우 중요합니다. 구조체와 클래스 이름이 올바르게 사용되지 않아 컴포넌트의 정상적인 사용 여부에 직접적인 영향을 미칩니다

　1. "dropdown"이라는 컨테이너를 사용하여 전체 드롭다운 메뉴 요소를 래핑합니다

c0a838506a57d6efb82c3faebdcfa64e16b28748ea4df4d9c2150843fecfba68

　2. f83a72b083183cd7ada5c1ff71f3c3ad 버튼을 상위 메뉴로 설정하고 클래스 이름 "dropdown-toggle" 및 사용자 정의 "data-toggle" 속성을 정의하며 값은 가장 바깥쪽 컨테이너 클래스 이름

8af15fa9ce0b1cee92d5ee57b078822f

　　3과 일치해야 합니다. 메뉴 항목은 ul 목록을 사용하고 클래스 이름은 "dropdown-menu"

ae363fd8bc2e4ee3b3446338ba23f464

  
  
  ActionAnother actionSomething else here

　4입니다. 드롭다운 메뉴의 상위 요소에 .dropup 클래스를 설정하면 다음을 만들 수 있습니다. 메뉴 팝업(기본값은 팝업)

14481b0d0ba7c394e2501a352872843d
  1172180f0ea09fa48126f1bf9c16d1a6Dropupa11c08f61adc2d33c8f8db60e406954354bdf357c58b8a65c66d7c19c8e4d114
  65281c5ac262bf6d81768915a4a77ac0
  c5f7c33631c7deafd5f3bd6bcd1eea2f25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Action5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Another action5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Something else here5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
  929d1f5ca49e04fdcb27f9465b94468916b28748ea4df4d9c2150843fecfba68

Principle Analysis

　 Bootstrap 프레임워크의 드롭다운 메뉴 구성 요소인 드롭다운 메뉴 항목은 " dropdown-menu" 기본 스타일은 "display:none"으로 설정됩니다. 사용자가 상위 메뉴 항목을 클릭하면 드롭다운 메뉴가 표시됩니다. 사용자가 다시 클릭하면 드롭다운 메뉴는 계속 숨겨집니다.

.dropdown-menu {
  position: absolute;/*设置绝对定位，相对于父元素div.dropdown*/
  top: 100%;/*让下拉菜单项在父菜单项底部，如果父元素不设置相对定位，该元素相对于body元素*/
  left: 0;
  z-index: 1000;/*让下拉菜单项不被其他元素遮盖住*/
  display: none;/*默认隐藏下拉菜单项*/
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

이제 구현 원리를 분석해 보겠습니다. js 기술을 통해 상위 컨테이너 "div.dropdown"에 추가하거나 추가하면 드롭의 표시 또는 숨기기를 제어할 수 있는 클래스 이름인 "open"을 제거할 수 있습니다. 다운 메뉴. 즉, 기본적으로 "div.dropdown"에는 "open"이라는 클래스 이름이 없습니다. 사용자가 처음 클릭하면 "div.dropdown"에 "open"이라는 클래스 이름이 추가됩니다. 다시, "div.dropdown" "컨테이너의 클래스 이름 "open"이 다시 제거됩니다.

.open > .dropdown-menu {
  display: block;
}

확장 사용

[구분 기호]

Bootstrap 프레임워크의 드롭다운 메뉴는 드롭다운 메뉴를 제공합니다. 두 개의 드롭다운 메뉴 그룹이 있다고 가정하면 그룹 사이에 빈 25edfb22a4f469ecb59f1190150159c6를 추가하고 이 25edfb22a4f469ecb59f1190150159c6에 클래스 이름을 추가하여 드롭다운 구분선을 추가할 수 있습니다.

.dropdown-menu .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}

9aa02a4f45fec1ec76777df05ea7dcabbed06894275b65c1ab86501b08a632eb

c0a838506a57d6efb82c3faebdcfa64e
  1172180f0ea09fa48126f1bf9c16d1a6Dropdowna11c08f61adc2d33c8f8db60e406954354bdf357c58b8a65c66d7c19c8e4d114
  65281c5ac262bf6d81768915a4a77ac0
  c5f7c33631c7deafd5f3bd6bcd1eea2f25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Action5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Another action5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Something else here5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb9aa02a4f45fec1ec76777df05ea7dcabbed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Separated link5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
  929d1f5ca49e04fdcb27f9465b94468916b28748ea4df4d9c2150843fecfba68

【메뉴 제목】

드롭다운 메뉴에서 일련의 작업을 나타내는 제목을 추가할 수 있습니다.

【정렬】

부트스트랩 프레임 중간 및 하단 풀 메뉴 기본값은 왼쪽 정렬입니다. 드롭다운 메뉴가 상위 컨테이너를 기준으로 오른쪽 정렬되도록 하려면 "dropdown-menu-right" 클래스를 추가할 수 있습니다. 이름을 "dropdown-menu"로 지정

c220632b5e888796ad159d12fa43bfcbDropdown headerbed06894275b65c1ab86501b08a632eb

b8ddb9e59aed2cc4ef62bdf2caf180ff이후 기본값은 상위 너비를 채우는 블록 수준 요소입니다. 여기에서 요소의 내용이 너비를 늘리고 왼쪽에서 특정 거리를 갖도록 요소에 대해 inline-block 및 margin-left를 설정해야 합니다. 기본 상태는 hover 상태(:hover) 및 focus 상태(:focus)입니다.

.dropdown-header {
  display: block;
  padding: 3px 20px;
  font-size: 12px;
  line-height: 1.42857143;
  color: #999;
}

위의 두 가지 상태 외에도 드롭다운 메뉴 항목에는 현재 상태(.active)와 비활성화된 상태(.disabled)도 있습니다. 이 두 가지 상태를 사용하려면 해당 메뉴 항목에 해당 클래스 이름을 추가하기만 하면 됩니다

c0a838506a57d6efb82c3faebdcfa64e
  1172180f0ea09fa48126f1bf9c16d1a6Dropdowna11c08f61adc2d33c8f8db60e406954354bdf357c58b8a65c66d7c19c8e4d114
  65281c5ac262bf6d81768915a4a77ac0
  f2d98710ffe286210bb25d6dcee36a5c53aee3cf423ceaf51d11d60f48002773第一部分菜单头部bed06894275b65c1ab86501b08a632eb17107faed89a3c9827b91a8116cd378012127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb17107faed89a3c9827b91a8116cd378012127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb34180452588631f7294f6e20e4d7d79ebed06894275b65c1ab86501b08a632eb53aee3cf423ceaf51d11d60f48002773第二部分菜单头部bed06894275b65c1ab86501b08a632eb17107faed89a3c9827b91a8116cd378012127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
  929d1f5ca49e04fdcb27f9465b94468916b28748ea4df4d9c2150843fecfba68

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