Comenzamos a aprender con Bootstrap 4

Que es Bootstrap

  • Bootstrap es un framework libre y rápido para diseñar de manera fácil e intuitiva páginas web.
  • Bootstrap incluye diseños HTML y CSS para tipografía, formularios, botones, tablas, navegación, carruseles de imágenes y mucho más.
  • Bootstrap posee y tiene la fuerza para crear fácilmente diseños web responsive, es decir, adaptables a cualquier tipo de dispositivo (PCs, portátiles, laptops, móviles…).

Ejm

Os mostramos un pequeño ejm de lo fácil que es trabajar con Bootstrap.

<div class="container">
	<div class="row">
		<div class="col-sm-4">
			<h3>Columna 1</h3>
			<p>Parrafo 1</p>
		</div>
		<div class="col-sm-4">
			<h3>Columna 2</h3>
			<p>Parrafo 2</p>
		</div>
		<div class="col-sm-4">
			<h3>Columna 3</h3>
			<p>Parrafo 3</p>
		</div>
	</div>
</div>

Por qué usar Bootstrap

Entre las ventajas que presenta Bootstrap, estas son algunas de las mas importantes:

  • Fácil de usar: cualquier persona, con cierto conocimiento de HTML y CSS puede comenzar a utilizar Bootstrap.
  • Diseño responsive: los diseños realizados con Bootstrap se ajustan a todo tipo de dispositivos (móviles, portátiles, PCs…)
  • Bootstrap para móviles: en Bootstrap, los estilos Movil-first para móviles son parte de su núcleo.
  • Compatibilidad con navegadores: Bootstrap es compatible con todos los navegadores modernos (Chrome, Firefox, Internet Explorer 10, Edge, Safari y Opera)

Donde obtener Bootstrap 4

Hay dos maneras de comenzar a utilizar Bootstrap 4, podemos:

Bootstrap 4 CDN

Si no quieres descargar Bootstrap 4, puedes incluirlo en un CDN (Content Delivery Network o red de entrega de contenido).

MaxCDN provee soporte CDN para Bootstrap CSS y Javascript, también debes incluir la librería JQuery si quieres disfrutar de toda su tecnología..

MaxCDN

<!-- Ultima compilación minimizada CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<!-- Librería jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Ultima compilación JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Una ventaja de usar CDN Bootstrap: muchos usuarios que han descargado Bootstrap se olvidan de actualizar los paquetes que van saliendo nuevos, por lo que su páginas web pueden quedar obsoleta, con lo que siempre es más fácil apuntar a los servidores donde estará siempre Bootstrap actualizado.

jQuery y Popper: Bootstrap 4 utiliza jQuery y Popper.js para sus componentes Javascript (como popovers, tooltips…), sin embargo si sólo quieres usar la parte CSS de Bootstrap no es necesario que incluyas los enlaces a los mismos.

Descargando Bootstrap 4

Si quieres descargar el código de su página, tan sólo tienes que ir a su web, https://getbootstrap.com y seguir las instrucciones.