Expo Ati3

Universidad Central de Venezuela Facultad de Ciencias Escuela de Computacin
Twitter Bootstrap
Aplicaciones con Tecnologa Internet
ATI- Twitter Bootstrap
Agenda
Conceptos Bsicos Compatibilidad del navegador
Diseos Bsicos
Resoluciones Funcionalidades
JavaScript
LESS Referencias
Conceptos Bsicos
Twitter Bootstrap
Es un framework o conjunto de herramientas front-end, con un HTML ms simple y flexible para el desarrollo de aplicaciones web Contiene archivos CSS y JavaScript para ofrecer plantillas que permiten crear estilos de tipografas, formularios, botones, tablas, alertas y navegacin
Ventajas
Diseo en distintos dispositivos y a distintas escalas y resoluciones. Integracin con libreras, como por ejemplo jQuery.
Un diseo slido basado en herramientas como LESS o estndares como CSS3/HTML5

De cdigo abierto, Construido y mantenido por la comunidad a travs de GitHub
Diseadores plataforma
@MarkOtto
de
la
@JacobThornton
Compatibilidad del navegador
Compatibilidad
Diseos Bsicos
Cmo comenzar?
1. Descargar la distribucin desde: http://twitter.github.com/boot strap/ 2. Aadir HTML Shim, <Html lang = "es" > 3. Incluir CSS
10
11
Layout
El sistema por defecto que proporciona bootstrap es de 940px de ancho, 12-columna de la cuadrcula.
Tambin tiene 4 variantes de respuesta para varios dispositivos y resoluciones bootstrap-layout.html
12
13
Diseos Bsicos
Fijo El valor por defecto y simple 940px de ancho, proporcionada por un nico. <div class="container"> . Fluido <div class="container-fluid"> da la estructura de pginas flexibles, min-max y anchos, y una barra lateral izquierda.
14
Diseo Fijo
15
Diseo Fuido
16
Responsive de diseo
Modificar el ancho de columna en nuestra aplicacion Pila de elementos en vez de flotar siempre que sea necesario Cambiar el tamao de ttulos y el texto ms apropiado para los dispositivos Requiere etiqueta meta
17
Resoluciones
18
Clases de capacidad de respuesta

El uso de estas clases de servicios es para mostrar u ocultar el contenido en un dispositivo.
19
Class
.visible-phone .visible-tablet .visible-desktop
Phones480px and below

Visible Hidden Hidden
Tablets767px and below

Hidden Visible Hidden
Desktops768px and above

Hidden Hidden Visible
.hidden-phone
.hidden-tablet .hidden-desktop
Hidden
Visible Visible
Visible
Hidden Visible
Visible
Visible Hidden
20
Funcionalidades
21
Listas
22
Tipo Sin ordenar
Definicin <ul>
Sin estilo
Ordenado Descripcin Descripcin Horizontal
<ul class="unstyled">
<ol> <dl> <dl class="dl-horizontal">
23
Nombre Defecto Bsico Bordeado Zebra de banda
Class Ninguno .table .table-bordered .table-striped
Descripcin No hay estilos, columnas y filas slo Slo lneas horizontales entre las filas Redondea las esquinas y aade borde exterior Aade color de la luz de fondo gris a las filas impares (1, 3, 5, etc)
Condensado
.tablecondensed
Los cortes verticales en la mitad de relleno, de 8px a 4px, dentro de todos los td y th elementos
24
Botones
Pueden ser aplicados sobre
enlaces, como en etiquetas

button/input aplicando la clase btn. Propsito .btn-primary, .btn-info, .btnsuccess, .btn-warning, .btndanger o .btn-inverse
25
Botn btn
class
Descripcin
Botn estndar en color gris con gradiente Proporciona peso visual adicional e identifica la accin primaria en un conjunto de botones Se utiliza como una alternativa a los estilos por defecto
btn btnprimary btn btn-info
btn btnsuccess
btn btnwarning btn btndanger btn btninverse
Indica una accin exitosa o positiva

