Guia Bootstrap

Bootstrap
Introducción a Bootstrap
Bootstrap es un framework CSS desarrollado inicialmente (en el año 2011) por Twitter que permite
dar forma a un sitio web mediante librerías CSS que incluyen tipografías, botones, cuadros, menús y
otros elementos que pueden ser utilizados en cualquier sitio web.
Desde la aparición de Bootstrap 3 el framework se ha vuelto bastante más compatible con desarrollo
web responsive , entre otras características se han reforzado las siguientes:
• Se ha añadido un sistema GRID que permite diseñar usando un GRID de 12 columnas donde
se debe plasmar el contenido.
• Boostrap 3 establece Media Queries para 4 tamaños de dispositivos diferentes variando
dependiendo del tamaño de su pantalla, estas Media Queries permiten desarrollar para
dispositivos móviles y tablets de forma mucho más fácil.
• Boostrap 3 también permite insertar imágenes responsive, es decir, con solo insertar la
imagen con la clase “img-responsive” las imágenes se adaptarán al tamaño.
GRID
Es como una cuadrilla, es decir como si tuviéramos columnas y filas, algo así como una tabla,
entonces debemos comenzar a partir la columna de nuestros contenedores en filas y en columnas.
En la imagen tenemos un ejemplo: y podemos definir una fila y el número de columnas que debe ser
como máximo 12, lo que hace el Grid es expandir el número de columnas en un ancho equivalente
para cada una y que siempre ocupen todo el
Actividades:
1. Creé un archivo HTML llamado “grid.html”.

2. Agregar como título de la página el texto “Uso del Grid de Bootstrap”.
<!doctype html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1"> 
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/boo
tstrap.min.css" rel="stylesheet" integrity="sha384-
EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
cro ssorigin="anonymous">
<title>Uso del Grid de Bootstrap</title>
</head>
<body>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/boo
tstrap.bundle.min.js" integrity="sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
cro ssorigin="anonymous"></script>
</body>
</html>
3. Coloque el siguiente código HTML dentro del cuerpo de su página web
<h3>Un Primer Ejemplo Básico de Bootstrap!</h3>

<div class="container">
<h3>Un Ejemplo Basico de Bootstrap</h3>

<div class="row">
<div class="col-sm">.col-sm</div>
</div>
Visualice los resultados en su navegador. Debería obtener un resultado similar al siguiente:
4. Para mejorar un poco la claridad de los ejemplos presentados vamos a colocarle un borde a cada
una de las cajas, para ello debemos crear una hoja de estilo llamada “estilo1.css” que deberá
contener las siguientes reglas de estilo.
body{
background-color: #00d9ff54;
}
.col{
margin-top: 30px;
margin-bottom: 15px;
}
div [class^="col-"]{
border: 1px solid rgb(223, 92, 92);
padding-top: 10px;
padding-bottom: 10px;
background: rgb(250, 246, 246);
}
5. Vincule la hoja de estilo creada en el paso anterior con su página web. Asegúrese que el llamado a
la hoja de estilo “estilo1.css” este inmediatamente después del llamado de la hoja de estilo de
Bootstrap.
<link rel="stylesheet" href="estilo2.css">
Resultado:
Observe: los resultados en su navegador. Notará que cada una de las cajas cubre exactamente
una de las 12 columnas del sistema de grid de Bootstrap.
Cambiando el tamaño mínimo a 576
Cambiando el tamaño máximo 576
6. Aplicar media query para tablets

@media (min-width:768px)
{
Body
{
background-color: #ffb74D;
}
}
7. Aplicar media query para computadoras con un ancho menor a 1200px
{
Body
{
background-color: #81c764;
}
}
8. Aplicar media query para computadoras con un ancho mayor a 1200px

{
Body
{
background-color: #5C6BC0;
}
}
9. Selección de tamaño de las columnas solo para pantallas medianas

En el siguiente ejemplo se han creado 3 filas, la primera dividida en 2 columnas de tamaño
desigual, la segunda en 3 columnas de igual tamaño y la tercera en 2 columnas también de igual
tamaño.
<h3>Un Ejemplo Tamaño de las columnas solo para pantallas medianas</h3 >
<div class="row">
<div class="col-md-8">.col-md-8</div>
</div>
<div class="row">
</div>
<div class="row">
</div>
</div>
Resultado:
10. Selección de tres tamaños: extra pequeño, pequeño y mediano

Si queremos tener un mayor control podemos especificar también el tamaño de las columnas
para las pantallas tipo small con las clases .col-sm-*. Por ejemplo:
<h3>Un Ejemplo Selección de tres tamaños: extra pequeño, pequeño y
med iano</h3>
<div class="row">
<div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-
8</div> <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
</div>
Resultado:
11. Selección de dos tamaños de columna: pequeño y mediano

