Bootstrap 基础教程

Bootstrap 插件

Bootstrap-Übergangseffekt-Plugin Bootstrap-Eine-Webseite-erstellen

Bootstrap-Plugin-Übersicht

在前面 布局组件 章节中所讨论到的组件只是个开始。Bootstrap 自带 12 种 jQuery 插件，扩展了功能，可以给站点添加更多的互动。即使您不是一名高级的 JavaScript 开发人员，您也可以开始学习 Bootstrap 的 JavaScript 插件。利用 Bootstrap 数据 API（Bootstrap Data API），大部分的插件可以在不编写任何代码的情况下被触发。

站点引用 Bootstrap 插件的方式有两种：

单独引用：使用 Bootstrap 的个别的 *.js 文件。一些插件和 CSS 组件依赖于其他插件。如果您单独引用插件，请先确保弄清这些插件之间的依赖关系。
编译（同时）引用：使用 bootstrap.js 或压缩版的 bootstrap.min.js。不要尝试同时引用这两个文件，因为 bootstrap.js 和 bootstrap.min.js 都包含了所有的插件。

所有的插件都依赖于 jQuery。因此，必须在插件文件之前引用 jQuery。请访问 bower.json 查看 Bootstrap 当前支持的 jQuery 版本。

data 属性

您可以通过 data 属性 API 使用所有的 Bootstrap 插件，无需编写任何 JavaScript 代码。这是 Bootstrap 的一等 API，也应该是您的首选方式。
然而，在某些情况下可能需要关闭此功能。因此，我们还提供了关闭 data 属性 API 的方法，即通过 data-api 命名空间并绑定在文档上的事件。就像下面这样：
```
$(document).off('.data}}-api')
```
Um ein bestimmtes Plugin zu schließen, genügt es, den Daten-Der API-Namensraum kann durch den Namen des Plugins als Namensraum vor dem API-Namen hinzugefügt werden, wie folgt:
```
$(document).off('.alert.data-api')
```

API in Programmiersprache

Wir bieten für alle Bootstrap-Plugins eine rein JavaScript-basierte API. Alle öffentlich zugänglichen API sind für separate oderkettenförmige Aufrufe geeignet und geben die von ihnen behandelten Elementkollationen zurück (Anmerkung: wie jQuery-Aufrufe). Zum Beispiel:

$(".btn.danger").button("toggle").addClass("fat")

Alle Methoden können ein optionales Optionsobjekt als Parameter akzeptieren, ein Zeichenkettenrepräsentation eines bestimmten Verhaltens oder ohne jegliche Parameter (in diesem Fall wird das Plugin mit Standardverhalten initialisiert), wie folgt:

//　Initialisiert als Standardverhalten
$("#myModal").modal()　　　　
　//　Initialisiert als nicht unterstützende Tastatur　　　　　　　　　　　　　　　
$("#myModal").modal({ keyboard: false })　　
//　Initialisiert und ruft sofort show auf
$("#myModal").modal('show')

Jedes Plugin in Constructor Die Eigenschaft enthüllt auch den ursprünglichen Konstruktor:$.fn.popover.Constructor. Wenn Sie ein Beispiel für ein bestimmtes Plugin erhalten möchten, können Sie es direkt über das Seitenelement abrufen:

　$('[rel=popover]').data('popover').

Vermeiden Sie Namensraumkollisionen

Manchmal können Bootstrap-Plugins möglicherweise mit anderen UI-Frameworks verwendet werden. In diesem Fall kann es zu Namensraumkollisionen kommen. Wenn dies der Fall ist, können Sie den Plugin- .noConflict Die Methode kehrt ihren ursprünglichen Wert zurück.

//　Gibt den Wert zurück, der vor der Zuweisung an $.fn.button war
var bootstrapButton = $.fn.button.noConflict()　
//　Gibt Bootstrap-Funktionen für $().bootstrapBtn　　　　　　　　　　　　　　　　　　　　　　　　　　　
$.fn.bootstrapBtn = bootstrapButton

Ereignis

Bootstrap bietet für die einzigartigen Verhaltensweisen der meisten Plugins benutzerdefinierte Ereignisse. Im Allgemeinen haben diese Ereignisse zwei Formen:

Die Verbundenen WortformenDas wird am Anfang des Ereignisses ausgelöst. Zum Beispiel Beispiel: showDie Verbundenen Wortformen bieten preventDefault 功能。这使得在事件开始前可以停止操作的执行。
```
$('#myModal').on('show.bs.modal', function (e) {
//　阻止模态框的显示
　　if (!data) return e.preventDefault()　
)
```
过去分词形式：动作执行完毕后将被触发。例如 ex: shown.

Bootstrap-Übergangseffekt-Plugin Bootstrap-Eine-Webseite-erstellen