부트스트랩 플러그인 사용 방법-부트스트랩 튜토리얼-php.cn

부트스트랩 플러그인 사용 방법

(*-*)浩

풀어 주다： 2019-07-19 10:18:50

원래의

4455명이 탐색했습니다.

Bootstrap Data API를 사용하면 코드를 작성하지 않고도 대부분의 플러그인을 실행할 수 있습니다.

사이트에서 부트스트랩 플러그인을 참조하는 방법에는 두 가지가 있습니다. ( 추천 학습: Bootstrap 동영상 튜토리얼)

별도 참조: Bootstrap의 개별 *.js 파일을 사용하세요. 일부 플러그인과 CSS 구성요소는 다른 플러그인에 종속됩니다. 플러그인을 개별적으로 참조하는 경우 먼저 해당 플러그인 간의 종속성을 이해해야 합니다.

인용을 위한 컴파일(동시): bootstrap.js 또는 bootstrap.min.js의 축소된 버전을 사용하세요.

不要尝试同时引用这两个文件，因为 bootstrap.js 和 bootstrap.min.js 都包含了所有的插件。

로그인 후 복사

모든 플러그인은 jQuery에 의존합니다. 따라서 jQuery는 플러그인 파일 앞에 인용되어야 합니다. 현재 Bootstrap에서 지원하는 jQuery 버전을 보려면 bower.json을 방문하세요.

data attribute

JavaScript 코드 한 줄도 작성하지 않고 데이터 속성 API를 통해 모든 Bootstrap 플러그인을 사용할 수 있습니다. . 이것은 부트스트랩의 최고 수준 API이며 선호하는 방법이어야 합니다.

그리고 어떤 경우에는 이 기능을 꺼야 할 수도 있습니다. 따라서 데이터 속성 API를 끄는 방법, 즉 data-api 네임스페이스를 사용하여 문서에 바인딩된 이벤트를 차단 해제하는 방법도 제공합니다. 다음과 같습니다:

$(document).off('.data-api')

로그인 후 복사

특정 플러그인을 닫아야 하는 경우 아래와 같이 data-api 네임스페이스 앞에 플러그인 이름을 네임스페이스로 추가하기만 하면 됩니다. : #🎜🎜 #

$(document).off('.alert.data-api')

로그인 후 복사

예: 모달 상자 플러그인

<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 模态框（Modal）插件</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<h2>创建模态框（Modal）</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	开始演示模态框
</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					模态框（Modal）标题
				</h4>
			</div>
			<div class="modal-body">
				在这里添加一些文本
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭
				</button>
				<button type="button" class="btn btn-primary">
					提交更改
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
</body>
</html>

로그인 후 복사

더 많은 Bootstrap 관련 기술 기사를 보려면

Bootstrap 튜토리얼 열을 방문하여 알아보세요!

위 내용은 부트스트랩 플러그인 사용 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!