FDFC

Capítulo 10: Bootstrap 5 C.F.P Nro.
401 de San Martín
BOOTSTRAP 5
“No mires al reloj, haz lo que él hace. Sigue moviéndote".
(Sam Levenson)
¿QUE ES BOOTSTRAP?
Bootstrap (https://getbootstrap.com/) es un conjunto de herramientas de código abierto para

desarrollos webs del tipo front-end. Estas herramientas permiten darle forma a su sitio web y
convertirlas a través de CSS y JavaScript en sitios responsivos. Bootstrap fue desarrollado por
Twitter en 2010, para estandarizar las herramientas de la compañía. Desde entonces fue
actualizado varias veces y ya se encuentra en la versión 5. La libreria combina CSS y
JavaScript para estilizar los elementos de una página HTML. Además, incorpora distintos
componentes como ventanas modales, botones, menús, cuadros, formularios etc.
Nota
A partir de la versión 5. Bootstrap no necesita el uso de la librería de JQuery.

La principal consecuencia de esta decisión, es que los diseños web creados
con Bootstrap 5 van a ser mucho más rápidos.
1
Capítulo 10: Bootstrap 5 C.F.P Nro. 401 de San Martín
Para poder usar Bootstrap debe colocar el siguiente código en la página html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js
" integrity="sha384-
geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
crossorigin="anonymous"></script>
</body>
</html>
El código se puede copiar de la página: https://getbootstrap.com/docs/5.3/getting-

started/introduction/ .Ahora empezaremos a introducir código a la plantilla html dentro de
nuestro <body>:
<section class="bg-primary text-light text-center py-5">

<img src="fish.png" alt="" />
<h1>Pescadería Don José</h1>
<h4 class="px-3">• TU TIENDA ONLINE •</h4>
</section>
Este section permite crear un encabezado para mostrar un título, un subtítulo y una imagen.
La clase de bootstrap bg-primary permite establecer un color de fondo definido en una
variable de bootstrap, la clase text-center permite centrar un texto. El manejo del margen y el
relleno es sencillo en Bootstrap. El relleno se implementa con 6 clases diferentes (desde 0 a 5
donde el valor 0 es el mínimo valor a tomar y 5 el valor máximo), cada una de las cuales
comienza con p-. De manera similar, las clases de margen comienzan con m-. La clase py-5
del ejercicio py-5 establece un padding (relleno) sobre el eje Y (relleno superior y relleno
inferior).
2
Nota
El uso de clases es esencial en Bootstrap. Su nomenclador cambia según su

uso. Así como p es para el relleno, m es para el margen. t para arriba, b para
abajo, i para la izquierda, r para la derecha, x sobre el eje horizontal, y para el
eje vertical. Por ejemplo, para aplicar un margen de 3 unidades en la parte
superior e inferior de un elemento, debe usar la clase my-3.
.
Nota
El sitio https://icons8.com/ permite descargar iconos, ilustraciones, fotos de

forma gratuita.
GRID EN BOOTSTRAP
La grilla o grid es la base sobre la que construiremos el layout de nuestra página, es decir, la
disposición de elementos. Es el componente esencial para asegurar que nuestra web se
adaptará convenientemente a diferentes resoluciones y pantallas. La grilla o grid de
Bootstrap utiliza tres elementos principales:
El container: Contiene todos los elementos del grid dentro de él. El cual centra los elementos
de acuerdo al tamaño del dispositivo, además de mantener un padding.
El row: Debe ubicarse inmediatamente luego del container, y actúa como un wrapper para los
elementos col.
Los col: Son columnas que pueden variar su tamaño desde 1 hasta 12. Generalmente una
cuadricula permite un máximo de doce divisiones. Los elementos col siempre deben ir dentro
de un row para mostrar los componentes de forma adecuada. Se puede usar la clase offset
para agregar un espacio vacío a la izquierda de un col. Este espacio representara un col dentro
del grid pero puede variar según el número que se coloque. Todas las col se pueden usar para
trabajar en forma responsive:
Clase -xs-: Esta clase se usa para crear un sistema de grilla para dispositivos extra pequeños
con un ancho de pantalla menor a 576px.
Clase -sm- : Esta clase se usa para hacer un diseño de grilla para dispositivos pequeños con
un ancho de pantalla mayor o igual a 576px.
Clase -md-: Esta clase se usa para crear un sistema de grilla para dispositivos medianos con
un ancho de pantalla mayor o igual a 768px.
Clase -lg-: Esta clase se usa para crear un sistema de grilla para dispositivos grandes con un
ancho de pantalla mayor o igual a 992px.
Clase -xl-: Esta clase se usa para crear un sistema de grilla para dispositivos extra grandes
con un ancho de pantalla mayor o igual a 1200px.
Clase -xxl-: Esta clase se usa para crear un sistema de grilla para dispositivos extra grandes
con un ancho de pantalla menor o igual a 1400px.
3
El próximo paso será armar una alerta con una leyenda para que se destaque. En general las
alertas funcionan como una ventana modal pero también puede servir para este contexto:
<section class="my-3">
<div class="container">
<div class="row">
<div class="col-lg-10 offset-lg-1">
<div class="alert alert-primary text-center">
Envios a CABA y GBA • Envios gratuitos con compra superior a
$ 10.000.
</div>
</div>
</div>
</div>
</section>
La clase my-3 estable el margen sobre el eje Y de la misma manera que se usó en el padding
anterior. La clase container permite agregar un grid de bootstrap colocando automáticamente
un padding. La clase row permite definir una fila de la grilla. La clase col-lg-10 permite definir
10 columnas del total de 12 que ofrece bootstrap. La clase offset-lg-1 permite desplazar hacia la
derecha el contenido de 10 columnas, de esta forma tendríamos una columna nueva a la
izquierda del contenido. La clase alert-primary establece el color de fondo del alert.
En la próximo section dividiremos el contenido en dos grandes columnas. Usaremos la grilla
de Bootstrap empleando la clase –lg- (para dispositivos mayores de 992px) si el dispositivo es
menor de 992px las columnas tendrán el ancho completo y se mostrarán una debajo de la
otra. Si quisiera mostrar estas dos columnas una al lado de la otra en dispositivos más
pequeños (por ejemplo, un Smartphone) debería usar la clase -sm-
<section>
<div class="container my-3">
<div class="row">

</div>
<div class="col-lg-4">

</div>
</div>
</div>
</section>
Dentro de la columna 1, mostraremos los productos que venderemos usando la clase list-
group.
4
<section>
<div class="container my-3">
<div class="row">
<ul class="list-group">
<li class="list-group-item pt-4">
<h5>
Filets Premium <span class="badge bg-success">Nuevo</span>
</h5>
<p>
<span class="text-danger fw-bolder fs-5">$7500</span>
</p>
</li>
<h5>
Filets Premium+ Vino MALBEC
<span class="badge bg-success">Nuevo</span>
</h5>
<p>
</p>
</li>
<h5>Medallones de Merluza (2kg)</h5>
<p>
</p>
</li>
<h5>Rodajas de Salmón Rosado (2kg)</h5>
<p>
</p>
</li>
<h5>Kit Paella</h5>
<p>
</p>
</li>
</ul>
</div>
5
La clase babge proporciona un pequeño cuadro que se usa para indicar que el producto está
recién incorporado dentro de la página. A continuación, dentro de la columna 2 crearemos un
componente card (tarjeta)
<div class="col-lg-4">
<div class="card">
<div class="card-header text-center">Comprar desde Casa</div>
<div class="card-body">
<p class="card-text text-center">
Disfrute el pescado sin moverte de su casa.
</p>
<div class="col-md-12 text-center my-3">
<a href="#" class="btn btn-primary">Compre Ahora Mismo</a>
</div>
</div>
</div>
</div>
La clase card-header muestra un título dentro de la tarjeta. La clase btn permite decorar un
botón con los estilos de bootstrap. La clase btn-primary permite definir un color al botón en
este caso azul.

FDFC

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

FDFC

Cargado por

Copyright:

Formatos disponibles

Capítulo 10: Bootstrap 5 C.F.P Nro.

401 de San Martín

Bootstrap (https://getbootstrap.com/) es un conjunto de herramientas de código abierto para

A partir de la versión 5. Bootstrap no necesita el uso de la librería de JQuery.

El código se puede copiar de la página: https://getbootstrap.com/docs/5.3/getting-

<section class="bg-primary text-light text-center py-5">

El uso de clases es esencial en Bootstrap. Su nomenclador cambia según su

El sitio https://icons8.com/ permite descargar iconos, ilustraciones, fotos de

También podría gustarte