Organisieren von Daten-[*]-Attributen in Bootstrap

Dieser Artikel sammelt und organisiert relevantes Wissen über das Datenattribut [*] in Bootstrap. Interessierte Freunde sollten einen Blick auf

[1 Datenattribut]

werfen

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

Die gespeicherten (benutzerdefinierten) Daten können im JavaScript der Seite verwendet werden.

data-* Das Attribut besteht aus zwei Teilen:

1. * Der Attributname sollte keine Großbuchstaben enthalten und nach dem Präfix muss mindestens ein Zeichen stehen "Daten-".

2. * 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 kann, und dann können Sie dies tun Produzieren Sie entsprechende Aktionen und Events.

[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 interaktiven Ereignisse festgelegt und dann Javascript und HTML-DOM-Bäume verwendet, um vorhandene Textobjekte zu bedienen und dynamische Effekte und andere Interaktionen zu üben.

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 war Bootstrap geboren.

Um es ganz klar auszudrücken: Früher hatten wir zunächst funktionale Anforderungen und setzten diese dann um. Jetzt sind die Funktionen im Grunde für Sie abgedeckt, die JS-Operationsfunktionen wurden geschrieben und auch die CSS-Stile wurden geschrieben. Wenn Sie sie verwenden möchten, rufen Sie sie einfach gemäß ihren 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 verwenden js-Plug-ins jetzt grundsätzlich diese Routine.) Das class="xxx"-Attribut des

-Tags wird hauptsächlich zur Verwendung des CSS-Stils von Bootstrap und als Klassennamenbezeichner für ein identifizierbares Objekt verwendet. 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） -->
<p class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <p class="modal-dialog">
  <p class="modal-content">
   <p class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
     ×
    </button>
    code。。。
   </p>
  </p><!-- /.modal-content -->
 </p><!-- /.modal -->
</p>

2 data-dismiss

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

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

data-slide-to, data-slide, data -ride ist Wird für Karussellkarussell verwendet.

Das data-slide-Attribut akzeptiert das Schlüsselwort prev oder next, das verwendet wird, um die Position der Folie relativ zur aktuellen Position zu ändern.

Verwenden Sie data-slide-to, um einen rohen Folienindex an das Karussell zu übergeben. data-slide-to="2" verschiebt den Schieberegler auf einen bestimmten Index und der Index beginnt bei 0 zu zählen.

Das data-ride="carousel"-Attribut wird verwendet, um das Karussell so zu markieren, dass es beim Laden der Seite mit der Wiedergabe beginnt.

Das Obige habe ich für alle zusammengestellt in Zukunft für alle hilfreich sein.

Verwandte Artikel:

Detailliertes Beispiel für die Interaktion zwischen Servlet3.0 und reinem Javascript über Ajax

JQuery-Ersetzung des Knotens Elemente Bedienung

Ausführliches Tutorial zur Verwendung von Angular CLI zum Generieren von Angular 5-Projekten

Das obige ist der detaillierte Inhalt vonOrganisieren von Daten-[*]-Attributen in Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!