Diseña Tu Primera Página Web con Bootstrap 4

Bootstrap 4 Frontend

Demo Github

La tecnología móvil es sin duda el futuro, por ello los Frameworks CSS cada ves son mas dinámicos, intuitivos y mejoran la usabilidad y la navegación de los usuarios en una plataforma o aplicacion web. La parte visual de una plataforma es importante y lo último que nos trae Bootstrap en su versión 4 es increíble, la versión actual de Bootstrap 4 hasta la fecha de este artículo es 4.1.1 .

En este Post te enseñaremos a diseñar una web con esta última versión de Bootstrap y aprenderás las nociones básicas para que tu mismo la diseñes y apliques a tus próximos proyectos si es que aun no usas esta fantástica versión de Bootstrap.

Desplegando Bootstrap 4

Vamos a la página oficial de Bootstrap 4  para obtenerlo.

Trabajaremos con los siguientes elementos:

  • Menú
  • Breadcrumbs
  • Columnas
  • Formularios
  • Mapa
  • Iconos
  • Carrusel

Instanciamos Bootstrap Framework

Antes de la etiqueta <head> colocamos los estilos CSS

Y al final antes de cerrar la etiqueta </body> instanciamos los archivos Javascript

ahora debemos agregar un contenedor para colocar todos nuestros elementos HTML

Header / Menú

Agregamos una etiqueta <head></head> y allí colocamos nuestro menú de navegación <nav></nav>

Breadcrumb

Debajo del cierrre de la etiqueta </header> colocaremos la guía de navegación

Hasta ahora hemos colocado elementos que se verán en la mayoria de páginas, pero para cada página debe haber un contenido diferente, este contenido lo vamos a colocar dentro de las etiquetas <main role=”main”></main>

Dentro de <main></main> voy agregar el modulo carrusel que nos brinda Bootstrap 4 y debajo del carrusel colocare 3 columnas de contenidos

Genial ! hasta acá ya tenemos nuestra página principal terminada

A partir de ahora mantendremos todos los elementos en las demas páginas, solo cambiaremos el contenido que se encuentra dentro de las etiquetas <main></main>

Blog

En nuestra página Blog colocaremos los ultimos posts que publicamos hasta la fecha de este artículo, voy a usar  el modulo Tarjeta de Bootstrap, las coloco dentro de las etiquetas <main></main>

En cada Tarjeta colocaremos su miniatura en imagen y un par de botones

Noticias

Para esta página colocaremos un Jumbotron, Tarjetas y un sidebar de archivos <aside></aside>

El Jumbotron que se usa para destacar un contenido independientemente lo colocaremos antes de iniciar la etiqueta <main>

Dentro de las etiquetas <main></main> colocaremos las tarjetas de noticias y al lado derecho un sidebar de archivos

Con eso ya tendriamos lista la páginas Noticias

Nosotros

Esta página es un clásico en todas las webs acá usaremos un jumbotrom, 3 columnas de contenidos y un sidebar de enlaces al lado derecho. Todo tambien dentro de las etiquetas <main></main>

Y queda lista nuestra páginas Nosotros

Contacto

Esta página es tambien muy importante en todo sitio web, usaremos un mapa de Google (iFrame), Formulario Bootstrap e iconos (Glyph icons) como siempre todo dentro de la etiqueta <main></main>

En la parte del Formulario pueden apreciar las etiquetas <small></small> que Bootstrap 4 nos ofrece

Para los iconos estoy usando Glyph Icons.

Se acuerdan que en Bootstrap 3 venia con Font Awesome icons, pues esta gama de iconos paso a tener limitaciones en su actual versión gratis y para tener mas características tienes que pagar un costo es por eso que en esta nueva versión de Bootstrap 4 nuestro amigos no aconsejan usar los siguientes iconos de esta Lista.

Footer

Por último nuestro Pie de Pagina, lo colocamos despues de la etiqueta </main>

Margin Top

En algunas capas si te fijas bien hemos usado su clase margin top(mt) que me brinda Bootstrap 4 con sus variantes mt-1, mt-2, etc. Puedes leer mas sobre ello acá.

Te recomendamos ver el Demo que esta al inicio de este artículo para que veas como funciona cada elemento en tu navegador.

Por último si necesitas saber más componentes, modulos, utilidades, etc. que Bootstrap 4 tiene puedes verlo en su documentación oficial.

 

Siguenos en nuestras redes sociales para que no te pierdas nuestros próximos contenidos.

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required