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

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

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

예제

<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"이라는 컨테이너를 사용하여 전체 드롭다운 메뉴 요소를 래핑합니다

<div class="dropdown"></div>

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

<button class="btn dropdown-toggle" type="button" data-toggle="dropdown">

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

<ul class="dropdown-menu" role="menu">

  
  
  ActionAnother actionSomething else here

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

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Dropup<span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li>
  </ul></div>

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 프레임워크의 드롭다운 메뉴는 드롭다운 메뉴를 제공합니다. 두 개의 드롭다운 메뉴 그룹이 있다고 가정하면 그룹 사이에 빈

를 추가하고 이

에 클래스 이름을 추가하여 드롭다운 구분선을 추가할 수 있습니다.

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

<li role="separator" class="divider"></li>

  Dropdown
  
  
Action
Another action
Something else here
<li role="separator" class="divider"></li>
Separated link
  

【메뉴 제목】

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

【정렬】

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

<li class="dropdown-header">Dropdown header</li>

이후 기본값은 상위 너비를 채우는 블록 수준 요소입니다. 여기에서 요소의 내용이 너비를 늘리고 왼쪽에서 특정 거리를 갖도록 요소에 대해 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)도 있습니다. 이 두 가지 상태를 사용하려면 해당 메뉴 항목에 해당 클래스 이름을 추가하기만 하면 됩니다

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Dropdown<span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"><li role="presentation" class="dropdown-header">第一部分菜单头部</li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li><li role="presentation" class="divider"></li><li role="presentation" class="dropdown-header">第二部分菜单头部</li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  </ul></div>

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

본 웹사이트의 성명

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