Si no queremos que las columnas se muestren apiladas para tamaños de pantalla pequeños
podemos indicar también la disposición para esos casos mediante las clases .col-* además de
las que ya teníamos con .col-md-*. Por ejemplo
<h3>Un Ejemplo Selección de dos tamaños de columna: pequeño y
mediano</h 3>
<!-En pantallas pequeñas aparecerá una columna que ocupará todo el ancho y
otra que ocupará la mitad de la pantalla -->
<div class="row">
<div class="col-12 col-md-8">.col-12 .col-md-8</div>
</div>

<div class="row">
</div>

<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Resultado:
DISEÑANDO FORMULARIO DE LOGIN
1. Creé un archivo HTML llamado “login.html”.
2. Escribir la estructura básica de un documento HTML en el archivo creado en el paso anterior.
3. Colocar como título de la página el texto “Inicio de sesión”.
4. Vincule la hoja de estilo de Bootstrap dentro de su página web.
5. Escribir el siguiente código en la página web
<h3><center>Diseño de Formularios</center></h3>
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form
label">Direccion de Correo</label>
<input type="email" class="form
control" id="exampleInputEmail1" aria-
describedby="emailHelp"> </div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form
label">Contraseña</label>
<input type="password" class="form
control" id="exampleInputPassword1">
</div>
<button type="submit" class="btn btn
primary">Iniciar Sesion</button>
</form>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/boot
strap.bundle.min.js" integrity="sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorig in="anonymous"></script>
</div>
6. Crear el estilo para cambiar el tamaño del container
.container {
width: 400px !important;
background-color: bisque;
}
Resultado:
Crear Formularios en Línea (Inline)
<h3><center>Diseño de Formularios</center></h3>
<!-- Hacemos uso de la clase 'form-inline' en la etiqueta del formulario --

> <form class="form-inline" id="miformulario">
<label class="sr-only" for="usuario">Usuario</label>
<input type="text" class="form-control mb-2 mr-sm
2" id="usuario" placeholder="jrc2020" required>
<label class="sr-only" for="contraseña">Contraseña</label>
<div class="input-group mb-2 mr-sm-2">
<input type="password" class="form
control" id="contraseña" placeholder="Contraseña"
required> </div>
<div class="form-check mb-2 mr-sm-2">
<input class="form-check-input" type="checkbox" id="recordar">
<label class="form-check-label" for="recordar">
Recordar
</label>
</div>
<button type="submit" class="btn btn-primary mb-2">Aceptar</button>
</form>
</div>
Resultado:
Actividades
1. Diseña una galería fotográfica con 6 imágenes que se visualice de la siguiente forma:
• Tamaño col y col-sm: Una sola imagen por fila.
• Tamaño col-md y col-lg: Dos imágenes por fila.
• Tamaño col-xl: Tres imágenes por fila.
Utiliza las clases de imágenes img-fluid e img-thumbnail, así como bordes, paddings o márgenes de
las correspondientes utilidades de Bootstrap
2. Crear una página con la siguiente distribución:
3. Investigue y presente un ejemplo de uso de cada uno de los siguientes componentes de

Bootstrap:
• Iconos.
• Grupos de campos de formularios.
• Menús de navegación.
• Migas de pan.
• Paginadores.
• Jumbotron
• Mensajes de alerta.
• Barras de progreso.
• Lista de elementos.
• Paneles.
VI
Referencia
https://www.youtube.com/watch?v=qgxhrJFTOJs
https://www.youtube.com/watch?v=qgxhrJFTOJs
https://ajgallego.gitbook.io/bootstrap-4/sistema-de-rejilla/columnas-de-ancho-
especifico http://materiales.iescdl.es/Almacen/Curso_2017-
2018/CFGM.SMR/SMR2/HLC/04%20- %20Bootstrap//ejercicios_bootstrap4.pdf
http://www.fdi.ucm.es/profesor/jpavon/web/26-bootstrap.pdf

Guia Bootstrap

Cargado por

Información del documento

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

Guia Bootstrap

Cargado por

Copyright:

Formatos disponibles

Bootstrap

1. Creé un archivo HTML llamado “grid.html”.

3. Coloque el siguiente código HTML dentro del cuerpo de su página web

<h3>Un Primer Ejemplo Básico de Bootstrap!</h3>

<h3>Un Ejemplo Basico de Bootstrap</h3>

Cambiando el tamaño mínimo a 576

Cambiando el tamaño máximo 576

6. Aplicar media query para tablets

7. Aplicar media query para computadoras con un ancho menor a 1200px

8. Aplicar media query para computadoras con un ancho mayor a 1200px

9. Selección de tamaño de las columnas solo para pantallas medianas

10. Selección de tres tamaños: extra pequeño, pequeño y mediano

11. Selección de dos tamaños de columna: pequeño y mediano

<!-- Como no se indica el tamaño para pantallas grandes las columnas

Crear Formularios en Línea (Inline)

<!-- Hacemos uso de la clase 'form-inline' en la etiqueta del formulario --

2. Crear una página con la siguiente distribución:

3. Investigue y presente un ejemplo de uso de cada uno de los siguientes componentes de

También podría gustarte