Diseño, Evaluación y Desarrollo de
Interfaces
Frameworks CSS: Bootstrap
Luis Rodríguez Baena (
[email protected])
Universidad Pontificia de Salamanca
Escuela Superior de Ingeniería y Arquitectura
Introducción
Un framwork CSS es un conjunto de herramientas
(hojas de estilo, scripts, etc.) y prácticas que
facilitan las tareas repetitivas para trabajar con CSS.
Bootstrap es un framework CSS que facilita la tarea
de diseño de una página web.
Aporta una serie de scripts y hojas de estilo que se
aplican en forma de clases al código HTML.
Facilita la creación de layouts basados en responsive
design mediante retículas.
También incorpora elementos avanzados para incluir
en la página.
● Menús desplegables, carruseles, migas de pan, controles de
formulario rediseñados, etc.
Universidad Pontificia de Salamanca. Escuela Superior de Ingeniería y Arquitectura
(CC) Luis Rodríguez Baena, 2014
2
Introducción
Descarga
Desde http://getbootstrap.com/ podemos
descargar:
● CSS compilado, scripts de javascripts y fuentes (la
forma más fácil de utilizarlo).
● Código fuente.
Contiene los archivos LESS y Javascript originales.
Permite configurar y personalizar los scripts.
Requiere un compilador LESS.
● Código fuente en formato SASS.
Facilita la integración de Bootstrap con otros proyectos
basados en SASS (Ruby on Rails, Compass, etc.).
Universidad Pontificia de Salamanca. Escuela Superior de Ingeniería y Arquitectura
(CC) Luis Rodríguez Baena, 2014
3
Introducción
Descarga (II)
Se distribuye en tres carpetas.
● Carpeta CSS.
Contiene la hoja de estilos principal (bootstrap.css) y una hoja de estilos
adicional con algunos efectos (bootstrap-theme.css).
Incluye las versiones comprimidas (sin saltos de línea ni retornos de carro):
bootstrap.min.css y bootstrap-theme.min.css.
● Carpeta js.
Contiene los scripts bootstrap.js y bootstrap.min.js.
Son plugins para algunas funciones de bootstrap (transiciones, menús
deplegables, navegación con pestañas, etc.).
● Carpeta fonts.
Un conjunto de iconos en formato ttf, svg, otf y woff.
Los plugins requiere jquery, por lo que habría que descargarlo
desde jquery.com/download/ (o llamarlo desde el código
html).
Para compatibilidad con navegadores anteriores también
requiere html5shiv.js y respond.js
● Se vieron en los apartados de html5 y CSS3.
Universidad Pontificia de Salamanca. Escuela Superior de Ingeniería y Arquitectura
(CC) Luis Rodríguez Baena, 2014
4
Introducción
Plantilla básica
La página debe estar hecha en html5.
Para poder adaptar el contenido a dispositivos móviles
necesita utilizar la etiqueta meta para el viewport.
Necesita incluir la referencia a la hoja de estilos de
bootstrap.
● Debe estar antes de nuestras hojas de estilo o estilos incrustados.
Es necesario hacer las llamadas a html5shiv.js y
respond.js para compatibilidad con navegadores
anteriores.
Para utilizar los plugins hay que hacer las llamadas a
jquery y bootstrap.js.
● Se colocan al final para optimizar la carga de código.
Universidad Pontificia de Salamanca. Escuela Superior de Ingeniería y Arquitectura
(CC) Luis Rodríguez Baena, 2014
5
Introducción
Plantilla básica (II)
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- HTML5 shim y Respond.js para soporte de los elementos de HTML5
y media queries en navegadores antiguos -->
<script src="js/modernizr.js"></script>
<script src="js/respond.min.js"></script>
</head>
<body>
<h1>¡Hola, mundo!</h1>
<!-- jQuery (para los plugins javascript de Bootstrap) -->
<script src="//code.jquery.com/jquery.js"></script>
<!– Incluir los plugins necesarios o bootstrap.min.js para incluir todos -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Universidad Pontificia de Salamanca. Escuela Superior de Ingeniería y Arquitectura
(CC) Luis Rodríguez Baena, 2014
6
Introducción
Compatibilidad
Es compatible con las la mayoría de las últimas
versiones de navegadores de escritorio y
móviles.
No es compatible con:
● Opera para iOS y Android.
● Firefox para Android (no hay Firefox para iOS).
Con respond.js y html5shiv.js es compatible con
versiones antiguas de Firefox y con IE8.
● No soporta versiones de Internet Explorer anteriores.
Universidad Pontificia de Salamanca. Escuela Superior de Ingeniería y Arquitectura
(CC) Luis Rodríguez Baena, 2014
7
Introducción
Personalización
Modificando los estilos.
● bootstrap.css presenta las clases en formato legible.
bootstrap.min.css es más difícil de leer.
● Para modificar una clase habría que:
Buscar el selector a modificar en bootstrap.css (es más fácil).
Copiar el selector en nuestra hoja de estilos o en el elemento style de
la página.
Añadir o cambiar las propiedades.
● Por ejemplo, en el ccs de bootstrap existe el selector.
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-
family:inherit;font-weight:500;line-
height:1.1;color:inherit}
○ Las cabeceras no están en negrita (font-weight:500 indica un grosor
medio).
La regla de estilo:
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
font-weight: bold;
}
○ Haría que los encabezamientos aparecieran en negrita.
Universidad Pontificia de Salamanca. Escuela Superior de Ingeniería y Arquitectura
(CC) Luis Rodríguez Baena, 2014
8
Introducción
Personalización (II)
Modificar los archivos fuentes LESS.
● Si descargamos el código fuente podemos modificarlo y
volverlo a compilar.
● El código fuente contiene variables y mixins que se pueden
modificar..
Los mixins con clases que dependen de variables y otras clases.
● El proceso se puede ver en lesscss.org/.
Quitar los componentes innecesarios y modificar
variables de forma interactiva.
● Desde getbootstrap.com/customize/ podemos seleccionar
los componentes que se quieren incluir.
● Se pueden modificar las variables.
● Se genera una nueva versión de Bootstrap con los
componentes deseados.
Universidad Pontificia de Salamanca. Escuela Superior de Ingeniería y Arquitectura
(CC) Luis Rodríguez Baena, 2014
9
Introducción
Personalización (III)
En getbootstrap.com/customize/ aparece la variable @body-bg.
● Cambiando su contenido podemos cambiar el color de fondo del elemento
body, por ejemplo, a azul claro..
También aparece la variable @font-family-sans-serif.
● Podemos cambiar su contenido para que la fuente Verdana, sea la familia
principal.
El botón “Compile and download” genera un nuevo conjunto de
CSS, js y font con los que se puede sustituir los originales.
Universidad Pontificia de Salamanca. Escuela Superior de Ingeniería y Arquitectura
(CC) Luis Rodríguez Baena, 2014
10
Introducción
Documentación
En este curso sólo se van a ver los temas
referentes al layout de la página.
Para el resto de componentes…
● En getbootstrap.com/getting-started/,
getbootstrap.com/css/, getbootstrap.com/components/
y getbootstrap.com/javascript/ se puede encontrar
documentación actualizada en inglés.
● Hay una versión en español en
www.oneskyapp.com/docs/bootstrap/es.
No está totalmente actualizada.
Universidad Pontificia de Salamanca. Escuela Superior de Ingeniería y Arquitectura
(CC) Luis Rodríguez Baena, 2014
11
Layout de la página
Sistema de retícula
Bootstrap utiliza un sistema de retícula basado en mobile first design.
● Los estilos sin media queries se aplican, por defecto, a móviles con pantalla pequeña.
El sistema de retícula se amplía a 12 columnas según se encuentran los
puntos de ruptura de las media queries.
Utiliza otros puntos de ruptura que pueden ser más específicos.
/* Puntos de ruptura generales */
/* Los valores @screen-* hacen referencia a variables LESS */
/* Extra small devices (phones, up to 480px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg) { ... }
/* Puntos de ruptura más específicos */
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg) { ... }
Universidad Pontificia de Salamanca. Escuela Superior de Ingeniería y Arquitectura
(CC) Luis Rodríguez Baena, 2014
12
Layout de la página
Sistema de retícula (II)
Las filas (clase .row) se utilizan para agrupar horizontalmente
varias columnas.
Las filas se incluyen dentro de un contenedor de la clase
.container (para ancho fijo) o .container-fluid (para ancho
flexible).
El contenido siempre se coloca en las columnas. Las filas sólo se
utilizan como contenedores de columnas.
Las columnas (clases .col-*) de la retícula definen su anchura
especificando cuántas de las 12 columnas de la fila ocupan.
● Si, por ejemplo, se quiere dividir una fila en tres columnas iguales en un
dispositivo mediano (aproximadamente de 1024 píxeles), se utilizará la clase
.col-md-4.
La md indica que es para dispositivos medianos.
El 4 indica que cada columna ocupa 4 de las 12 columnas en las que se divide cada fila.
Universidad Pontificia de Salamanca. Escuela Superior de Ingeniería y Arquitectura
(CC) Luis Rodríguez Baena, 2014
13
Layout de la página
Sistema de retícula (III
Crear cuenta
Comentarios de: Frameworks CSS: Bootstrap - Diseño, Evaluación y Desarrollo de Interfaces (0)
No hay comentarios