Page One: Crear Pagina Web Basica con Bootstrap 3

0

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.

  • 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.

  • 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.

  • 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.

  • 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:

page-one

Descarga

Dejo el código fuente completo, un documento RTF con el contenido del articulo y la imagen resultado.

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.

LEAVE A REPLY

Time limit is exhausted. Please reload CAPTCHA.