PDF de programación - Frameworks CSS: Bootstrap - Diseño, Evaluación y Desarrollo de Interfaces

Imágen de pdf Frameworks CSS: Bootstrap - Diseño, Evaluación y Desarrollo de Interfaces

Frameworks CSS: Bootstrap - Diseño, Evaluación y Desarrollo de Interfacesgráfica de visualizaciones

Publicado el 9 de Mayo del 2018
842 visualizaciones desde el 9 de Mayo del 2018
1,1 MB
47 paginas
Creado hace 6a (26/04/2014)
Diseño, Evaluación y Desarrollo de
Interfaces

Frameworks CSS: Bootstrap

Luis Rodríguez Baena (luis.rodriguez@upsam.es)

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
  • Links de descarga
http://lwp-l.com/pdf11004

Comentarios de: Frameworks CSS: Bootstrap - Diseño, Evaluación y Desarrollo de Interfaces (0)


No hay comentarios
 

Comentar...

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad