Was ist das Attribut "Datenziel" in Bootstrap 3?

93

Können Sie mir sagen, welches System oder Verhalten hinter data-targetdem von Bootstrap 3 verwendeten Attribut steht?

Ich weiß, dass Data-Toggle verwendet wird, um API-JavaScript von Bootstrap mit grafischer Funktionalität zu zielen.

twitter-bootstrap-3 Darkomen
quelle

Antworten:

112

data-targetwird von Bootstrap verwendet, um Ihnen das Leben zu erleichtern. Sie müssen (meistens) keine einzige Zeile Javascript schreiben, um die vorgefertigten JavaScript-Komponenten zu verwenden .

Das data-targetAttribut sollte einen CSS-Selektor enthalten, der auf das zu ändernde HTML-Element verweist.

Modaler Beispielcode aus BS3 :

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  [...]
</div>

In diesem Beispiel wurde die Schaltfläche data-target="#myModal", wenn Sie darauf klicken, <div id="myModal">...</div>geändert (in diesem Fall eingeblendet). Dies geschieht, weil #myModalin CSS-Selektoren auf Elemente verweisen, die ein idAttribut mit dem myModalWert haben.

Weitere Informationen zum HTML5-Attribut "data-": https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

Pascalmh
quelle
Dies ist wie eine Selektor-CSS-Engine und nichts anderes?
Darkomen
@miltone - genau, nicht wie. data-targetakzeptiert einen CSS-Selektor, der auf das relevante Element verweist.
PhistucK
17

Der Umschalter teilt Bootstrap mit, was zu tun ist, und das Ziel teilt Bootstrap mit, welches Element geöffnet werden soll. Wenn Sie also auf einen solchen Link klicken, wird ein Modal mit der ID "basicModal" angezeigt.

user3098847
quelle