viernes, 18 de noviembre de 2016

Crear TABS usando Bootstrap


Hola amigos,
En este tutorial aprenderemos a crear TABS usando Bootstrap, al final del tutorial podrá descargar el código de ejemplo.

Ejemplo:


Paso 1:

Para empezar debes tener referenciadas las librerías (Jquery y Bootstrap) en la etiqueta HEAD de tu pagina web.

Ej:


Paso 2:

Para habilitar las pestañas, agregue el atributo data-toggle = "tab" a cada enlace. A continuación, agregue una clase .tab-pane con una ID única para cada ficha y envíela dentro de un elemento <div> con clase .tab-content.


Si desea que las pestañas se atenúen y se apaguen al hacer clic en ellas, agregue la clase .fade al panel .tab:



Conclusiones:

Para tener organizado el contenido de tu web hay muchas formas de hacerlo, este sera un buen paso para empezar, los TABS te permitirán aprovechar de manera correcta el espacio utilizado por tu contenido y son muy fáciles de usar.

Descargar código fuente:  Descargar...

Si les pareció interesante y útil recuerden compartir para que nuestra comunidad aumente.

No hay comentarios:

Publicar un comentario