Versión 3 vs versión 4
- Bootstrap 4 es la versión más nueva de Bootstrap; con nuevos componentes, hoja de estilo más rápida y más capacidad de respuesta.
- Bootstrap 4 admite las últimas versiones estables de todos los principales navegadores y plataformas. Sin embargo, Internet Explorer 9 y versiones anteriores no son compatibles.
- Si es necesario soporte para Internet Explorer 8 o 9, se debe emplear Bootstrap 3. Es la versión más estable de Bootstrap, y aún es compatible con el equipo para correcciones de errores críticos y cambios de documentación. Sin embargo, no se le agregan nuevas funciones.
Formas de agregar Bootstrap a un proyecto
Tenemos 2, la primera es hacer la llamada remota al Framework (entre los proveedores tenemos a MaxCDN) y la segunda es descargarlo y tenerlo como una biblioteca interna.Mediante MaxCDN
Tendríamos el siguiente código:<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.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>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<!--Cuerpo de la página-->
</body>
</html>Mediante descarga
Se procede a la página oficial de Bootstrap y en la sección de descargas se sigue las instrucciones: https://getbootstrap.com/docs/4.1/getting-started/download/Grid Classes
Tiene 5 clases que se pueden emplear para el diseño ppor columnas:- .col- (extra small devices - pantalla menor que 576px)
- .col-sm- (small devices - pantalla mayor o igual que 576px)
- .col-md- (medium devices - pantalla mayor o igual que 768px)
- .col-lg- (large devices - pantalla mayor o igual que 992px)
- .col-xl- (xlarge devices - pantalla mayor o igual que 1200px)
Estas se pueden combinar para obtener diferentes disposiciones y estructuras más flexibles. Además, se puede emplear la clase .col que se autodimensiona como en el siguiente ejemplo.
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.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>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>La clase columna</h1>
<p>Nota: Se autodimensionan automáticamente en una fila de manera que tienen el mismo tamaño</p>
<div class="row">
<div class="col" style="background-color:lavender;">.col</div>
<div class="col" style="background-color:orange;">.col</div>
<div class="col" style="background-color:lavender;">.col</div>
<div class="col" style="background-color:orange;">.col</div>
<div class="col" style="background-color:lavender;">.col</div>
<div class="col" style="background-color:orange;">.col</div>
</div>
</div>
</body>
</html>
No hay comentarios:
Publicar un comentario