부트스트랩에서 드롭다운 메뉴를 실행하는 방법

주의, 여러분, Bootstrap 프레임워크의 드롭다운 메뉴 구성 요소는 버전에 따라 해당 파일은 다음과 같습니다:

EMALESS 버전: 해당 소스 코드 파일은 dropdowns.less입니다. # 🎜🎜#🙌 Sass 버전: 해당 소스 코드 파일은 _dropdowns.sass

🙌 컴파일된 부트스트랩 버전: bootstrap.css 파일의 3004~3130행을 확인하세요

# 🎜🎜 #Bootstrap 프레임워크의 드롭다운 메뉴를 사용할 때 Bootstrap 프레임워크에서 제공하는 bootstrap.js 파일을 호출해야 합니다. 물론, 컴파일되지 않은 버전을 사용한다면 js 폴더에 "dropdown.js"라는 파일을 찾을 수 있습니다. 이 js 파일을 호출할 수도 있습니다. 그러나 튜토리얼에서는 압축된 "bootstrap.min.js" 파일을 일률적으로 호출합니다: 코드는 다음과 같습니다:

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

특수 설명: # 🎜🎜#

Bootstrap의 구성 요소 상호 작용 효과는 모두 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>

관련 권장 사항: "

bootstrap 시작하기 튜토리얼

"

#🎜 🎜#

사용 방법:

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

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

2를 사용합니다. ;button>버튼은 상위 메뉴로 사용되며 클래스 이름 "dropdown-toggle" 및 사용자 정의 "data-toggle" 속성을 정의하며 값은 가장 바깥쪽 컨테이너 클래스 이름과 일치해야 합니다. # 🎜🎜#

data-toggle="dropdown"

# 🎜🎜#3. 드롭다운 메뉴 항목은 ul 목록을 사용하고 "dropdown-menu"라는 클래스를 정의합니다. 이 예는

<ul class="dropdown-menu">

Example

 

 
 选择你喜欢的水果
 
 
 

 
苹果
 
香蕉
 
梨
 
桃
 
 
 
 <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

입니다. #🎜 🎜#

위 내용은 부트스트랩에서 드롭다운 메뉴를 실행하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!