domingo, 20 de noviembre de 2016

Ventana Modal Con Bootstrap (Básico)



Hola amigos,
En este tutorial podremos aprender como usar de manera sencilla las ventanas modales proporcionadas por Bootstrap, al final de la explicación podran descargar el código fuente completo.

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:

Agregar el código que se muestra a continuación en el BODY de la página




Breve Explicación: 
El botón que se puede ver en la parte superior nos servirá para lanzar la apertura de la ventana modal gracias a los atributos data-toggle="modal" y data-target="#modalBasico" (En este atributo se debe especificar el ID del div modal que queremos abrir).



Conclusiones:
Las ventanas modales son muy útiles a la hora de mostrar mensajes breves, como advertencias o confirmaciones de acciones realizadas por nuestro sitio web.

Pero también se pueden usar para evitar realizar saltos de la página y simplemente mostrarle al usuario funcionalidades adicionales.

Todo estos ejemplos se podrán apreciar en otros tutoriales.


Descargar Código Fuente:  Descargar...

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


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.