집 > 기사 > 웹 프론트엔드 > 부트스트랩 플러그인 사용 방법

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

(*-*)浩원래의: 2019-07-19 10:18:504452검색

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：부트스트랩 팝업 상자에 내용이 없는 이유는 무엇입니까?다음 기사：부트스트랩 팝업 상자에 내용이 없는 이유는 무엇입니까?