Programación Web – 4 Bootstrap
Por: Ing. Luis Daniel Lepe Rodríguez
Bootstrap es un framework CSS
utilizado en aplicaciones front-
end — es decir, en la pantalla
de interfaz con el usuario— para
desarrollar aplicaciones que se
adaptan a cualquier dispositivo.
Bootstrap
Es la librería para front-end más popular que sirve
para construir páginas web responsivas.
Introducción a Bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Metadatos -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> Bootstrap CSS
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link href="[Link] rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hola mundo</title>
</head>
<body> Bootstrap JS
<h1>Hola mundo</h1>
<!-- Bootstrap Javascript -->
<script src="[Link]
integrity="sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
[Link]
Containers
Los contenedores son el elemento de diseño más básico en Bootstrap y son requeridos al
momento de utilizar el sistema de Grids que define la librería.
Bootstrap tiene 3 tipos de contenedores:
<div class="container">
.container, el cual define un ancho máximo a cada punto de quiebre. <!-- Contenido aquí -->
.container-fluid, el cual define el ancho al 100% de todos los puntos de </div>
quiebre.
.container-{breakpoint}, define el ancho al 100% hasta el punto de
quiebre especificado.
[Link]
Grid system
Potente cuadrícula de flexbox para crear diseños de todas las formas y tamaños gracias
a un sistema de doce columnas, seis niveles de respuesta predeterminados, variables Sass
y mixins, y docenas de clases predefinidas.
El Grid system de Bootstrap utiliza una serie de contenedores, filas y columnas para
diseñar y alinear el contenido. Está construido con flexbox y es totalmente receptivo. A
continuación se muestra un ejemplo y una mirada en profundidad a cómo se une la
cuadrícula.
[Link]
Grid system - Ejemplo
<div class="container">
<div class="row">
<div class="col">
Column
Una fila con 3 columnas </div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
[Link]
Componentes
Bootstrap posee más de 20 componentes que permiten agregar funcionalidades de manera
sencilla a una página web, entre ellos hay:
Alerts
Card
Carousel
Carousel
Navs & tabs
Popovers
Tarea
Realizar el ejercicio encargado por el profesor.
Hacer un resumen de lo que se vio durante esta
clase.
