Scribd
Cargar
90 vistas14 páginas

0094 Css Bootstrap

El documento describe Bootstrap 3.0, un framework de desarrollo web que facilita la creación de aplicaciones web y sitios responsive. Bootstrap proporciona diseños web predefinidos para componentes como botones, menús de navegación y tablas, así como una cuadrícula de 12 columnas para diseños de página. Es ligero, basado en HTML5/CSS3 y se adapta a diferentes dispositivos como ordenadores de escritorio, tabletas y teléfonos móviles.

Cargado por

Carlos Saavedra
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
90 vistas14 páginas

0094 Css Bootstrap

El documento describe Bootstrap 3.0, un framework de desarrollo web que facilita la creación de aplicaciones web y sitios responsive. Bootstrap proporciona diseños web predefinidos para componentes como botones, menús de navegación y tablas, así como una cuadrícula de 12 columnas para diseños de página. Es ligero, basado en HTML5/CSS3 y se adapta a diferentes dispositivos como ordenadores de escritorio, tabletas y teléfonos móviles.

Cargado por

Carlos Saavedra
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 14

Bootstrap 3.

Aplica cion e s W e b/ Sist e m a s W e b

Ju a n Pa vn M e st r a s
D e p. I n ge n ie r a de l Soft w a r e e I n t e lige n cia Ar t ificia l
Fa cu lt a d de I n for m t ica
Un ive r sida d Com plu t e n se M a dr id

Curso de Aplicaciones Web/ Sist em as Web by Juan Pavn Mest ras is licensed under
a Creat ive Com m ons Reconocim ient o- Com part irI gual 3.0 Unport ed License.

Bootstrap

Fram ework de t wit t er para desarrollo de aplicaciones web


Sencillo y ligero
Puede bastar con un fichero CSS y uno JavaScript
Basado en los ltimos estndares de desarrollo de Web
HTML5, CSS3 y JavaScript/JQuery
Plugins de jQuery para validar entrada de datos, visualizacin tablas,
grafos, etc.
Curva de aprendizaje baja
Compatible con todos los navegadores habituales
Arquitectura basada en LESS
Reset CSS basado en Normalize.css

Abierto
Publicado en 2011 con licencia Apache

Juan Pavn - UCM 2013-14 Bootstrap 2


Responsive web design

Responsive web design


Diseo de pginas web para que el usuario las visualice
perfectamente en un amplio rango de dispositivos
Navegador en el PC, tableta, smartphone
Bootstrap 3: Mobile first
Se ha rediseado para adaptarse desde el principio a tamaos de
pantalla tpicos de los mviles
Sistema grid fluido que escala a 12 columnas al aumentar el tamao
del viewport
Ver cambios de bootstrap 2.x a 3.0 en:
ht t p: / / get boot st rap.com / get t ing- st art ed/ # m igrat ion- classes

Juan Pavn - UCM 2013-14 Bootstrap 3

Distribucin bsica: http://getbootstrap.com/

bootstrap/
css/
clases de base de bootstrap
bootstrap.css
igual pero sin comentarios
bootstrap.min.css
bootstrap-theme.css aade efectos 3D a botones y otros elementos
bootstrap-theme.min.css igual pero sin comentarios
js/
funciones JavaScript de los componentes de bootstrap
bootstrap.js
igual pero sin comentarios
bootstrap.min.js
fonts/
glyphicons-halflings-regular.eot Iconos grficos

glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff

En produccin se usan las versiones .m in que ahorran espacio


Juan Pavn - UCM 2013-14 Bootstrap 4
Se puede configurar

http://getbootstrap.com/getting-started/#customizing
http://getbootstrap.com/customize/

Juan Pavn - UCM 2013-14 Bootstrap 5

Plantilla bsica
Bootstrap funciona con documentos HTML 5
<!DOCTYPEhtml>
<html lang="es"> El viewport es un atributo que permite definir
<head> la anchura de la ventana del navegador para
adaptar la pgina automticamente
<metacharset="utf8">
<metaname="viewport"content="width=devicewidth,initialscale=1.0">
<title>PlantillabsicadeBootstrap enespaol</title>
<! CSSdeBootstrap >
<linkhref="css/bootstrap.min.css"rel="stylesheet">
</head> Inclusin de la librera CSS de bootstrap
<body>
<h1>Holamundo!</h1> Necesita jquery

<! LibrerajQuery requeridaporlosplugins deJavaScript>


