찾다

집 >웹 프론트엔드 >HTML 튜토리얼 >Bootstrap 드롭다운 메뉴 예제에 대한 자세한 설명

Bootstrap 드롭다운 메뉴 예제에 대한 자세한 설명

零下一度
零下一度원래의
2017-07-03 11:03:281459검색

이전 단어

　웹 페이지와 상호 작용할 때 컨텍스트 메뉴 또는 숨겨진/표시 메뉴 항목이 필요한 경우가 많습니다. 부트스트랩은 기본적으로 링크 목록을 표시하기 위한 전환 가능한 컨텍스트 메뉴를 제공합니다. 또한 다양한 대화형 상태의 메뉴 표시는 자바스크립트 플러그인과 함께 사용해야 합니다. 이번 글에서는 Bootstrap 드롭다운 메뉴 사용법을 자세히 소개하겠습니다

Bootstrap 프레임워크의 드롭다운 메뉴를 사용할 때에는 Bootstrap 프레임워크에서 제공하는 bootstrap.js 파일을 호출해야 합니다. 물론, 컴파일되지 않은 버전을 사용한다면 js 폴더에서 "dropdown.js"라는 파일을 찾을 수 있고, 이 js 파일을 호출할 수도 있습니다

부트스트랩의 컴포넌트 상호작용 효과는 모두 jQuery 라이브러리를 기반으로 작성되었기 때문입니다. 플러그인이므로 효과를 생성하려면 bootstrap.js를 사용하기 전에 jquery.js를 로드해야 합니다

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css?1.1.11" rel="stylesheet"></head><body><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js?1.1.11"></script><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js?1.1.11"></script></body></html>

기본 사용법

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

부트스트랩 프레임워크의 드롭다운 메뉴 구성요소, 사용자가 클릭할 때 "드롭다운 메뉴" 기본 스타일이 "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 프레임워크의 드롭다운 메뉴는 드롭다운을 제공합니다. -다운 구분 기호, 두 개의 드롭다운 메뉴 그룹이 있다고 가정하면 그룹 사이에 빈
  • 를 추가하고 이
  • 에 클래스 이름을 추가하여 드롭다운 메뉴 그룹을 추가할 수 있습니다. Divider

    .dropdown-menu .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}
    <li role="separator" class="divider"></li>
    
  
  


    【메뉴 제목】

    제목을 추가하여 드롭다운 메뉴에서 일련의 작업을 나타낼 수 있습니다 

    <li class="dropdown-header">Dropdown header</li>
    .dropdown-header {
  display: block;
  padding: 3px 20px;
  font-size: 12px;
  line-height: 1.42857143;
  color: #999;
}
    <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>


    【정렬】

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

    .dropdown-menu-right {
  right: 0;
  left: auto;
}
    이후 기본값은 상위 너비를 채우는 블록 수준 요소입니다. 여기에서 요소의 내용이 너비를 늘리고 왼쪽에서 일정 거리를 갖도록 요소에 대해 inline-block 및 margin-left를 설정해야 합니다

        display: inline-block;
    margin-left: 60px;
    <div class="dropdown" style="display: inline-block;margin-left: 60px;">
  <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 dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1"><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"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li><li role="presentation" class="divider"></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  </ul></div>


    【메뉴 항목 상태】

    드롭다운 메뉴 항목 기본 상태는 마우스 오버 상태(:hover)와 포커스 상태(:focus)입니다. 

    .dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: #262626;
  text-decoration: none;
  background-color: #f5f5f5;
}
    위의 두 가지 상태 외에도 드롭다운 메뉴 항목에도 현재 상태(.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="active"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></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="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  </ul></div>


    • 위 내용은 Bootstrap 드롭다운 메뉴 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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

    관련 기사

    더보기