Twitter Bootstrap (inside) Plataforma de Desarrollo Móviles                   Berrospi Valladares Pool G.                 ...
Twitter Bootstrap Es un conjunto de herramientas de front-end para el desarrollo rápido  de aplicaciones web. Podemos de...
Twitter BootstrapScaffolding Estilos globales:Bootstrap hace uso de ciertos elementos de HTML y propiedades CSS que requi...
Twitter BootstrapScaffolding Grids:El valor predeterminado del sistema Bootstrap Grid utiliza 12 columnas.Ejemplo:       ...
Twitter BootstrapScaffolding Diseño fijo:Proporciona un ancho fijo común (y opcionalmente sensible) de diseño consólo cla...
Twitter BootstrapScaffolding Diseño Responsive:No solo se tiene que incluir el CSS en el head del proyecto para que éste ...
Twitter BootstrapCSS Tipografía:Además de conservar las etiquetas ya conocidas como losHeadings, paragraphs, bolds, itali...
Twitter BootstrapCSS Tablas:Brinda diferentes estilos para el diseño de las tablas, por ejemplo:...<tr class="success"><t...
Twitter BootstrapCSS Formularios:Brinda diferentes estilos para el diseño de los formularios, por ejemplo:• Formularios d...
Twitter BootstrapCSS Botones: Estilos de botón se puede aplicar a cualquier cosa con el . btn clase  aplicada.           ...
Twitter BootstrapCSS Imagenes: Agregar clases a un elemento <img> es fácil en cualquier proyecto.<Img src = "..." clase =...
Twitter BootstrapComponentes•   Menús Desplegables.•   Grupos de Botones (tipo barra de herramientas, en veritcal, etc).• ...
Twitter BootstrapLESSLess Framework es una CSS , un sistema de cuadrícula para diseñar sitios webadaptativos. Contiene 4 l...
Twitter BootstrapLESS Diseño Tablet8 columnas de 768 px. pora iPads y otrastabletas. Perfecto para la lectura de formatol...
Twitter BootstrapLESS  Diseño móvil 3 columnas a 320 px. para iPhones, iPod Touch y la mayoría de otros dispositivos móvi...
Twitter BootstrapLESS  Diseño Mobile Wide 5 columnas de 480 px. de grandes dispositivos móviles, así como los iPhones y i...
Próxima SlideShare
Cargando en…5
×

Twitter bootstrap Inside

1.559 visualizaciones

Publicado el

Twitter bootstrap Inside

Publicado en: Tecnología
0 comentarios
3 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
1.559
En SlideShare
0
De insertados
0
Número de insertados
3
Acciones
Compartido
0
Descargas
32
Comentarios
0
Recomendaciones
3
Insertados 0
No insertados

No hay notas en la diapositiva.

Twitter bootstrap Inside

  1. 1. Twitter Bootstrap (inside) Plataforma de Desarrollo Móviles Berrospi Valladares Pool G. Noviembre 2012
  2. 2. Twitter Bootstrap Es un conjunto de herramientas de front-end para el desarrollo rápido de aplicaciones web. Podemos desarrollar sitios web responsive en tiempo record y con el respaldo de un HTML, JS y CSS. Los sitios web responsive consisten en una mezcla de grids (cuadríduclas) y layouts (diseños) flexibles, además de imágenes que se adaptan y el uso de media queries (consulta de qué dispositivo se está utilizando) en el CSS. Utiliza algunas de las técnicas más modernas de navegadores para ofrecer estilo de tipografía, forms, botones, tablas, grids, navegación entre otros. Noviembre 2012
  3. 3. Twitter BootstrapScaffolding Estilos globales:Bootstrap hace uso de ciertos elementos de HTML y propiedades CSS que requierenel uso de el doctype HTML5.Ejemplo:<! DOCTYPE html><Html lang = "es" >...</ Html> Noviembre 2012
  4. 4. Twitter BootstrapScaffolding Grids:El valor predeterminado del sistema Bootstrap Grid utiliza 12 columnas.Ejemplo: Noviembre 2012
  5. 5. Twitter BootstrapScaffolding Diseño fijo:Proporciona un ancho fijo común (y opcionalmente sensible) de diseño consólo class="container"> <div necesario.Ejemplo:<body><Div clase = "container" >...</ Div></ Body> Noviembre 2012
  6. 6. Twitter BootstrapScaffolding Diseño Responsive:No solo se tiene que incluir el CSS en el head del proyecto para que éste tengaResponsive Design, si no, que se tiene que activar en la etiqueta Meta.Ejemplo:<meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="assets/css/bootstrap-responsive.css" rel="stylesheet"> Noviembre 2012
  7. 7. Twitter BootstrapCSS Tipografía:Además de conservar las etiquetas ya conocidas como losHeadings, paragraphs, bolds, italics, etc. También añade formatos ya personalizadoscomo: Abreviaciones, direcciones, listas sin orden y con orden, etc. Noviembre 2012
  8. 8. Twitter BootstrapCSS Tablas:Brinda diferentes estilos para el diseño de las tablas, por ejemplo:...<tr class="success"><td>1</td><td>TB - Monthly</td><td>01/04/2012</td><td>Approved</td></tr>... Noviembre 2012
  9. 9. Twitter BootstrapCSS Formularios:Brinda diferentes estilos para el diseño de los formularios, por ejemplo:• Formularios de búsqueda.• Formulario en linea.• Formulario horizontal. Noviembre 2012
  10. 10. Twitter BootstrapCSS Botones: Estilos de botón se puede aplicar a cualquier cosa con el . btn clase aplicada. Noviembre 2012
  11. 11. Twitter BootstrapCSS Imagenes: Agregar clases a un elemento <img> es fácil en cualquier proyecto.<Img src = "..." clase = "img integral" ><Img src = "..." clase = "img-circle" ><Img src = "..." clase = "img-polaroid" > Noviembre 2012
  12. 12. Twitter BootstrapComponentes• Menús Desplegables.• Grupos de Botones (tipo barra de herramientas, en veritcal, etc).• Menús de Botones Desplegables.• Tipos de Navegación (pestañas, fichas apiladas, etc).• Alertas, etc Noviembre 2012
  13. 13. Twitter BootstrapLESSLess Framework es una CSS , un sistema de cuadrícula para diseñar sitios webadaptativos. Contiene 4 layouts y 3 juegos de tipografía, todo ello basado en un único Grid.  Diseño predeterminado 10 columnas de 992 px. Para equipos de sobremesa, portátiles, Tablet PC con orientación horizontal, y todos los navegadores antiguos. Se puede dividir de acuerdo al Golden Ratio en 6 columnas, que es también el ancho óptimo para el texto de formato largo. Noviembre 2012
  14. 14. Twitter BootstrapLESS Diseño Tablet8 columnas de 768 px. pora iPads y otrastabletas. Perfecto para la lectura de formatolargo cuando se utiliza centrada, 6-columnade texto de ancho. Noviembre 2012
  15. 15. Twitter BootstrapLESS  Diseño móvil 3 columnas a 320 px. para iPhones, iPod Touch y la mayoría de otros dispositivos móviles modernos. Tiene generosos márgenes exteriores que permiten el diseño de respirar. Noviembre 2012
  16. 16. Twitter BootstrapLESS  Diseño Mobile Wide 5 columnas de 480 px. de grandes dispositivos móviles, así como los iPhones y iPod Touch en la orientación horizontal. Rápido a código, ya que hereda estilos de ambos el diseño predeterminado y el Diseño Móvil. Noviembre 2012

×