Página Web Básica con Bootstrap 3

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.

 

[button type=”bd_button btn_large” url=”https://academy.zenva.com/product/desarrollo-web-con-bootstrap-3//?zva_src=deideaaapp” target=”on” button_color_fon=”#3fc2da” button_text_color=”#FFFFFF” ]Accede al curso completo de Bootstrap[/button]

 

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:

 

Articulo destacado de la semana

 

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus dolorem ad officiis nihil delectus quidem animi rerum, molestias sint natus ducimus quod, unde molestiae dolores laboriosam error facilis odio doloremque.

 

Leer mas

 

 

 

 

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:

 

Titulo del articulo

 

 

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat distinctio illo rerum atque ducimus, laboriosam debitis eum deserunt ab libero quis voluptas, illum, perferendis numquam aut aliquam itaque qui magnam!

Leer mas

 

 

 

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:

 

Plantilla básica hecha con bootstrap

 

 

 

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.

 

[button type=”bd_button btn_large” url=”https://academy.zenva.com/product/desarrollo-web-con-bootstrap-3//?zva_src=deideaaapp” target=”on” button_color_fon=”#3fc2da” button_text_color=”#FFFFFF” ]Accede al curso completo de Bootstrap en Zenva Academy[/button]

Tutorials on game, web and mobile app development