Maison > Article > interface Web > Comment utiliser le plug-in d'amorçage

Comment utiliser le plug-in d'amorçage

(*-*)浩original: 2019-07-19 10:18:504449parcourir

Grâce à l'API Bootstrap Data, la plupart des plug-ins peuvent être déclenchés sans écrire de code.

Il existe deux manières de référencer le plug-in Bootstrap sur votre site : (apprentissage recommandé : Bootstrap didacticiel vidéo )

Référence séparée : utilisez des fichiers *.js individuels de Bootstrap. Certains plugins et composants CSS dépendent d’autres plugins. Si vous référencez des plugins individuellement, assurez-vous d'abord de comprendre les dépendances entre ces plugins.

Compilez (simultanément) les références : utilisez bootstrap.js ou une version minifiée de bootstrap.min.js.

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

Tous les plugins dépendent de jQuery. JQuery doit donc être cité avant le fichier du plugin. Veuillez visiter bower.json pour afficher les versions de jQuery actuellement prises en charge par Bootstrap.

attribut de données

Vous pouvez utiliser tous les plugins Bootstrap simplement via l'API d'attribut de données sans écrire une seule ligne de code JavaScript. Il s'agit de l'API de première classe dans Bootstrap et devrait être votre méthode préférée.

Là encore, il peut y avoir des situations dans lesquelles cette fonctionnalité doit être désactivée. Par conséquent, nous fournissons également une méthode pour désactiver l’API d’attribut de données, c’est-à-dire pour débloquer l’événement lié au document avec l’espace de noms data-api. Tout comme ce qui suit :

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

Si vous devez fermer un plug-in spécifique, il vous suffit d'ajouter le nom du plug-in comme espace de noms avant l'espace de noms data-api, comme indiqué ci-dessous :

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

Exemple : Plug-in de boîte modale

<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>

Pour plus d'articles techniques liés à Bootstrap, veuillez visiter la colonne Tutoriel Bootstrap pour apprendre !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Pourquoi la boîte contextuelle d'amorçage n'a-t-elle aucun contenu ?Article suivant：Pourquoi la boîte contextuelle d'amorçage n'a-t-elle aucun contenu ?

Articles Liés

Voir plus