Question

Hola a todos!
He encontrado en Internet que con Bootstrap se puede hacer lo que se muestra en este ejemplo: http://codepen.io/ibanez182/pen/WxKABq/
En el ejemplo no se escribió ninguna linea de código Javascript, solo se utilizarón los atributos HTML: data-toggle, data-target, aria-expanded y aria-controls. No entiendo bien como funcionan pero me ha interesado mucho que se pueda "programar" de esta manera. Mis preguntas son: ¿Cuales son todos esos atributos? ¿Cuales son las funciones de cada uno de esos?. En Internet no encontré información sobre esos atributos, pero se que son "HTML5 custom attributes" y se les puede dar la funcionalidad que uno quiera. Bootstrap usa unos cuantos. En definitiva. ¿Donde podría conseguir más información al respecto? Saludos!

Answer 1

Hola @pedrourday,

Los atributos aria- y data- son atributos personalizados de HTML, así que no hay una lista exhaustiva de ellos: tienen el nombre que más le guste al que los use.

Luego, hay una afirmación equivocada en tu pregunta: para que este código funcione SI hace falta JavaScript: la cuestión acá es que ese JavaScript es parte de Bootstrap y está relacionado con los elementos vía event-listeners y por eso no se ve el código. Si vas con el inspector del navegador a los checkbox vas a ver qué función de Bootstrap están indicando.

Para este caso particular, la forma de uso y funcionamiento está acá.

Tenés ejemplos de uso de todas las funcionas programadas de Bootstrap en este enlace.

HTML es un lenguaje de presentación: el código que lo hace funcionar, aunque medianamente oculto en este caso, tiene que seguir existiendo.

Saludos cordiales!