Documentos de Académico
Documentos de Profesional
Documentos de Cultura
26 Bootstrapdfdf
26 Bootstrapdfdf
0
Aplicaciones Web/Sistemas Web
Bootstrap
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
Bootstrap
Bootstrap
Bootstrap
Se puede configurar
http://getbootstrap.com/getting-started/#customizing
http://getbootstrap.com/customize/
Bootstrap
Plantilla bsica
Bootstrap funciona con documentos HTML 5
<!DOCTYPEhtml>
<html lang="es">
El viewport es un atributo que permite definir
la anchura de la ventana del navegador para
<head>
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
Ejercicios
Descargar bootstrap
http://getbootstrap.com/
Download bootstrap
Fichero zip que contiene la distribucin bsica
Bootstrap
Viewport
width:
height:
initial-scale:
user-scale:
minimum-scale:
maximum-scale:
<metaname="viewport"content="width=devicewidth,initialscale=1.0">
<metaname="viewport"content="width=devicewidth,initialscale=1.0,
maximumscale=1.0,userscalable=no">
Bootstrap
Grid de 12 columnas
Men
1
2
10
11
12
Cabecera
Columna 1
Contenido principal
Columna 2
Bootstrap
Grid de 12 columnas
row
Grupos horizontales de columnas
Se deben declarar dentro de un container
Bootstrap
10
Grid de 12 columnas
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
Bootstrap
12
Ejercicio
10
11
12
Cabecera
Columna 1
Contenido principal
Columna 2
De 4
Sigue el contenido
Bootstrap
13
Tipografa
http://getbootstrap.com/css/#type
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 14px, con line-height 1.428
<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
Bootstrap
14
Tipografa
http://getbootstrap.com/css/#type
Listas
Unordered <ul>
Ordered <ol>
Descripciones <dl>
Cdigo
En lnea: <code><code></code>
En bloque: <pre> cdigo en varias lneas </pre>
Tablas
Formularios
Botones
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">
Bootstrap
16
Tabla de http://getbootstrap.com/css/#responsive-utilities
Bootstrap
17
Tabla de http://getbootstrap.com/css/#responsive-utilities
Bootstrap
18
Ejercicio
Bootstrap
19
Componentes
Dropdowns
Grupos de botones
Button dropdowns
Navegacin
Breadcrumbs, pagination
Labels
Badges
Jumbotron
Cabecera y pi de pgina
Bootstrap
20
Componentes
Thumbnails
Alertas
Barra de progreso
Media objects
Bootstrap
21
Componentes
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
Bootstrap
22
Ejercicios
Bootstrap
23
plugins jQuery
Transitions
Modals
Tooltips
Tabs
Mens
ScrollSpy
Dropdowns
Efectos de transiciones
Popovers
Bootstrap
24
plugins jQuery
Alert messages
Buttons
Carousel
Affix
Bootstrap
25
Ejercicio
Bootstrap
26
Personalizacin
Bootstrap
27
Bibliografa
Bootstrap
http://getbootstrap.com/
http://librosweb.es/bootstrap_3/
Bootstrap
28