<scriptsrc="http://code.jquery.com/jquery.js"></script>
<! Todoslosplugins JavaScriptdeBootstrap >
<scriptsrc="js/bootstrap.min.js"></script>
</body>
Inclusin de la librera JS de bootstrap
</html>
Juan Pavn - UCM 2013-14 Bootstrap 6
Ejercicios

Descargar bootstrap
http://getbootstrap.com/
Download bootstrap
Fichero zip que contiene la distribucin bsica

Probar el ejemplo bsico


Crear un proyecto de sitio web
Copiar los directorios de bootstrap (css, fonts y js) en la raz del sitio
Crear un index.html con la plantilla bsica de
http://getbootstrap.com/getting-started/
Comprobar que estn bien los enlaces a los ficheros de bootstrap
Habr que adaptarlos a tu organizacin de los ficheros
Comprobar que se incluye jquery.js (al final del fichero)

Probar con otras plantillas

Juan Pavn - UCM 2013-14 Bootstrap 7

Viewport

rea visual en la que se muestran los documentos HTML


Atributos
width: device-width o nmero de pixels
height: device-height o valor en pixels
initial-scale: 0..1 (1 indica que es sin escala)
user-scale: yes/no (indica si el usuario puede cambiar la escala)
minimum-scale: 0..1 (escala mnima del viewport)
maximum-scale: 0..1 (escala mxima del viewport)

Para aplicar responsive design:


<metaname="viewport"content="width=devicewidth,initialscale=1.0">

En mviles conviene deshabilitar el zooming:


<metaname="viewport"content="width=devicewidth,initialscale=1.0,
maximumscale=1.0,userscalable=no">

Juan Pavn - UCM 2013-14 Bootstrap 8


Grid de 12 columnas

Men
1 2 3 4 5 6 7 8 9 10 11 12
Cabecera

Columna 1 Contenido principal Columna 2

Juan Pavn - UCM 2013-14 Bootstrap 9

Grid de 12 columnas

