Bootstrap 4. Primeros pasos

icono de php 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.

2 opiniones en “Bootstrap 4. Primeros pasos”

  1. Hola,
    Estoy seguro de que tendrás un montón de mensajes de spam, así que iré directo al grano. Me encantaría poder enviar un artículo de invitado o patrocinado para que lo publiques en tu página web.
    El artículo está relacionado con el contenido de tu web, y por supuesto, es útil e informativo, por lo que creo que a tu público realmente le gustaría.
    Si aceptas posts patrocinados o de invitados en tu página, por favor, dime qué precio tendría la publicación de un artículo.
    ¡Gracias por tu tiempo!
    Saludos cordiales.
    Futing

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Conoce cómo se procesan los datos de tus comentarios.