tag:blogger.com,1999:blog-51868866303374917822024-03-05T00:18:38.029-08:00Desarrollo de software (Solución de errores)Anonymoushttp://www.blogger.com/profile/09354172898285274653noreply@blogger.comBlogger2125tag:blogger.com,1999:blog-5186886630337491782.post-24720837359800851132016-11-20T00:26:00.001-08:002016-12-29T15:15:15.883-08:00Ventana Modal Con Bootstrap (Básico)<script>
cookieOptions = {msg="This site uses cookies if you continue browsing, you are accepting the use of cookies."};
</script>
<br />
<center>
<iframe allowtransparency="true" data-aa="264659" frameborder="0" scrolling="no" src="https://ad.a-ads.com/264659?size=728x90" style="border: 0px; height: 90px; overflow: hidden; padding: 0; width: 728px;"></iframe>
</center>
<br />
Hola amigos,<br />
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.<br />
<br />
Ejemplo:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx11HClNKoNj5vkGqeuEsonK6hPwCPjlIG24uvo1SzRgeWWNo4loF58riIDbo94KMS04vlIhq6OooFumZhIhyphenhyphena8lJYIJYup-T3gCU6ovlO-0iSyPOeVcTHbOGebq-3sr9lPtpxfHZ6SDE/s1600/EjemploCompleto.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="152" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx11HClNKoNj5vkGqeuEsonK6hPwCPjlIG24uvo1SzRgeWWNo4loF58riIDbo94KMS04vlIhq6OooFumZhIhyphenhyphena8lJYIJYup-T3gCU6ovlO-0iSyPOeVcTHbOGebq-3sr9lPtpxfHZ6SDE/s640/EjemploCompleto.jpg" width="640" /></a></div>
<br />
<br />
<br />
<b>Paso 1:</b><br />
<b><br /></b>
Para empezar debes tener referenciadas las librerías (Jquery y Bootstrap) en la etiqueta HEAD de tu pagina web.<br />
<br />
Ej:<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9HxMLSA6jUUhWT8aav61qiaQSRhItoQyyb0GocV10D56_uxa5FSMv-AW0v4FNMTY9ykRWmgNWV59AyhI6pSu3_V19cFqNwaf7eeZ_kAX__2tXYqz35aN-rISQ62QfA0mt8eiD5w8y2gw/s1600/EjPaso1.JPG" imageanchor="1"><img border="0" height="86" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9HxMLSA6jUUhWT8aav61qiaQSRhItoQyyb0GocV10D56_uxa5FSMv-AW0v4FNMTY9ykRWmgNWV59AyhI6pSu3_V19cFqNwaf7eeZ_kAX__2tXYqz35aN-rISQ62QfA0mt8eiD5w8y2gw/s640/EjPaso1.JPG" width="640" /></a><br />
<br />
<br />
<b>Paso 2:</b><br />
<b><br /></b>
Agregar el código que se muestra a continuación en el <b>BODY</b> de la página<br />
<b><br /></b>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpYw0xoivqHeOzelDpqMTI5c9mnMEaGHKCXzjL1jHWjn8RYZIkWksrmK23eTVU5x-4jesMddkUza_N0lbcPSdnu1KOQyc8RZoXwS-c0LeR61I3Psu27G7rxSHbdyDK6BrhPjnwlS08iV4/s1600/CodigoBody.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="316" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpYw0xoivqHeOzelDpqMTI5c9mnMEaGHKCXzjL1jHWjn8RYZIkWksrmK23eTVU5x-4jesMddkUza_N0lbcPSdnu1KOQyc8RZoXwS-c0LeR61I3Psu27G7rxSHbdyDK6BrhPjnwlS08iV4/s640/CodigoBody.JPG" width="640" /></a></div>
<b><br /></b>
<b><br /></b>
<b>Breve Explicación: </b><br />
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 <b>data-toggle="modal" y data-target="#modalBasico" (</b>En este atributo se debe especificar el ID del div modal que queremos abrir<b>).</b><br />
<b><br /></b>
<b><br /></b>
<b><br /></b>
<b>Conclusiones:</b><br />
Las ventanas modales son muy útiles a la hora de mostrar mensajes breves, como advertencias o confirmaciones de acciones realizadas por nuestro sitio web.<br />
<br />
Pero también se pueden usar para evitar realizar saltos de la página y simplemente mostrarle al usuario funcionalidades adicionales.<br />
<br />
Todo estos ejemplos se podrán apreciar en otros tutoriales.<br />
<br />
<br />
<b>Descargar Código Fuente: <a href="https://drive.google.com/file/d/0B7vtqvvZxoddSjkxcG9NNjkxUUU/view?usp=sharing" target="_blank">Descargar...</a></b> <br />
<br />
<span style="background-color: white; color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;">Si les pareció interesante y útil recuerden compartir para que nuestra comunidad aumente.</span><br />
<span style="background-color: white; color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><br /></span>
<span style="background-color: white; color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><br /></span>Anonymoushttp://www.blogger.com/profile/09354172898285274653noreply@blogger.com0tag:blogger.com,1999:blog-5186886630337491782.post-55061760366667181582016-11-18T15:10:00.003-08:002016-11-20T00:22:12.732-08:00Crear TABS usando Bootstrap<center>
<div>
<iframe allowtransparency="true" data-aa="264659" frameborder="0" scrolling="no" src="https://ad.a-ads.com/264659?size=728x90" style="border: 0px; height: 90px; overflow: hidden; padding: 0; width: 728px;"></iframe>
</div>
</center>
<br />
Hola amigos,<br />
En este tutorial aprenderemos a crear TABS usando Bootstrap, al final del tutorial podrá descargar el código de ejemplo.<br />
<br />
Ejemplo:<br />
<span id="goog_396250095"></span><span id="goog_396250096"></span><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBF2bqP1VWIZUQZ0t70zLa3jgz1J2sfcjqjR82FwALryJJmVEpvPWmwqGRu1cL3WKMndEQyWZ8pM_kzBwWbQvWbf_3SZZLwSEOh_EqKk9Q0SMEpckWpql6ssQjh_SyPODwoVNnFtDUOlU/s1600/Ejemplo1.JPG" imageanchor="1"><img border="0" height="228" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBF2bqP1VWIZUQZ0t70zLa3jgz1J2sfcjqjR82FwALryJJmVEpvPWmwqGRu1cL3WKMndEQyWZ8pM_kzBwWbQvWbf_3SZZLwSEOh_EqKk9Q0SMEpckWpql6ssQjh_SyPODwoVNnFtDUOlU/s640/Ejemplo1.JPG" width="640" /></a><br />
<br />
<b>Paso 1:</b><br />
<b><br /></b>
Para empezar debes tener referenciadas las librerías (Jquery y Bootstrap) en la etiqueta HEAD de tu pagina web.<br />
<br />
Ej:<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9HxMLSA6jUUhWT8aav61qiaQSRhItoQyyb0GocV10D56_uxa5FSMv-AW0v4FNMTY9ykRWmgNWV59AyhI6pSu3_V19cFqNwaf7eeZ_kAX__2tXYqz35aN-rISQ62QfA0mt8eiD5w8y2gw/s1600/EjPaso1.JPG" imageanchor="1"><img border="0" height="86" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9HxMLSA6jUUhWT8aav61qiaQSRhItoQyyb0GocV10D56_uxa5FSMv-AW0v4FNMTY9ykRWmgNWV59AyhI6pSu3_V19cFqNwaf7eeZ_kAX__2tXYqz35aN-rISQ62QfA0mt8eiD5w8y2gw/s640/EjPaso1.JPG" width="640" /></a><br />
<br />
<br />
<b>Paso 2:</b><br />
<b><br /></b>
Para habilitar las pestañas, agregue el atributo <b>data-toggle = "tab"</b> a cada enlace. A continuación, agregue una clase <b>.tab-pane</b> con una ID única para cada ficha y envíela dentro de un elemento <b><div> </b>con clase <b>.tab-content</b>.<br />
<br />
<br />
Si desea que las pestañas se atenúen y se apaguen al hacer clic en ellas, agregue la clase <b>.fade</b> al panel <b>.tab</b>:<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnFncGFtW7vL16pHHX6hloFwbn9a0IEu8ZN6H0-KjMsmuGlmh7C5OUuICgMqmI5voZN8saq2z3Lo1R1lA3pn9zjWXsSa0CJecudBQvhvB2vYxj9rtzItg3ljwiwfU19HIWjGeSsGPmkwE/s1600/EjPaso2.JPG" imageanchor="1"><img border="0" height="332" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnFncGFtW7vL16pHHX6hloFwbn9a0IEu8ZN6H0-KjMsmuGlmh7C5OUuICgMqmI5voZN8saq2z3Lo1R1lA3pn9zjWXsSa0CJecudBQvhvB2vYxj9rtzItg3ljwiwfU19HIWjGeSsGPmkwE/s640/EjPaso2.JPG" width="640" /></a><br />
<br />
<b>Conclusiones:</b><br />
<b><br /></b>
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.<br />
<br />
<b>Descargar código fuente: <a href="https://drive.google.com/file/d/0B7vtqvvZxoddTXN1bDI1M3VsY28/view?usp=sharing" target="_blank">Descargar...</a></b><br />
<br />
Si les pareció interesante y útil recuerden compartir para que nuestra comunidad aumente.
<br />
<center>
<div>
<iframe allowtransparency="true" data-aa="300392" frameborder="0" scrolling="no" src="https://ad.a-ads.com/300392?size=728x90" style="border: 0px; height: 90px; overflow: hidden; padding: 0; width: 728px;"></iframe>
</div>
</center>
Anonymoushttp://www.blogger.com/profile/09354172898285274653noreply@blogger.com0