¿Puede decirme cuál es el sistema o el comportamiento detrás del data-target
atributo utilizado por Bootstrap 3?
Sé que la alternancia de datos se usa para apuntar API JavaScript de Bootstrap de funcionalidad gráfica.
¿Puede decirme cuál es el sistema o el comportamiento detrás del data-target
atributo utilizado por Bootstrap 3?
Sé que la alternancia de datos se usa para apuntar API JavaScript de Bootstrap de funcionalidad gráfica.
Respuestas:
data-target
Bootstrap 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-target
atributo 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 #myModal
en CSS los selectores apuntan a elementos que tienen un id
atributo con el myModal
valor.
Más información sobre el atributo "data-" de HTML5: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes
data-target
acepta un selector de CSS que apunta al elemento relevante.
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".