부트스트랩 드롭다운 메뉴 튜토리얼 예시-HTML 튜토리얼-php.cn

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

零下一度

풀어 주다： 2017-07-18 16:34:21

원래의

1735명이 탐색했습니다.

이 장에서는 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>

로그인 후 복사


  
  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>

로그인 후 복사