• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Twitter bootstrap Inside
 

Twitter bootstrap Inside

on

  • 1,719 views

Twitter bootstrap Inside

Twitter bootstrap Inside

Statistics

Views

Total Views
1,719
Views on SlideShare
1,719
Embed Views
0

Actions

Likes
3
Downloads
12
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Twitter bootstrap Inside Twitter bootstrap Inside Presentation Transcript

    • Twitter Bootstrap (inside) Plataforma de Desarrollo Móviles Berrospi Valladares Pool G. Noviembre 2012
    • 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
    • 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
    • Twitter BootstrapScaffolding Grids:El valor predeterminado del sistema Bootstrap Grid utiliza 12 columnas.Ejemplo: Noviembre 2012
    • 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
    • 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
    • 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
    • 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
    • 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
    • Twitter BootstrapCSS Botones: Estilos de botón se puede aplicar a cualquier cosa con el . btn clase aplicada. Noviembre 2012
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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