Was bedeuten Daten im Bootstrap?

In Bootstrap bedeutet „Daten“, dass benutzerdefinierte Attribute im Allgemeinen mit „Daten“ beginnen. Durch die Anwendung von Datenattributen können HTML-Tags implizit Daten anhängen, und Javascript kann Lese- und Schreibvorgänge ausführen.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Bootstrap-Version 3.3.7, DELL G3-Computer

Was bedeuten Daten im Bootstrap?

【1 Datenattribut】

Das Datenattribut ist ein neues Attribut von HTML5. Entwickler können ihren Tags frei Attribute hinzufügen und Daten speichern. Solche benutzerdefinierten Attribute beginnen im Allgemeinen mit „data-“.

Die gespeicherten (benutzerdefinierten) Daten können vom JavaScript der Seite abgerufen und genutzt werden.

data-*-Attribute bestehen aus zwei Teilen:

• * Der Attributname sollte keine Großbuchstaben enthalten und muss mindestens ein Zeichen nach dem Präfix „data-“ haben.

• * Der Attributwert kann eine beliebige Zeichenfolge sein.

Um es ganz klar auszudrücken: Es handelt sich um die Anwendung von Datenattributen, sodass HTML-Tags implizit einige Daten anhängen können und Javascript diese Attributdaten lesen/schreiben und dann entsprechende Aktionen und Ereignisse ausführen kann.

【2 Datenattribute in Bootstrap】

Auf der offiziellen Website gibt es eine Einführung, dass Sie alle Bootstrap-Plug-Ins einfach über die Datenattribut-API verwenden können, ohne eine Zeile JavaScript-Code schreiben zu müssen. Dies ist eine erstklassige API in Bootstrap und sollte Ihre erste Wahl sein.

In der Vergangenheit haben wir bei der Verwendung von nativem Javascrpt zunächst das Front-End-Stillayout und die erforderlichen Interaktionsereignisse bestimmt und dann Javascript und HTML-DOM-Bäume verwendet, um vorhandene Textobjekte zu bedienen und Interaktionen wie dynamische Effekte zu erzielen.

Später stellte Facebook fest, dass viele grundlegende Webseiteneffekte häufig verwendet werden, z. B. Dropdown-Menüs, Falten, Modalboxen usw. Warum nicht diese häufig verwendeten Modelle in eine Reihe von Standardmodellen extrahieren und dann Nutzungsregeln formulieren? Verwenden Sie sie bei der Verwendung einfach direkt gemäß diesen Regeln, und so wurde Bootstrap geboren.

Mit anderen Worten: Früher hatten wir zunächst funktionale Anforderungen und setzten diese dann um. Jetzt sind die Funktionen im Wesentlichen abgedeckt und für Sie geschrieben, und der CSS-Stil wurde ebenfalls geschrieben. Wenn Sie ihn verwenden möchten, rufen Sie ihn einfach direkt gemäß seinen Regeln auf. Um die Vielfalt zu erhöhen, können die Funktionen in Bootstrap.js unterschiedliche Parameterwerte haben, die entsprechend den Attributen festgelegt werden, die Sie den Tags zuweisen. (Tatsächlich folgen jetzt js-Plug-ins grundsätzlich dieser Routine, ebenso wie verschiedene Java-Klassenbibliotheken.) Das class="xxx"-Attribut des

-Tags wird hauptsächlich zur Verwendung des CSS-Stils von Bootstrap

und als identifizierbare Klasse verwendet Objekte Namens-ID. Das data-[xx]="yy"-Attribut des

-Tags wird hauptsächlich zum Verwenden und Aufrufen von Bootstrap-Komponenten und Plug-Ins verwendet, dh zum Erzielen einiger interaktiver Effekte mithilfe von bootstrap.js.

【3 allgemeine Bootstrap-Datenattribute】

1 Datenumschaltung

Datenumschaltung bezieht sich darauf, welcher Ereignistyp ausgelöst wird. Die am häufigsten verwendeten sind wie folgt.

data-toggle="dropdown"//下拉菜单
data-toggle="model" //模态框事件
data-toggle="tooltip"//提示框事件
data-toggle="tab"//标签页
data-toggle="collapse"//折叠
data-toggle="popover"//弹出框
data-toggle="button"//按钮事件

Allgemeine Ereignisse wirken sich auf ein Etikettenobjekt aus. Wenn es sich um ein anderes Etikettenobjekt handelt, müssen Sie data-target verwenden, um auf das Etikettenziel des Ereignisses zu verweisen. Daher werden data-logg und data-target manchmal zusammen verwendet. Wie folgt

<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>
                code。。。
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

2 data-dismiss

Wird häufig in modalen Fenstern verwendet, um das modale Fenster data-dismiss="modal" zu schließen

3 data-slide-to, data-slide, data-ride

data -slide- to, data-slide und data-ride werden für Karussellkarussells verwendet.

Verwandte Empfehlungen: Bootstrap-Tutorial

Das obige ist der detaillierte Inhalt vonWas bedeuten Daten im Bootstrap?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!