Grid de 960px (basado en http://960.gs)


Por defecto columnas de 60px y offset de 20px
Se adapta dependiendo del viewport
Por debajo de 768px (tabletas, smartphones) las columnas pasan a
fluid y se apilan verticalmente

La pgina se estructura en bloques del grid


Clases definidas en el CSS de bootstrap
container (fluido)
Se encarga de alinear y ajustar los mrgenes adecuadamente
row
Grupos horizontales de columnas
Se deben declarar dentro de un container
col-md-1, col-md-2, col-md-3, col-md-12
col-md-offset-1, col-md-offset-2, col-md-offset-3,
En la versin 2 de bootstrap era span1, span2, etc. y offset1, offset2,
Se puede usar versiones col-xs-* y col-sm-* para hacer varias
columnas en dispositivos mviles y no siempre apilar

Juan Pavn - UCM 2013-14 Bootstrap 10


Grid de 12 columnas

Adaptacin en funcin del ancho del viewport

Tabla de la docum ent acin en lnea en ht t p: / / get boot st rap.com / css/


Juan Pavn - UCM 2013-14 Bootstrap 11

Grid de 12 columnas

<divclass="container">
<divclass="row">
<divclass="colmd4">
<h2>Cajade4columnas</h2>
</div>

<divclass="colmd6colmdoffset2">
<h2>Offsetde2columnasycajade6columnas</h2>
<divclass="row">
<divclass="colmd8"><p>Anidadode4</p></div>
<divclass="colmd4"><p>Anidadode2</p></div>
</div>
</div>
</div>
La suma de
</div> columnas anidadas
tiene que ser 12

Juan Pavn - UCM 2013-14 Bootstrap 12


Ejercicio

Crear un una pgina con la siguiente distribucin:


Men
1 2 3 4 5 6 7 8 9 10 11 12

Cabecera

Columna 1 Contenido principal Columna 2

Subcajas (deben sumar 12)


De 2 De 4

Sigue el contenido

Juan Pavn - UCM 2013-14 Bootstrap 13

Tipografa

ht t p: / / get boot st rap.com / css/ # t ype


Bootstrap define la tipografa para distintos tipos de texto
h1, h2, h3, h4, h5, h6: Semibold 36px, 30px, 24px, 18px, 14px, 12px
Con <small> dentro del header se puede aadir texto ms pequeo
<h1>h1.Cabecera deBootstrap<small>Texto secundario</small></h1>

<body> y <p>
font-size por defecto 1 4 px , con line-height 1 .4 2 8
<p> tienen un margen inferior por defecto de 10px
<p class="lead">...</p> para resaltar el texto
Tambin <small> <strong> y <em>
Alineacin de texto
<p class="text-left">Texto alineado a la izquierda</p>
<p class="text-center">Texto centrado</p>
<p class="text-right">Texto alineado a la derecha</p>
<abbr title="abreviatura">abr</abbr>
<address> para direcciones
<blockquote> para citar un texto
Juan Pavn - UCM 2013-14 Bootstrap 14
Tipografa

ht t p: / / get boot st rap.com / css/ # t ype


Listas
Unordered <ul>
Ordered <ol>
Descripciones <dl>

Cdigo
En lnea: <code>&lt;code&gt;</code>
En bloque: <pre> cdigo en varias lneas </pre>

Tablas

Formularios

Botones

Juan Pavn - UCM 2013-14 Bootstrap 15

Imgenes redimensionables
img {
maxwidth: 100%;
height: auto;
}
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Juan Pavn - UCM 2013-14 Bootstrap 16


Utilidades para responsive design

Se pueden ocultar elementos de una pgina dependiendo del


dispositivo con las siguientes clases ( aplicables solo para bloques)

Tabla de ht t p: / / get boot st rap.com / css/ # responsive- ut ilit ies

Juan Pavn - UCM 2013-14 Bootstrap 17

Utilidades para responsive design

Igualmente para impresin de pgina ( aplicables solo para bloques)

Tabla de ht t p: / / get boot st rap.com / css/ # responsive- ut ilit ies

Juan Pavn - UCM 2013-14 Bootstrap 18


Ejercicio

Comprobar en http://getbootstrap.com/css las distintas


posibilidades de tipografa que ofrece bootstrap para tablas,
formularios y botones

Juan Pavn - UCM 2013-14 Bootstrap 19

Componentes

Dropdowns
Grupos de botones
Button dropdowns

Navegacin
Tabs, pills, justified, disabled links,
Navbars

Breadcrumbs, pagination
Indican el lugar de navegacin en la jerarqua del sitio

Labels
Badges
Jumbotron
Bloque para llamar la atencin sobre un contenido
Cabecera y pi de pgina

Juan Pavn - UCM 2013-14 Bootstrap 20


Componentes

Thumbnails
Para agrupar fotos o imgenes fcilmente

Alertas

Barra de progreso

Media objects
Comentarios de blogs, tweets, etc. que requieren una pequea
imagen alineada a la izquierda o derecha del texto

Juan Pavn - UCM 2013-14 Bootstrap 21

Componentes

Iconos del proyecto Glyphicons


fonts/
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff

Juan Pavn - UCM 2013-14 Bootstrap 22


Ejercicios

Jugar con los componentes que se pueden encontrar en


http://getbootstrap.com/components

Juan Pavn - UCM 2013-14 Bootstrap 23

plugins jQuery

Transitions
Efectos de transiciones
Modals
Ventanas de dilogo que requieren una respuesta sencilla del usuario
Dropdowns
Mens
ScrollSpy
Actualiza automticamente los objetos de navegacin al pasar el ratn
o dedo por un componente (resaltando o sacando el men)
Tabs
Efectos para activar o desactivar tabs
Tooltips
Saca informacin sobre un elemento al pasar por el
Popovers
Informacin que se saca sobre un elemento

Juan Pavn - UCM 2013-14 Bootstrap 24


plugins jQuery

Alert messages
Mensajes con un tick para desactivarlos
Buttons
Control de los botones
Carousel
Permite hacer presentaciones/diaporamas
Affix
Subnavegacin con un men lateral

Juan Pavn - UCM 2013-14 Bootstrap 25

Ejercicio

Crear una pgina con un diaporama de fotos

Juan Pavn - UCM 2013-14 Bootstrap 26


Personalizacin

Generar los ficheros con propiedades personalizadas en


http://getbootstrap.com/customize

Crear un fichero ejercicios.css donde incluir declaraciones para


personalizar el sitio
Incluirlo en el HTML de trabajo
<link href="css/ejercicio.css" rel="stylesheet">

Juan Pavn - UCM 2013-14 Bootstrap 27

Bibliografa

Bootstrap
http://getbootstrap.com/

J. Spurlock. Boot st rap. O'Reilly (2013)

D. Cochran. Twit t er Boot st rap Web Developm ent How- To. Packt
Publishing (2012)

LibrosWeb: Bootstrap 3, el manual oficial


http://librosweb.es/bootstrap_3/

Juan Pavn - UCM 2013-14 Bootstrap 28

También podría gustarte