Bootstrap 플러그 인[1]
아 날로 그 대화 상자
드 롭 다운 메뉴
스크롤 감청
1.아 날로 그 대화 상자
<!-- href="#login" id="login" -->
<!-- data-toggle="modal" ， -->
<a href="#login" class="btn" data-toggle="modal" data-backdrop="false> </a> <!-- modal --> <!-- hide --> <!-- fade --> <div id="login" class="modal hide fade">
<!-- modal-header -->
<div class="modal-header">
<!-- close -->
<!-- data-dismiss="modal" -->
<button class="close" data-dismiss="modal">×</button>
<h3> </h3>
</div>
<!-- modal-body -->
<div class="modal-body">
<label for="user"></label>
<input type="text" name="user">
</div>
<!-- -->
<div class="modal-footer">
<button class="btn btn-success"> </button>
</div>
</div>호출:첫 번 째:data-toggle="modal"방법 을 사용 합 니 다.위 는 두 번 째 입 니 다.JS 호출 HTML 을 사용 하여 data-toggle="modal"만 제거 합 니 다.
PS:show,showed,hide,hidden 닫 기 대화 상 자 를 여 는 4 개의 이벤트
하향 조정
<a href="#login" class="btn" id="login_a" > </a>호출:첫 번 째:data-toggle="dropdown"방법 두 번 째:JS 호출 HTML 을 사용 하여 data-toggle="dropdown"만 제거 합 니 다.
$(function () {
$("#login").on("show", function () {
console.log(" ");
});
$("#login").on("shown", function () {
console.log(" ");
});
$("#login").on("hide", function () {
console.log(" ");
});
$("#login").on("hidden", function () {
console.log(" ");
});
$("#login_a").click(function () {
$("#login").modal({
//
backdrop : false,
// ESC
keyborard : false,
});
});
})<div class="dropdown">
<a href="#" class="btn" data-toggle="dropdown"> <i class="caret"></i></a>
<ul class="dropdown-menu">
<li><a href="#" > </a></li>
<li><a href="#" > </a></li>
<li><a href="#" > </a></li>
</ul>
</div>스크롤 감청
$(function () {
//
$(".btn").dropdown();
});CSS 스타일
<!-- id="menu" data-target="#menu" -->
<!-- navbar navbar-inner nav navbar-fixed-top -->
<div id="menu" class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="nav">
<li><a href="#1"> 1</a></li>
<li><a href="#2"> 2</a></li>
<!-- dropdown dropdown-menu -->
<li class="dropdown">
<!-- data-toggle="dropdown" -->
<a href="#" data-toggle="dropdown"> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#3"> 3</a></li>
<li><a href="#4"> 4</a></li>
<li><a href="#5"> 5</a></li>
</ul>
</li>
</div>
</div>
</div>
<!-- data-spy="scroll" data -->
<!-- data-target="#menu" -->
<!-- data-offset="30" -->
<div class="scrollspy" data-spy="scroll" data-target="#menu" data-offset="30">
<h3 id="1"> 1</h3>
<p><img src="img/1.jpg"></p>
<h3 id="2"> 2</h3>
<p><img src="img/2.jpg"></p>
<h3 id="3"> 3</h3>
<p><img src="img/3.jpg"></p>
<h3 id="4"> 4</h3>
<p><img src="img/4.jpg"></p>
<h3 id="5"> 5</h3>
<p><img src="img/5.jpg"></p>
</div>호출:첫 번 째:data-py="scroll"방법 을 사용 합 니 다.위 는 두 번 째 입 니 다.JS 호출 HTML 을 사용 하여 data-py="scroll"만 제거 합 니 다.
<body data-spy="scroll" data-target="#navbar" data-offset="0">
<div id="navbar">
<ul class="nav nav-pills nav-stacked">
<li><a href="#1"> 1</a></li>
<li><a href="#2"> 2</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown"> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#3"> 3</a></li>
<li><a href="#4"> 4</a></li>
<li><a href="#5"> 5</a></li>
</ul>
</li>
</ul>
</div>
<!-- data-spy="scroll" data -->
<!-- data-target="#menu" -->
<!-- data-offset="30" -->
<div class="scrollspy" >
<h3 id="1"> 1</h3>
<p><img src="img/1.jpg"></p>
<h3 id="2"> 2</h3>
<p><img src="img/2.jpg"></p>
<h3 id="3"> 3</h3>
<p><img src="img/3.jpg"></p>
<h3 id="4"> 4</h3>
<p><img src="img/4.jpg"></p>
<h3 id="5"> 5</h3>
<p><img src="img/5.jpg"></p>
</div>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
부트스트랩 5 스티커Sticky는 페이지의 특정 영역에서 요소를 잠글 수 있도록 하는 구성 요소입니다. 수동 설치(zip 패키지) 부트스트랩 이미지 구성 요소를 활용하고 프로젝트에서 사용하려면 먼저 을 설치해야 합니다. MDB CLI ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
