Documentos de Académico
Documentos de Profesional
Documentos de Cultura
26 Bootstrap PDF
26 Bootstrap PDF
Bootstrap
Abierto
Publicado en 2011 con licencia Apache
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
http://getbootstrap.com/getting-started/#customizing
http://getbootstrap.com/customize/
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
Descargar bootstrap
http://getbootstrap.com/
Download bootstrap
Fichero zip que contiene la distribucin bsica
Viewport
Men
1 2 3 4 5 6 7 8 9 10 11 12
Cabecera
Grid de 12 columnas
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
Cabecera
Sigue el contenido
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
Juan Pavn - UCM 2013-14 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
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">
Tabla de http://getbootstrap.com/css/#responsive-utilities
Tabla de http://getbootstrap.com/css/#responsive-utilities
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
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
Componentes
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
Alert messages
Mensajes con un tick para desactivarlos
Buttons
Control de los botones
Carousel
Permite hacer presentaciones/diaporamas
Affix
Subnavegacin con un men lateral
Ejercicio
Bibliografa
Bootstrap
http://getbootstrap.com/