¿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.

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


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".

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.