INGENIERIA DE

SOFTWARE II

Páginas Web con Bootstrap

 Generalidades
 Bootstrap es el framework de HTML, CSS y Javascript
más popular para desarrollar páginas Web
adaptativas (responsive).

 Bootstrap es un framework gratis para desarrollo más

rápido y fácil de páginas Web.

 Bootstrap incluye plantillas basadas en HTML y CSS

para tipografía, formularios, botones, tablas,
navegación, carruseles de imágenes y muchos otros.

 Bootstrap también te da la habilidad para facilmente

crear diseños adaptativos (responsive designs).
 Generalidades
 Para utilizer Bootstrap hay dos opciones
 Descargar bootstrap desde getbootstrap.com
 Incluir bootstrap desde un CDN (Content Delivery
Network)
Generalidades
 Generalidades
Hay dos clases de container que se pueden elegir:
 La clase .container proporciona un contenedor de
ancho fijo adaptativo.
 La clase .container-fluid proporciona un contenedor
extendido por todo el ancho de la página.

 Nota: los container no se pueden anidar (no se puede

poner un container dentro de otro container).
 Sistema de rejilla
 El Sistema de rejilla de Bootstrap permite hasta 12
columnas a lo largo de la página.
 Si no se quiere utilizar las doce columnas, éstas se
pueden agrupar para formar columnas más anchas.
 Sistema de rejilla
 El Sistema de rejilla de bootstrap tiene cuatro clases:

 xs (para teléfonos)
 sm (para tablets)
 md (para PCs de escritorio)
 lg (para PCs más grandes)

 Estas clases se pueden combinar para crear

distribuciones más dinámicas y flexibles.
Sistema de rejilla
 Tipografía
 Bootstrap tambien tiene algunas clases contextuales
que permiten transmitir “significado a través de
colores”.
 Las clases para colores de texto son: .text-muted,
.text-primary, .text-success, .text-info, .text-
warning, and .text-danger.

 Las clases para colores de fondo son: .bg-primary,

.bg-success, bg-info, bg-warning, and .bg-danger:
Tipografía
Tipografía
Tipografía
Tablas
Tablas
Tablas
Botones
Botones
Botones
Botones
Paneles
Menú desplegable
 Formularios
 Para los formularios siempre utilizar <form
role="form"> ya que ayuda a mejorar la accesibilidad
para personas con lectores de pantalla.

 Encerrar todos los labels y controles de formulario

con <div class="form-group"> (necesario para un
espaciado óptimo).

 Añadir la clase .form-control a todos los elementos

<input>, <textarea> y <select>
Formularios
 Formularios
 Bootstrap soporta los siguientes controles de
formulario:
 input
 textarea
 checkbox
 radio
 select
 Bootstrap soporta todos los tipos de input de HTML5:
text, password, datetime, datetime-local, date,
month, time, week, number, email, url, search, tel,
y color.
Formularios
Formularios
¿ Preguntas ?