¿Qué es el atributo `data-target` en Bootstrap 3?

93

¿Puede decirme cuál es el sistema o el comportamiento detrás del data-targetatributo utilizado por Bootstrap 3?

Sé que la alternancia de datos se usa para apuntar API JavaScript de Bootstrap de funcionalidad gráfica.

mujeres oscuras
fuente

Respuestas:

113

data-targetBootstrap lo utiliza para hacer su vida más fácil. No es necesario (en su mayoría) escribir una sola línea de Javascript para usar sus componentes JavaScript prefabricados .

El data-targetatributo debe contener un selector de CSS que apunte al elemento HTML que se cambiará.

Código de ejemplo modal de 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>

En este ejemplo, el botón tiene data-target="#myModal", si hace clic en él, <div id="myModal">...</div>se modificará (en este caso se desvaneció). Esto sucede porque #myModalen CSS los selectores apuntan a elementos que tienen un idatributo con el myModalvalor.

Más información sobre el atributo "data-" de HTML5: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

Pascalmh
fuente
esto es como un motor CSS selector y nada más?
darkomen
@miltone - exactamente, no me gusta. data-targetacepta un selector de CSS que apunta al elemento relevante.
PhistucK
18

La palanca le dice a Bootstrap qué hacer y el objetivo le dice a Bootstrap qué elemento se abrirá. Entonces, cada vez que se haga clic en un enlace como ese, aparecerá un modal con una identificación de "basicModal".

usuario3098847
fuente