Cargando



Primeros pasos con Bootstrap

En este tutorial vamos a dar nuestros primeros pasos con Bootstrap y con ello abriremos un gran mundo de oportunidades en lo que respecta al diseño web y la maquetación de páginas web.


mar 18 2015 05:42
Profesional
abr 13 2016 21:32

El trabajar con páginas web se requiere mucho más que solo conocer los lenguajes que debemos utilizar, hay una serie de hitos que debemos ir cumpliendo para desarrollar un producto con un resultado excepcional. Uno de estos hitos es el diseño y disposición de los elementos que se mostraran en pantalla.

 

Imaginemos que debemos diseñar una página web, si partimos desde cero debemos tomar en cuenta como debe lucir el menú, las tablas, los botones, cosas tan sencillas como los iconos que colocaremos en algunos botones de acción, etc.

 

Como vemos es un trabajo arduo, sobre todo si deseamos que luzca de forma óptima y tenga un atractivo, debemos también ser detallistas para darle un toque personal al sitio, ahora ¿Qué pasa si no somos diseñadores? Esta es la gran pregunta, hay desarrolladores que tienen un ojo tapado en cuanto a buen gusto y diseño, y este tipo de perfiles se cohíben para hacer apariencias web de calidad. O ¿Qué pasa si tenemos buen gusto pero poco tiempo para diseñar?

 

Para resolver estos dos grandes requerimientos tenemos Bootstrap que no es más que un framework CSS que nos permite obtener el aspecto básico de nuestra página de una vez sin necesidad de sufrir con el diseño, pero aparte de eso también nos ayuda con efectos básicos, y una forma muy especial de estructurar el contenido que vamos a presentar.

 

Ventajas de Bootstrap
Ya sabemos que Bootstrap es un framework CSS y que nos ayuda a establecer los aspectos básicos para nuestra web, pero además de eso posee ciertas ventajas en cuanto a su uso, vamos a ver a continuación alguna de las cosas positivas que nos trae Bootstrap:

 

1. Re-utilización
Con Bootstrap tenemos muchos componentes hechos por defecto, de forma tal que podemos utilizarlos sin modificaciones en varias partes de nuestra web, haciendo así que reduzcamos el tiempo y la cantidad de código que empleamos. Esto también favorece al desarrollo modular de nuestras aplicaciones.

 

2. Consistencia
Gracias a que tenemos muchos componentes hechos de forma genérica, el código es consistente, es decir, que maneja unas estructuras muy similares, por lo que a la hora de leer el mismo, o darle mantenimiento a la aplicación ya sabremos cómo funciona de forma mucho más sencilla.

 

3. Diseño flexible
El diseño para móviles es algo muy importante y Bootstrap lo toma en cuenta desde el inicio, tenemos la flexibilidad que nuestro sitio se adapte a varias resoluciones y disposiciones de pantalla de forma automática, ahorrándonos mucho trabajo de tener que diseñar vistas móviles desde cero.

 

4. Comunidad
Otro aspecto a tener en cuenta es la documentación, cuando utilizamos un framework de terceros es muy importante tener a dónde acudir cuando tenemos dudas y en este sentido Bootstrap no tiene comparación, ya que podemos conseguir casi cualquier respuesta a nuestras dudas sin mucho esfuerzo.

 

Desventajas de Bootstrap
A pesar de que casi todo es bueno, también debemos hablar de las desventajas o los aspectos no tan buenos que nos enfrentamos cuando utilizamos este framework CSS, veamos a continuación algunos de sus puntos débiles.

 

1. Poco original
Si no nos tomamos un poco de tiempo en realizar nuestro diseño podemos quedar como poco originales si utilizamos Bootstrap sin más, si bien este framework está pensado para ello, debido a la gran adopción que ha tenido hay que trabajar un poco más para no parecer la copia de la copia.

 

2. Curva de aprendizaje
Como todo, tenemos que pasar por una curva de aprendizaje si queremos sacar el máximo provecho, el problema está en que si queremos pasar del aspecto básico al avanzado el choque es un poco fuerte.

 

3. Poca compatibilidad entre versiones
Cuando hay un cambio de versión la versión anterior pierde mucha vigencia y si queremos actualizar nos va a costar, sobre todo si hemos hecho cambios importantes para que nuestro sitio luzca diferente.

 

 

Instalación
Una vez que ya conocemos que es Bootstrap, y las ventajas y desventajas de utilizarlo en nuestros proyectos, debemos llegar a la parte práctica del tutorial, ahora vamos a aprender de donde podemos sacar este framework y cómo podemos incluirlo en nuestro proyecto.

 

