Hola que tal a todos, con motivo del año nuevo empezare una serie en la que mostrare como hacer diferentes sitios o paginas web desarrolladas con bootstrap 3, en esta ocasión se trata de Page One, una pagina sencilla pero útil para empezar a entender algunos conceptos de Bootstrap.
Lo primero que haremos sera descargar la versión 3.3.6 de bootstrap desde la pagina oficial http://getbootstrap.com, del paquete que descarguemos nos enfocaremos en la carpeta dist/ que contiene 3 sub carpetas algo asi: css, js, fonts.
Introducción
La pagina web que haremos sera algo básica, tendremos un menú superior (navbar), un contenido destacado (jumbotron), un contenido a 4 columnas y un pie de pagina.
Primera parte
La primera parte sera crear la base HTML sobre la cual funcionara nuestra pagina web:
- Crear una carpeta llamada page-one, en la cual guardaremos todo lo que hagamos
- Meter la carpeta dist/ de bootstrap en la carpeta page-one
- Crear un archivo llamado index.html en el cual escribiremos todo el código que hagamos por en esta lección.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta charset="utf8"/> | |
| <title>Page One</title> | |
| <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.min.css"/> | |
| </head> | |
| <body> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta charset="utf8"/> | |
| <title>Page One</title> | |
| <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.min.css"/> | |
| </head> | |
| <body> | |
| </body> | |
| </html> |
- Agregamos el charset utf8 para que se muestren los acentos.
- Le ponemos el titulo “Page One”.
- Agregamos el archivo bootstrap.min.css que contiene los estilos de bootstrap.
- Todo el código que continua se agregara dentro de la etiqueta body.
Menú o Barra de navegación
Lo que sigue es el menú superior, el cual lo construiremos con la clase navbar.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!– Menu o barra de navegacion –> | |
| <div class="navbar navbar-inverse navbar-static-top"> | |
| <div class="container"> | |
| <div class="navbar-header"> | |
| <a href="index.html" class="navbar-brand">Page One</a> | |
| </div> | |
| <ul class="nav navbar-nav"> | |
| <li> | |
| <a href="index.html">INICIO</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> |
- navbar navbar-inverse navbar-static-top: estas clases sirven para dar estilo al menú, el color de la barra lo define navbar-inverse (color negro), tambien puede ser navbar-default (color gris), navbar-static-top sirve para dejar estática la barra en la parte de arriba, también puede ser navbar-fixed-top lo cual fija la barra en la parte de arriba para que se mueva en la navegación.
- container: agregamos un container o contenedor dentro del navbar para alinear el contenido del menú con el contenido de la pagina.
- navbar-header: define la cabecera de la barra de navegación, dentro de ella podemos ver el navbar-brand o “marca de la barra de navegación” donde normalmente va el titulo o nombre del sitio o aplicación que estemos desarrollando.
- nav navbar-nav: se le asigna a una lista la cual contiene todos los elementos de la barra de navegación o menu, todos los elementos li de la lista deben tener un elemento a osea un enlace.
Contenido Destacado
El contenido destacado lo logramos con un jumbotron, un container, un h1, un parrafo y un boton.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!– Contenido destabado –> | |
| <div class="jumbotron" style="margin-top:-30px;"> | |
| <div class="container"> | |
| <h1>Page One</h1> | |
| <p>Pagina Web de Ejemplo y Tutotial con Bootstrap 3.</p> | |
| <a href="" class="btn btn-primary btn-lg">Mas Informacion</a> | |
| </div> | |
| </div> |
- jumbotron: sirve para destacar contenido, el texto se muestra grande con un fondo color gris #f0f0f0.
- container: de nuevo agregamos un container dentro del jumbotron para alinear el contenido.
- h1: un texto grande, un titulo, nombre de proyecto, de aplicación, etc.
- p: un parrafo, una descripción, lo que tu quieras.
- a class=”btn btn-primary btn-lg”: botón de acción, para ofrecer una acción, mas información, comprar, etc. primary=azul,success=verde,warning=amarillo.
Contenido 4 columnas
Con 4 columnas podremos expresar lo que nosotros queramos, un servicio, un producto, si requerimos mas de 4 espacios podemos agregar una según fila o mas.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!– Contenido 4 columnas –> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-3"> | |
| <h3>Columna 1</h3> | |
| <img src="imagen.png" class="img-responsive"> | |
| <p>Columna de ejemplo con texto que tu puedes personalizar.</p> | |
| <a href="" class="btn btn-primary">Mas Informacion</a> | |
| </div> | |
| <div class="col-md-3"> | |
| <h3>Columna 2</h3> | |
| <img src="imagen.png" class="img-responsive"> | |
| <p>Columna de ejemplo con texto que tu puedes personalizar.</p> | |
| <a href="" class="btn btn-primary">Mas Informacion</a> | |
| </div> | |
| <div class="col-md-3"> | |
| <h3>Columna 3</h3> | |
| <img src="imagen.png" class="img-responsive"> | |
| <p>Columna de ejemplo con texto que tu puedes personalizar.</p> | |
| <a href="" class="btn btn-primary">Mas Informacion</a> | |
| </div> | |
| <div class="col-md-3"> | |
| <h3>Columna 4</h3> | |
| <img src="imagen.png" class="img-responsive"> | |
| <p>Columna de ejemplo con texto que tu puedes personalizar.</p> | |
| <a href="" class="btn btn-primary">Mas Informacion</a> | |
| </div> | |
| </div> | |
| </div> |
- container: empezamos con un container, para alinear el contenido y soportar las filas y columnas.
- row: agregamos una fila o row.
- col-md-3: 3/12=1/4 es decir col-md-3 es una parte de 4 por ello podemos poner 4 columnas en una fila.
- h3: destacamos un subtitulo que también puede ser una característica de lo que intentemos promocionar.
- img: agregamos una imagen para darle una mejor vista.
- p: agregamos un párrafo o mas para hacer una descripción mas detallada.
- btn btn-primary: agregamos un botón a partir de un enlace para definir una acción.
- Repetimos 3 veces mas el contenido a partir de col-md-3 para asi obtener las 4 columnas.
- Podemos repetir todo a partir de row hasta donde se cierra para tener mas filas de 4 columnas.
Resultado
Este es el resultado que obtendremos:
Descarga
Dejo el código fuente completo, un documento RTF con el contenido del articulo y la imagen resultado.
[sociallocker]Descargar Recursos de Page One
[/sociallocker]Conclusión
Con este ejemplo ya pueden empezar a crear sus paginas web en bootstrap 3, prueben cambiar el orden de las secciones, agregar mas secciones, modificar el contenido, todo lo que se les ocurra, en la practica esta el convertirse en un experto.
Les invito a que también visiten mi pagina de facebook y mi canal de youtube donde les tengo preparadas muchos ejemplos y contenido extra, y si el contenido te gusto o crees que le pueda interesar a tus amigos compártelo.