부트스트랩 드롭다운 메뉴 튜토리얼 예시
- 零下一度원래의
- 2017-07-18 16:34:211780검색
이 장에서는 Bootstrap 클래스를 사용하여 버튼에 드롭다운 메뉴를 추가하는 방법을 설명합니다. 버튼에 드롭다운 메뉴를 추가하려면 버튼과 드롭다운 메뉴를 .btn-group 에 배치하면 됩니다. 또한 f092556db850dedfd562431d5552770054bdf357c58b8a65c66d7c19c8e4d114을 사용하여 버튼이 드롭다운 메뉴로 작동함을 나타낼 수도 있습니다.
다음 예는 기본적이고 간단한 버튼 드롭다운 메뉴를 보여줍니다.
예제
<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"이라는 컨테이너를 사용하여 전체 드롭다운 메뉴 요소를 래핑합니다
c0a838506a57d6efb82c3faebdcfa64e16b28748ea4df4d9c2150843fecfba68
2. f83a72b083183cd7ada5c1ff71f3c3ad 버튼을 상위 메뉴로 설정하고 클래스 이름 "dropdown-toggle" 및 사용자 정의 "data-toggle" 속성을 정의하며 값은 가장 바깥쪽 컨테이너 클래스 이름
8af15fa9ce0b1cee92d5ee57b078822f
3과 일치해야 합니다. 메뉴 항목은 ul 목록을 사용하고 클래스 이름은 "dropdown-menu"
ae363fd8bc2e4ee3b3446338ba23f464
ActionAnother actionSomething else here
4입니다. 드롭다운 메뉴의 상위 요소에 .dropup 클래스를 설정하면 다음을 만들 수 있습니다. 메뉴 팝업(기본값은 팝업)
14481b0d0ba7c394e2501a352872843d 1172180f0ea09fa48126f1bf9c16d1a6Dropupa11c08f61adc2d33c8f8db60e406954354bdf357c58b8a65c66d7c19c8e4d114 65281c5ac262bf6d81768915a4a77ac0 c5f7c33631c7deafd5f3bd6bcd1eea2f25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Action5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Another action5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Something else here5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b94468916b28748ea4df4d9c2150843fecfba68
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 프레임워크의 드롭다운 메뉴는 드롭다운 메뉴를 제공합니다. 두 개의 드롭다운 메뉴 그룹이 있다고 가정하면 그룹 사이에 빈 25edfb22a4f469ecb59f1190150159c6를 추가하고 이 25edfb22a4f469ecb59f1190150159c6에 클래스 이름을 추가하여 드롭다운 구분선을 추가할 수 있습니다.
.dropdown-menu .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}9aa02a4f45fec1ec76777df05ea7dcabbed06894275b65c1ab86501b08a632eb
c0a838506a57d6efb82c3faebdcfa64e 1172180f0ea09fa48126f1bf9c16d1a6Dropdowna11c08f61adc2d33c8f8db60e406954354bdf357c58b8a65c66d7c19c8e4d114 65281c5ac262bf6d81768915a4a77ac0 c5f7c33631c7deafd5f3bd6bcd1eea2f25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Action5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Another action5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Something else here5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb9aa02a4f45fec1ec76777df05ea7dcabbed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Separated link5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b94468916b28748ea4df4d9c2150843fecfba68
【메뉴 제목】
드롭다운 메뉴에서 일련의 작업을 나타내는 제목을 추가할 수 있습니다.
c220632b5e888796ad159d12fa43bfcbDropdown headerbed06894275b65c1ab86501b08a632eb
b8ddb9e59aed2cc4ef62bdf2caf180ff이후 기본값은 상위 너비를 채우는 블록 수준 요소입니다. 여기에서 요소의 내용이 너비를 늘리고 왼쪽에서 특정 거리를 갖도록 요소에 대해 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)도 있습니다. 이 두 가지 상태를 사용하려면 해당 메뉴 항목에 해당 클래스 이름을 추가하기만 하면 됩니다
c0a838506a57d6efb82c3faebdcfa64e 1172180f0ea09fa48126f1bf9c16d1a6Dropdowna11c08f61adc2d33c8f8db60e406954354bdf357c58b8a65c66d7c19c8e4d114 65281c5ac262bf6d81768915a4a77ac0 f2d98710ffe286210bb25d6dcee36a5c53aee3cf423ceaf51d11d60f48002773第一部分菜单头部bed06894275b65c1ab86501b08a632eb17107faed89a3c9827b91a8116cd378012127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb17107faed89a3c9827b91a8116cd378012127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb34180452588631f7294f6e20e4d7d79ebed06894275b65c1ab86501b08a632eb53aee3cf423ceaf51d11d60f48002773第二部分菜单头部bed06894275b65c1ab86501b08a632eb17107faed89a3c9827b91a8116cd378012127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b94468916b28748ea4df4d9c2150843fecfba68
위 내용은 부트스트랩 드롭다운 메뉴 튜토리얼 예시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!