Obtención de Bootstrap
Lo primero que debemos hacer es obtener los archivos necesarios para incluir Bootstrap en nuestro proyecto, es por ello que debemos visitar su web getbootstrap.com y descargar los archivos necesarios, o en su defecto utilizar una CDN para evitar alojar los archivos en nuestro servidor y disminuir el uso de nuestro ancho de banda.

Cual sea la opción debemos estar en una página similar a la siguiente si le damos click al botón de descarga inicial al visitar la página del framework:

 

 

Para facilitar el trabajo asumamos que hemos descargado el proyecto, este viene en un archivo comprimido que debemos extraer en una locación que podamos utilizar y que debe quedarnos algo similar a lo siguiente:

 

primeros-pasos-bootstrap-2.jpg

 

Como vemos dentro de nuestro proyecto deben existir tres carpetas, una para los CSS, otra para las fuentes que se utilizan y por ultimo una para los JS necesarios. Con esto ya tenemos disponible Bootstrap, que no es más que copiar el proyecto en nuestra carpeta de recursos.

 

Empezar a utilizar Bootstrap
Ya que tenemos todos los recursos en nuestro poder, debemos incluirlo en nuestro diseño, para ello podemos crear un archivo HTML y ahí hacer las inclusiones necesarias, esto lo podemos ver de forma más detallada en el siguiente código:
<!DOCTYPE html><html lang="es"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" media="screen"> <title>Instalando Bootstrap</title></head><body> <h1>Instalación de Bootstrap</h1><script src="bootstrap/js/bootstrap.min.js"></script> </body></html>
Como vemos lo único que hicimos fue incluir tres archivos, específicamente dos .css y un .js, esto es lo que necesitamos para empezar a utilizar toda la estructura, si ahora abrimos nuestro archivo con un navegador veremos como la fuente de las letras son diferentes a lo que normalmente veríamos con una etiqueta H1:

 

 

primeros-pasos-bootstrap-3.jpg

 

 

El grid de Bootstrap
Para lograr la organización de nuestros diseños, Bootstrap utiliza una grilla o grid, este se compone de 12 columnas, por lo que todo lo que vemos en nuestra pantalla debe organizarse de esta manera, con esto se logra que se pueda estructurar la página de tal forma que podamos hacer uso de las herramientas que se nos ofrece de una forma muy transparente.

 

Por supuesto es un proceso de adaptación, pero lo importante es que podemos hacer columnas que agrupen varias, así como cuando trabajamos con las tablas de HTML que podemos hacer columnas con varias unidas con la propiedad span. Para crear una web que utilice esta estructura solo debemos tener lo siguiente:

 

Un div con la clase container, dentro de este un div con la clase row, y finalmente dentro uno o varios div con la clase col, veamos en el siguiente código un ejemplo de una página con 3 columnas, para ello cada columna debe agrupar 4 para sumar un total de 12 que es lo que hemos explicado es el valor por defecto de Bootstrap.

<!DOCTYPE html><html lang="es"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" media="screen"> <title>Columnas en Bootstrap</title></head><body> <div class="container"> <h1>Columnas de Bootstrap</h1> <p>Ejemplo de como utilizar las columnas en bootstrap</p> <div class="row"> <div class="col-md-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam facilisis mi in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sapien sit amet mauris aliquet elementum. Integer aliquet metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Nam justo ex, sollicitudin a efficitur vel, placerat sit amet purus. Cras id semper felis. Sed ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Integer eu eleifend mauris. </div> <div class="col-md-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam facilisis mi in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sapien sit amet mauris aliquet elementum. Integer aliquet metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Nam justo ex, sollicitudin a efficitur vel, placerat sit amet purus. Cras id semper felis. Sed ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Integer eu eleifend mauris. </div> <div class="col-md-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam facilisis mi in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sapien sit amet mauris aliquet elementum. Integer aliquet metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Nam justo ex, sollicitudin a efficitur vel, placerat sit amet purus. Cras id semper felis. Sed ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Integer eu eleifend mauris. </div> </div> </div><script src="bootstrap/js/bootstrap.min.js"></script> </body></html>
Esto nos da como resultado una página donde los tres divs internos están en una sola fila divididos en tres columnas iguales, como podemos ver en la siguiente imagen:

 

 

 

Esta estructura a pesar de verse un poco cuadrada es muy flexible, ya que solo debemos hacer una especie de juego con los contenedores y sus columnas, para poder conseguir los resultados que deseemos. Con esto finalizamos este tutorial, hemos dado efectivamente nuestros primeros pasos con Bootstrap y ahora podemos empezar a aprovecharnos de sus ventajas de forma más directa sobre nuestros proyectos o aplicaciones web.


¿Te ayudó este Tutorial?


1 Comentarios


santiago bravo
mar 18 2015 14:45

Se agradece este tutorial para los que estamos en zonas de desarrollo. GRACIAS.

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X