Indica que se debe tener cuidado con esta accin Indica una accin peligrosa o potencialmente negativos Alterna el botn de color gris oscuro, no atada a una accin semntica o el uso
26
Botones
Variar su tamao <a class="btn btn-large btnprimary" href="">Primary action</a> <button class="btn btn-small btn-primary" type="submit">Primary action</button> <input class="btn btn-mini btnprimary" type="button" value="Primary action"/>
27
Botones
conos Gracias a toda una lista de iconos predefinidos, podemos aadir un icono a los botones de forma sencilla. <a class="btn btn-success" href="#"> <i class="icon-shopping-cart icon-white"> </i> Checkout </a>
28
Botones
Dropdown Componente que nos permite asociar un men desplegable a un botn, con el fin de mostrar un conjunto de opciones de forma agrupada bootstrap-botones.html
29
<div class="btn-group"> <a class="btn btn-danger dropdown-toggle" datatoggle="dropdown" href="#"> Danger <span class="caret"></span> </a> <ul class="dropdown-menu">
<li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li>
</ul> </div>
30
Formularios
31
Formularios
Incluye estilos para todos los controles de base como forma de entrada, rea de texto, y seleccione lo que espera. Soporte para cuatro tipos de diseo del formulario: Vertical (por defecto) Buscar En lnea Horizontal
32
Nombre Vertical (por defecto) En lnea Buscar Horizontal
Clase .form-vertical (no es necesario) .form-inline .form.search .formhorizontal
Descripcion Apilados, alineado a la izquierda las etiquetas respecto a los controles Alineado a la izquierda de la etiqueta y en lnea en bloque los controles de estilo compacto Extra-redondeada de entrada de texto de una esttica tpica bsqueda Alineados a la derecha las etiquetas en la misma lnea como los controles
33
Barra de Navegacin
Puede definirse a travs de la siguiente sentencia: <div class="navbar"> <div class="navbar-inner"> <div class="container"> ... </div> </div> </div>
34
35
Breadcrumbs
La navegacin de breadcrumb se utiliza para mostrar a los usuarios donde estn dentro de una aplicacin o un sitio, pero no para una navegacin primaria.
36
Breadcrumbs
<ul class="breadcrumb"> <li> <a href="#">Home</a> <span class="divider">/</span> </li> <li> <a href="#">Library</a> <span class="divider">/</span> </li> <li class="active">Data</li> </ul>
37
Barras de Progreso
Para cargar, redireccionar o para una accin de estado.
Bsica A rayas Animada
38
Barras de Progreso
Cdigo de una barra de progreso animada:
<div class="progress progressstriped active"> <div class="bar" style="width: 40%;"></div> </div>
39
JavaScript
40
Ventanas Modales
Llama a la ventana modal a travs de JavaScript: $('#myModal').modal(opciones) Metodos: $('#myModal').modal('hide') $('#myModal').modal('show')
41
42
Popovers
Aade pequeas capas de contenido, a cualquier elemento para dar informacin secundaria en globos de informacin. Ejemplo
43
Mensajes de Alerta
El plugin de alerta aade funcionalidades similares a las alertas.
44
Collapse
Aade soporte flexible para componentes desplegables como acordeones y navegacin. Ejemplo
45
Carousel
Este plugin facilita el recorrido en circulos de un elemento.
46
Typeahead
Permite crear un typeahead en cualquier entrada de texto de un formulario
47
Referencias
http://twitter.github.com/bootstra p/index.html http://twitter.github.com/bootstra p/base-css.html http://www.genbetadev.com/des arrollo-web/disenando-tu-nuevoproyecto-web-con-bootstrap-2-0 http://www.anidocs.es/bootstrap/ docs/index.php
48
@Josefina Montilla @Josefina Montilla
@Froiransi Camico

Expo Ati3

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Expo Ati3

Încărcat de

Drepturi de autor:

Formate disponibile

Universidad Central de Venezuela Facultad de Ciencias Escuela de Computacin

ATI- Twitter Bootstrap

ATI- Twitter Bootstrap

ATI- Twitter Bootstrap

ATI- Twitter Bootstrap

Un diseo slido basado en herramientas como LESS o estndares como CSS3/HTML5

ATI- Twitter Bootstrap

ATI- Twitter Bootstrap

Compatibilidad del navegador

ATI- Twitter Bootstrap

ATI- Twitter Bootstrap

ATI- Twitter Bootstrap

ATI- Twitter Bootstrap

ATI- Twitter Bootstrap

Tambin tiene 4 variantes de respuesta para varios dispositivos y resoluciones bootstrap-layout.html

ATI- Twitter Bootstrap

ATI- Twitter Bootstrap

ATI- Twitter Bootstrap

ATI- Twitter Bootstrap

ATI- Twitter Bootstrap

ATI- Twitter Bootstrap

ATI- Twitter Bootstrap

Clases de capacidad de respuesta

ATI- Twitter Bootstrap

Phones480px and below

Tablets767px and below

Desktops768px and above

ATI- Twitter Bootstrap

ATI- Twitter Bootstrap

ATI- Twitter Bootstrap

Tipo Sin ordenar

ATI- Twitter Bootstrap

Nombre Defecto Bsico Bordeado Zebra de banda

Class Ninguno .table .table-bordered .table-striped

ATI- Twitter Bootstrap

enlaces, como en etiquetas

ATI- Twitter Bootstrap

btn btnprimary btn btn-info

Indica una accin exitosa o positiva

ATI- Twitter Bootstrap

ATI- Twitter Bootstrap

ATI- Twitter Bootstrap

ATI- Twitter Bootstrap

ATI- Twitter Bootstrap

ATI- Twitter Bootstrap

ATI- Twitter Bootstrap

Nombre Vertical (por defecto) En lnea Buscar Horizontal

Clase .form-vertical (no es necesario) .form-inline .form.search .formhorizontal

ATI- Twitter Bootstrap

ATI- Twitter Bootstrap

ATI- Twitter Bootstrap

ATI- Twitter Bootstrap

ATI- Twitter Bootstrap

Bsica A rayas Animada

ATI- Twitter Bootstrap

<div class="progress progressstriped active"> <div class="bar" style="width: 40%;"></div> </div>

ATI- Twitter Bootstrap

ATI- Twitter Bootstrap

ATI- Twitter Bootstrap

ATI- Twitter Bootstrap

ATI- Twitter Bootstrap

ATI- Twitter Bootstrap

ATI- Twitter Bootstrap