Página Web Básica con Bootstrap 3

En este tutorial vamos a ver como crear una plantilla básica con Bootstrap 3 y que se pueda ver para los múltiples dispositivos como escritorio, tablets y teléfonos mobiles.

 

Accede al curso completo de Bootstrap

 

El resultado seria el siguiente:

Sitio visualizado en un mobile

mobil

Sitio visualizado en un tablet
tablet

Sitio visualizado en un desktop

 

pc

Plantilla básica

Primero debemos de tener la estructura básica de la plantilla que nos ofrece Bootstrap desde su pagina oficial. Seria la siguiente y la puedes usar en cualquier editor:

 

Menú de navegación

Ahora vamos a insertar el código para tener el menú de navegación, con un buscador, y el menú con opciones dentro:

Cabecera usando jumbotron

Después vamos a realizar la cabecera principal en donde puedes hacer destacar de manera elegante algun articulo, anuncio, etc. Esto lo podemos hacer bien fácil con Bootstrap usando el código siguiente:

Insertando los artículos

Vamos a insertar los artículos en nuestra pagina, en este caso puedes utilizar los artículos que quieras, pero para este ejemplo solo te mostrare a continuación el código de un solo articulo, si tu quieres mas artículos solo tienes que copiar y pegar lo siguiente:

Paginación

Algo que es muy recomendable en las paginas web es no tener todos los artículos en una misma pagina, para eso Bootstrap nos ofrece una paginación para seccionar estos artículos con el siguiente código:

Pie

Para terminar vamos a insertar el pie que consta de solo un texto que esta centrado en base a la pagina con el siguiente código:

Recomendaciones

El resultado es el que se mostró al principio del tutorial. Recuerda que puedes personalizar la presentación de cada uno de los elementos usando las clases “col” con la representación dependiendo del dispositivo “xs – mobiles”, “sm – tablets”, “md – pc”, etc. Puedes saber mas al respecto sobre estas clases en la pagina oficial.

 

Accede al curso completo de Bootstrap en Zenva Academy

Publicado por

Klinsmann Fabian

Desarrollador web y ninja Front-end. Klinsmann es licenciado en Marketing y Neuro Marketing Digitales, apasionado por las ultimas tecnologías, lleva mas de 3 años trabajando con HTML5, CSS3, jQuery, Responsive design y todo lo que tiene que ver en la web.

Share this article

Agregar un comentario