Cómo hacer una página web-(III)

Cómo hacer página web con Bootstrap

Seguimos  viendo qué necesitamos para hacer nuestra propia página web desde “0” y gratis. Vamos a ver cómo hacer página web con Bootstrap.

Primero veamos lo que significa eso de Bootstrap que ahora va por la versión 4.1.1 .


Muchos “puristas del código” se echarán las manos a la cabeza, pero en cuánto sabes lo básico de Html y Css te puedes poner a construir unas Landing Pages muy decentes, muy vistosas con slider y card con imágenes, texto, botones y enlaces.


Bootstrap es gratis, como el Html y el Css. Fué creado por Twitter y los amigos que lo mantienen, pulen y adaptan su código están continuamente añadiendo nuevas funcionalidades.

Sus detractores te dirán que carga mucho css que no vas a utilizar y que eso ralentiza la página. Eso mismo pasa casi con cual tema “comercial” de WordPress y nadie se rasga las vestiduras.

Es cierto que ralentiza un poco la carga de la página, aunque el código está super optimizado para que cargue muy rápido y practicamente no notes la diferencia. Para según qué cosas unos milisegundos de diferencia de carga no son significativos.

A cambio te facilitará mucho la construcción de tus páginas. Es dar un paso de gigante que puedes dar y no tener que perder meses intentando hacer por ejemplo un slider , o poner transiciones bonitas, cargar vistosos tipos de letras, o testimonios de clientes, el portafolios de tus trabajos, etc.

Hacer página web con bootstrap no es sinónimo de ser herejes

Seguros que te vas a encontrar con los profetas del código puro. Los que abominan de que utilicen estos Frameworks que tanto trabajo ahorran y que nos que evitan definir una y otra vez las mismas funciones y las mismas clases Css .


¿Porqué no utilizar una herramienta que tanto facilita el trabajo y es tan fácil de utilizar?. ¿Realmente la diferencia de tiempo de carga, casi imperceptible para el ojo humano, es tan determinante?


Da la casualidad, o al menos así nos parece, que quiénes tan fuertemente critican a Bootstrap y programas similares, suelen ser profesionales del diseño y desarrollo web con muchos años de experiencia y con una posición consolidada en la profesión.

Suelen ser tan vehementes con sus críticas que parece que, en realidad, tienen un poco de miedo a que gente autodidacta sea capaz de desarrollar un buen nivel en muy poco tiempo y así tener menos competencia.

Para hacer página web con bootstrap, antes hay que saber que es bootstrap

En esencia, y como se afirma en https://puntoabierto.net/blog/que-es-bootstrap-y-cuales-son-sus-ventajas,

“Bootstrap es un framework desarrollado y liberado por Twitter que tiene como objetivo facilitar el diseño web. Permite crear de forma sencilla webs de diseño adaptable, es decir, que se ajusten a cualquier dispositivo y tamaño de pantalla y siempre se vean igual de bien. Es Open Source o código abierto, por lo que lo podemos usar de forma gratuita y sin restricciones.”

O en el propio sitio web de Bootstrap:

“Cree proyectos receptivos y de primer nivel en dispositivos móviles en la web con la biblioteca de componentes front-end más popular del mundo.

Bootstrap es un kit de herramientas de código abierto para desarrollar con HTML, CSS y JS. Haga un prototipo rápido de sus ideas o cree su aplicación completa con nuestras variables y mixins de Sass, sistema de cuadrícula sensible, componentes precompilados extensos y potentes complementos basados ​​en jQuery.”

Además, en la propia web de Bootstrap,https://getbootstrap.com/docs/4.0/getting-started/introduction/, el Codex, podremos encontrar innumerables ejemplos de cómo hacer fácilmente lo que con HTML5 y CSS3 puros nos costaría un enorme esfuerzo hacer.
En unos minutos podremos utilizar los ejemplos que están ya codificados y comentados y solo tendremos que adaptarlo a nuestras necesidades concretas.

Un ejemplo de elementos para hacer página web con Bootstrap

Como ejemplo podemos poner como hacer un slider o carrusel. Solo tendremos que pegar este código extraído de su página e indicar las rutas de las imágenes (src=”…” y cambiar los textos alt=”….”) y ya tendremos nuestro carrusel listo y operativo.

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Con Bootstrap harás buenas páginas web en poco tiempo

Ni que decir tiene el trabajo de programación (excepto para los gurús de la programación ) que hay que hacer para simplemente centrar los títulos, para poner los deslizadores, para que se desplace cada cierto tiempo, para poner las miniaturas por donde desplazarse directamente, para que sea responsive y se adapte a todas las pantallas.

En fín, una gran cantidad de horas de programación que con el código del ejemplo se hace en un rato, y a medida que vayas programando serás cada vez más rápido.

En su sitio web hay una gran cantidad de estos ejemplos que te permitirán hacer tu landing page en poco tiempo.

¿Cómo hacer página web con bootstrap?

como-hacer-pagina-web-con-bootstrap-Mi-Negocio-En-Google

Si vamos a hacer una página web con Bootstrap vamos a necesitar un programa como Visual Studio Code , magnífico programa desarrollado por Microsoft y que es gratuito.

Comenzaremos creando un archivo en Visual Studio Code que se llame index.html y luego procedemos a pegar el código de la plantilla de inicio que podemos conseguir en el sitio de Bootstrap.

Con eso ya tendremos el esqueleto de nuestro sitio web totalmente funcional. Ahora solo tendremos que ir buscando en el sitio de Bootstrap los componentes que queramos que tenga nuestra página web e ir adaptandolos a nuestras preferencias.

Con un poco de paciencia y en menos de un par de días tendremos nuestra página totalmente operativa.

Hay varios cursos paso a paso en el canal de Youtube de Bluuweb! que son totalmente gratuitos y que podéis seguir antes de poneros a crear vuestra propia página.

Recomendamos el sitio de Bluuweb! para ir aprendiendo Bootstrap

Puedes seguir una gran cantidad de vídeos gratis en su canal de Youtube en Bluuweb!  Y los de Rafel Sansó, luego ya puedes hacer algunos de sus cursos más especializados y profesionales que publican en Udemy y que raramente cuestan más de 15€ .


Aquí tienes, por ejemplo, el curso de Bluuweb! en UDEMY con un cupón de descuento https://www.udemy.com/bootstrap-curso/?couponCode=JUNIO2018. Os lo recomendamos. (Nota: No tenemos ninguna vinculación ni recibo nada de Bluuweb! ni de Ignacio Gutiérrez su creador.)


En próximos posts seguiremos viendo cómo y qué necesitamos para hacer nuestra propia página web desde “0” y gratis. Nos adentraremos en WordPress.

Te agradecemos tus comentarios.


¡Suscríbete a nuestra newsletter!

suscríbete