Bootstrap 4. Primeros pasos

Josemaría

hace 7 años

Bootstrap es una colección de elementos, plantillas y componentes HTML, CSS y Javascript para crear rápidamente páginas web con un aspecto moderno y «responsivo» (¡menudo palabro!) al tamaño de pantalla de cualquier dispositivo. Su versión 4 se liberó hace un par de meses y aporta algunos cambios significativos como, por ejemplo, la inclusión de Popper como librería javascript para «tooltips» y otros elementos emergentes y la eliminación de las tipografías Glyphicons para introducir símbolos y pictogramas.

Podemos trabajar con Bootstrap bien descargandonosla en nuestro propio servidor web, o bien usando sus librerías directamente desde los CDN que nos ofrecen. Aquí usaremos este segundo método por sus evidentes ventajas de cara a montar una primera plantilla para pruebas. Necesitamos incluir simplemente el siguiente tag en :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

Si vamos a usar los elementos javascript necesitamos incluir también las librerías correspondientes y, ademas, las de jquery y popper en nuestro proyecto las cuales también tienen disponible la posibilidad de enlazarlas directamente sin necesidad de descargarlas en local:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.1/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

IMPORTANTE: los enlaces anteriores corresponden a las versiones estables más recientes en el momento de escribir esto. No suelen eliminar las versiones anteriores, pero conviene que te cerciores si llegas a este texto en un futuro lejano.

Con todo esto, la plantilla mínima de HTML para empezar a trabajar (incluyendo los enlaces correspondientes a las librerías javascript comentados) sería esta:

<!DOCTYPE html>
<html lang="es">
    <head>
    	<meta charset="utf-8" />
    	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
    	<title>Plantilla Bootstrap</title>
  	</head>
  	<body>
		<h1>Plantilla Bootstrap</h1>

    
		<!-- Javascript opcional -->
		<!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    	     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.1/umd/popper.min.js"></script>
    	     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> -->
  	</body>
</html>

Sosa, verdad? Claro, aún no hemos empezado a trabajar… Si quieres ver algo más impactante, bootstrap dispone de plantillas con algo mas de chicha para tus diseños. Las tienes disponibles en este enlace. Si prefieres empezar desde cero, tienes disponible un montón de La documentación bastante fácil de seguir que incluye multitud de ejemplos prácticos para empezar a trabajar desde el primer minuto.

Comparte esto: