Heim > Artikel > Web-Frontend > So verwenden Sie das Bootstrap-Plug-in
So verwenden Sie das Bootstrap-Plug-in
- (*-*)浩Original
- 2019-07-19 10:18:504465Durchsuche
Mithilfe der Bootstrap Data API können die meisten Plug-Ins ausgelöst werden, ohne dass Code geschrieben werden muss.
Es gibt zwei Möglichkeiten, auf das Bootstrap-Plug-in auf Ihrer Website zu verweisen: (empfohlenes Lernen: Bootstrap Video-Tutorial )
Separate Referenz: Verwenden Sie einzelne *.js-Dateien von Bootstrap. Einige Plugins und CSS-Komponenten sind von anderen Plugins abhängig. Wenn Sie Plugins einzeln referenzieren, stellen Sie zunächst sicher, dass Sie die Abhängigkeiten zwischen diesen Plugins verstehen.
Referenzen (gleichzeitig) kompilieren: Verwenden Sie bootstrap.js oder eine minimierte Version von bootstrap.min.js.
不要尝试同时引用这两个文件，因为 bootstrap.js 和 bootstrap.min.js 都包含了所有的插件。
Alle Plugins sind auf jQuery angewiesen. Daher muss jQuery vor der Plugin-Datei in Anführungszeichen gesetzt werden. Bitte besuchen Sie bower.json, um die derzeit von Bootstrap unterstützten jQuery-Versionen anzuzeigen.
Datenattribut
Sie können alle Bootstrap-Plugins einfach über die Datenattribut-API verwenden, ohne eine einzige Zeile JavaScript-Code schreiben zu müssen. Dies ist die erstklassige API in Bootstrap und sollte Ihre bevorzugte Methode sein.
Andererseits kann es Situationen geben, in denen diese Funktion deaktiviert werden muss. Daher stellen wir auch eine Methode zum Deaktivieren der Datenattribut-API bereit, d. h. zum Entsperren des an das Dokument gebundenen Ereignisses mit dem Namespace data-api. Genau wie das Folgende:
$(document).off('.data-api')
Wenn Sie ein bestimmtes Plug-In schließen müssen, müssen Sie nur den Namen des Plug-Ins als Namespace vor dem Data-API-Namespace hinzufügen, wie unten gezeigt:
$(document).off('.alert.data-api')
Beispiel: Modal-Box-Plug-in
<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"> × </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>
Weitere technische Artikel zum Thema Bootstrap finden Sie in der Spalte Bootstrap-Tutorial, um mehr zu erfahren!
Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Bootstrap-Plug-in. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!