Clase 9: Bootstrap
Objetivos de la clase
Conocer qué es un framework
Aplicar las funcionalidades de Bootstrap
Librerías y frameworks
Librería
Es una colección de elementos, un
conjunto de rutinas, en este caso código,
que suelen tener un propósito concreto.
Framework
Es prácticamente lo que el nombre indica: un marco de trabajo. Se trata de un
conjunto de herramientas y código, para trabajar de acuerdo con una
metodología, utilizando determinados patrones.
Bootstrap
¿Qué es bootstrap?
Es un framework originalmente creado por Twitter,
que permite crear interfaces web con CSS y
JavaScript, y cuya particularidad es la de adaptar la
interfaz del sitio web al tamaño del dispositivo en que
se visualice (es responsive).
Bootstrap: ventajas
La más genérica, es que permite simplificar el proceso de maquetación,
sirve de guía para aplicar las buenas prácticas y los diferentes estándares.
Es responsive, ¡te ahorras mucho trabajo!
¡Maquetar por columnas es fácil!
Se integra muy bien con las principales librerías Javascript.
Te permite enriquecer aún más los estilos de la web.
Bootstrap: desventajas
Adaptación, es más complicado personalizarlo.
Mucho CSS que no se usará.
Mucho uso de clases.
Añadir componentes.
Mantenimiento, si has hecho muchos cambios.
¿Cómo se ve una página con bootstrap?
Utilizando bootstrap
Para visualizar correctamente este archivo utilizando las
clases de Bootstrap, se debe respetar la siguiente
estructura de directorios:
[Link]
css/
[Link]
[Link]
js/
[Link]
Instalar bootstrap
Hay 4 Maneras
1. Código compilado listo para usar para Bootstrap .
2. Archivos para compilar.
3. BootstrapCDN (enlace directo).
4. Instalando paquetes.
En este momento, vamos a usar las formas más sencillas:
● Con el enlace a los archivos.
● Descargando los archivos.
USANDO EL CDN
Forma 1
1 2 3
Se copia el CDN. Vamos al [Link] Insertar
Se pega enbreve
un texto el <head>
aquí
el CDN.
Reemplazar imagen
Instalando el compilado
Forma 2
1 2 3
Se descarga el Se lleva a la carpeta
Se descompila. Insertar un texto breve aquí
compilado. del proyecto.
Reemplazar imagen
Estructura de bootstrap
Tipografía
Tipografía en bootstrap
Todos los tags de <h1> a <h6> están estilados por Bootstrap.
También se puede utilizar el tag <small> para mostrar un texto
secundario
Tipografía en bootstrap
HTML
Otro ejemplo de estilo de texto puede ser para destacar un
párrafo como en el siguiente ejemplo usando la clase “lead”.
<p class="lead"">Aquí va el
contenido en un container fluid
con clase lead.</p>
Ver más ejemplos de texto con estilo en
[Link]
Contenedores
Contenedores
Cada contenedor tiene un ancho variable, que va a
HTML
depender de la resolución de pantalla del usuario.
Esto lo averiguará Bootstrap, y va a setearle el
ancho correspondiente.
<div class="container">
<h1>Título Principal</h1>
<p>Aquí va el contenido.</p>
</div>
Contenedores
En este caso, cuando el contendor es fluid, el ancho
siempre será de 100%, brindándonos la posibilidad
HTML
renderizar un div full width.
<div class="container-fluid"">
<h1>Título Principal</h1>
<p>Aquí va el contenido.</p>
</div>
Sistema de grillas
Sistema de grillas
La grilla se divide en 12 columnas, que
varían su ancho dependiendo de la
resolución del usuario móvil, o de escritorio.
Estas columnas se ubican siempre dentro de
una fila, el div .row mencionado
anteriormente.
Se representa como col-md-x que indica que
.col-md-4 el div ocupará X columnas en un .container
Columna
Dispositivo Cantidad de
de grilla
Columnas
Sistema de grillas
Si quisiéramos que el mismo div ocupe 6 columnas en un dispositivo de
480px de ancho, deberíamos aplicarle dos clases, para indicarle un
comportamiento para cada resolución, como se visualiza en el
siguiente ejemplo:
<div class="container">
<div class="row">
<div class="col-md-4 col-xs-6">columna
izquierda</div>
</div>
</div>
Sistema de grillas
Sistema de grillas
Con lo que hemos visto, logramos hacer rápidamente columnas, pero…
no especificamos cuántas columnas debe haber según de la resolución
del dispositivo:
Sistema de grillas
Sistema de grillas
Esto quiere decir que puedes nombrar un div con dos clases diferentes,
que proporcionarán distintos estilos al mismo elemento. Eso no será una
preocupación, ya que sólo se cargarán los estilos que correspondan
según el dispositivo que está renderizando la página en ese momento.
<div class="col-md-4 col-sm-6">
Sistema de grillas
Ejemplo de grilla:
Componentes Bootstrap
Tablas
Entre otros elementos, las tablas también están estiladas por el framework, como
se ve en el siguiente ejemplo:
<h1>Título Principal</h1>
<div class="container">
<h2>Tabla Básica</h2>
<p>La clase .table agrega un estilo básico
(relleno ligero y solo divisores horizontales) a
una tabla:</p>
<table class="table">
….
</table>
</div>
Formularios
Bootstrap aplica por defecto algunos estilos a todos los componentes
de los formularios. Si además añades la clase .form-control a los
elementos <input>, <textarea> y <select>, su anchura se establece a
width: 100%.
Si quieres optimizar el espaciado, utiliza la clase .form-group para
encerrar cada campo de formulario con su <label>.
<h1>Título Principal</h1>
Formulario <div class="container">
<h2>Formulario Básico</h2>
<form action="#">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control"
id="email" placeholder="Ingrese email" name="email">
</div>
…..
<button type="submit" class="btn btn-default">
Ingresar
</button>
</form>
</div>
Imágenes
Se pueden manejar estilos de imágenes:
<img src="[Link]" class="rounded"
alt="Obelisco BsAs">
<img src="[Link]"
class="img-thumbnail" alt="Obelisco
BsAs">
Dropdowns
<div class="dropdown">
<button type="button" class="btn btn-primary
dropdown-toggle" data-toggle="dropdown">
Elige una opción:
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Opción uno</a>
<a class="dropdown-item" href="#">Opción dos</a>
<a class="dropdown-item" href="#">Opción tres</a>
</div>
</div>
<div class="btn-group-vertical"> <!-- Agrupando botones verticalmente -->
<h2>Estilo de Botones</h2>
<button type="button" class="btn">Básico</button>
<button type="button" class="btn btn-primary">Primario</button>
<button type="button" class="btn btn-secondary">Secundario</button>
<button type="button" class="btn btn-success">Exitoso</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Advertencia</button>
<button type="button" class="btn btn-danger">Peligroso</button>
<button type="button" class="btn btn-dark">Oscuro</button>
<button type="button" class="btn btn-light">Claro</button>
<button type="button" class="btn btn-link">Enlace</button>
</div>
</div>
<div class="btn-group">
Grupos de botones <button type="button" class="btn
btn-primary">Inicio</button>
y menús desplegables
<button type="button" class="btn btn-primary">Quienes
Somos</button>
<div class="btn-group">
<button type="button" class="btn btn-primary
dropdown-toggle" data-toggle="dropdown">
Integrantes
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Cantante</a>
<a class="dropdown-item" href="#">Bajo</a>
¡Más ejemplos! </div>
</div>
</div>
<ul class="pagination">
<li class="page-item"><a class="page-link"
Paginación href="#">Anterior</a></li>
<li class="page-item"><a class="page-link"
href="#">1</a></li>
<li class="page-item"><a class="page-link"
href="#">2</a></li>
<li class="page-item"><a class="page-link"
href="#">3</a></li>
<li class="page-item"><a class="page-link"
href="#">Siguiente</a></li>
</ul>
<div class="container">
<p>Menú básico horizontal:</p>
nav menú <ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Quienes Somos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Historia</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Newlestter</a>
</li>
</ul>
</div>
¿Vamos a la
práctica?
¡A practicar!
En una página de tu proyecto, aplica las
diferentes funcionalidades vistas del
framework Bootstrap.
¿Preguntas?
Espacio para compartir
entregas intermedias
La entrega final deberá contener 5 secciones. ¡Te
sugerimos ir avanzando con las mismas!
La entrega final del módulo de HTML y CSS deberá incluir:
● Cinco archivos HTML independientes empleando los
tags semánticos de HTML5.
● Hoja de CSS externa y linkeada correctamente. Entrega
● Propiedades CSS para modificar textos, encabezados,
Final
img, colores, background y box modeling.
● Posicionar elementos haciendo uso de flexbox y/o
grids
● Media queries para ajustar la vista en distintos
dispositivos (celulares, tablet y escritorio)
● Bootstrap optativo
¡MUCHAS GRACIAS!
