Bootstrap의 드롭다운 메뉴 구성 요소에 대한 심층 분석

관련 권장 사항: "bootstrap Tutorial"

부트스트랩 프레임워크의 드롭다운 메뉴 구성 요소는 버전에 따라 독립적인 구성 요소입니다. 해당 파일은

less입니다. 파일은 다음과 같습니다. dropdowns.less

sass에 해당하는 소스 코드 파일은 _dropdowns.scss

부트스트랩에서 구축한 드롭다운 메뉴를 사용할 때 부트스트랩 프레임워크에서 제공하는 bootstrap.js 파일을 호출해야 합니다. . 컴파일되지 않은 버전의 경우 js 아래에 dropdown.js라는 파일이 있으며 이 파일을 호출할 수도 있습니다. 압축 파일 bootstrap.min.js

을 호출할 수도 있습니다. 부트스트랩 구성요소의 대화형 효과는 모두 jQuery 라이브러리에서 작성된 플러그인에 의존하므로 bootstrap.min.js를 사용하기 전에 jQuery.min.js를 로드해야 합니다.

공식 웹사이트의 예:

<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">

下拉菜单

<span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <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>

자세한 설명:

1 전체 드롭다운 메뉴 요소를 래핑하려면 메뉴를 열고 클래스 이름 드롭다운 토글 및 사용자 정의 데이터 토글 속성을 정의하고 값은 가장 바깥쪽 컨테이너 클래스 이름

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

3과 일치해야 합니다. 드롭다운 메뉴 항목은 ul 목록을 사용하고 dropdown이라는 클래스를 정의합니다. -menu

data-toggle=“dropdown”

in bootstrap 드롭다운 메뉴 항목은 기본적으로 숨겨져 있습니다. 드롭다운 메뉴 설정 표시: none

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

사용자가 상위 메뉴를 클릭하면 드롭다운 메뉴가 표시됩니다. 다시 말하지만, 드롭다운 메뉴는 계속 숨겨집니다

자세한 설명:

js를 통해 상위 컨테이너 p.dropdown을 추가하거나 열어 표시 또는 숨기기를 제어합니다. 즉, 기본적으로 p.dropdown에는 클래스 이름이 열려 있지 않습니다. 사용자가 처음 한 번 클릭하면 p.dropdown은 사용자가 다시 클릭하면 클래스 이름이 열립니다. p.dropdown 컨테이너의 이름은 제거됩니다

.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); }

드롭다운 구분선

드롭다운 메뉴에 두 개의 그룹이 있다고 가정하면 그룹 사이에 빈

를 추가하고 클래스 이름을 추가할 수 있습니다. 이 li에 piderl을 추가하면 드롭다운 구분 기호를 추가하는 기능을 실현할 수 있습니다

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

메뉴 제목

이 그룹을 더 아름답게 만들기 위해 당연히 각 그룹에 헤더 제목을 추가할 수도 있습니다.

.dropdown-menu .divider {

  height: 1px;

  margin: 9px 0;

  overflow: hidden;

  background-color: #e5e5e5; 
}

css 스타일:

<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="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" class="divider"></li> <li role="presentation" class="dropdown-header">第二部分菜单头部</li>

…

<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> </ul> </div>

부트스트랩 프레임워크의 드롭다운 메뉴는 기본적으로 왼쪽 정렬됩니다. 드롭다운 메뉴가 상위 컨테이너를 기준으로 오른쪽 정렬되도록 하려면 .dropdown 클래스를 추가할 수 있습니다. -dropdown-menu의 menu-right 참고, 버전 v3.1.0부터 드롭다운 메뉴에 .pull-right 클래스를 사용하는 것이 더 이상 권장되지 않습니다

.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">

  下拉菜单
  
<span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">

   …
  
</ul> </div>

메뉴 항목 상태

기본 상태 드롭다운 메뉴에는 정지 상태: hover 및 focus 상태: focus

.dropdown-menu-right {

  right: 0;

  left: auto;
   }

.dropdown{
float: left; 
}

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

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {

  color: #262626;

  text-decoration: none;

  background-color: #f5f5f5; }

CSS:

<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="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" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> </ul> </div>

더 많은 프로그래밍 관련 지식을 보려면

프로그래밍 비디오

를 방문하세요! !

위 내용은 Bootstrap의 드롭다운 메뉴 구성 요소에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!