Hace unos pocos días comenzamos una serie de artículos para aprender a utilizar BootStrap, en el que dimos un primera introducción: «Comenzando con BootStrap«.
Con este primer artículo, vimos las características principales de BootStrap, los tipos de archivos que podemos descargar para empezar a utilizar el framework y como se haría la llamada de cada uno de ellos.
Para dejaros con la miel en los labios y animaros a seguir con este pequeño tutorial, os voy a mostrar algunos ejemplos de sitios web realizados con BootStrap:
Para ver más ejemplos os dejo un enlace con referencias a sitios web hechos exclusivamente con BootStrap:
Hoy vamos a lo que todos nos gusta y que siempre se espera con ansia en cualquier tutorial o curso que es el código. Vamos a escribir algo de código para familiarizarnos con BootStrap realizando nuestra primera web super sencilla pero con algunas nociones básicas que deberemos tener.
Mi primera página con BootStrap
Vamos a colocarnos el casco y los guantes reglamentarios para ponernos manos a la obra escribiendo nuestra primera página con el contenido básico para poder comenzar a utilizar BootStrap, pero antes quiero que veáis la diferencia, por eso primero voy a poneros un código mínimo de una página web y después como quedaría preparado para BootStrap:
Código Simple sin BootStrap:
<!DOCTYPE html>
<html lang=amp;quot;enamp;quot;>
<head>
<meta charset=amp;quot;utf-8amp;quot;>
<meta http-equiv=amp;quot;X-UA-Compatibleamp;quot; content=amp;quot;IE=edgeamp;quot;>
<title>Mi primera web con Bootstrap</title>
</head>
<body>
<h1>AppRentalOnline - Tu Blog preferido</h1>
</body>
</html>
Código adaptado para poder utilizar BootStrap:
<!DOCTYPE html><!-- Bootstrap funciona con documentos HTML 5 -->
<html lang=amp;quot;enamp;quot;>
<head>
<meta charset=amp;quot;utf-8amp;quot;>
<meta http-equiv=amp;quot;X-UA-Compatibleamp;quot; content=amp;quot;IE=edgeamp;quot;>
<!--
El viewport es un atributo que permite definir
la anchura de la ventana del navegador para
adaptar la página automáticamente
-->
<meta name=amp;quot;viewportamp;quot; content=amp;quot;width=device-width, initial-scale=1amp;quot;>
<title>Mi primera web con Bootstrap</title>
<!-- CSS de Bootstrap -->
<link href=amp;quot;css/bootstrap.min.cssamp;quot; rel=amp;quot;stylesheetamp;quot; media=amp;quot;screenamp;quot;>
<!-- librerías opcionales que activan el soporte de HTML5 para IE8 -->
<!--[if lt IE 9]>
<script src=amp;quot;https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.jsamp;quot;></script>
<script src=amp;quot;https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.jsamp;quot;></script>
<![endif]-->
</head>
<body>
<h1>AppRentalOnline - Tu Blog preferido</h1>
<!-- Librería jQuery requerida por los plugins de JavaScript -->
<script src=amp;quot;http://code.jquery.com/jquery.jsamp;quot;></script>
<!-- Todos los plugins JavaScript de Bootstrap (también puedes
incluir archivos JavaScript individuales de los únicos
plugins que utilices) -->
<script src=amp;quot;js/bootstrap.min.jsamp;quot;></script>
</body>
</html>
Notas: Como puedes ver hay unas líneas que sirven de comentario dentro del código que puedes distinguirlas por su color verde (dependiendo de la configuración de vuestro editor puede ser un color u otro) o porque están encerrados entre las etiquetas correspondientes. Si lo tienes claro, estos comentarios los puedes eliminar, pero te aconsejo que te acostumbres a poner comentarios de tu código para futuras modificaciones.
A partir de esta primera página ya podremos empezar a usar el código de este estupendo Framework, de todas formas, como algunos no estáis familiarizados con Responsive Web Design (a partir de ahora lo llamaremos RWD), quiero destacar la parte del código donde informamos VIEWPORT.
<meta name=amp;quot;viewportamp;quot; content=amp;quot;width=device-width, initial-scale=1amp;quot;>
Esta línea de código es la que nos permite que la página tenga la posibilidad de ser adaptable (RWD).
Plantillas de ejemplo
Siempre es mejor empezar desde cero una página web con BootStrap para aprender debidamente como funciona y así poder modificar o crear nuevas plantillas a tu gusto sin ninguna duda. De todas formas también me gustaría deciros que en Internet podemos encontrar diversos sitios con plantillas BootStrap para descargar o comprar, aunque en esta parte del artículo os mostraré las plantillas o ejemplos que ponen a nuestra disposición en la web oficial y con las que podemos ganar mucho tiempo si sabemos bien la estructura que tendrá nuestro sitio web.
En la imagen podéis ver algunos de los distintos tipos de estructuras básicas con las que podemos empezar un proyecto, y que BootStrap ha tenido el detalle de compartir el código con todos los usuarios. Para poder acceder al código de todos estos ejemplos, podéis hacerlo desde aquí o haciendo clic en el imagen anterior.
Ahora que tenemos funcionando nuestra primera página en BootStrap, en el próximo artículo iremos añadiendo elementos que harán que nuestra página vaya teniendo forma.
