Twitter bootstrap Inside

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 Bootstrap
Scaffolding
 Estilos globales:

Bootstrap hace uso de ciertos elementos de HTML y propiedades CSS que requieren
el uso de el doctype HTML5.

Ejemplo:

<! DOCTYPE html>
<Html lang = "es" >
...
</ Html>

Noviembre 2012

Twitter Bootstrap
Scaffolding
 Grids:

El valor predeterminado del sistema Bootstrap Grid utiliza 12 columnas.

Ejemplo:

Noviembre 2012

Twitter Bootstrap
Scaffolding
 Diseño fijo:

Proporciona un ancho fijo común (y opcionalmente sensible) de diseño con
sólo class="container"> <div necesario.

Ejemplo:

<body>
<Div clase = "container" >
...
</ Div>
</ Body>

Noviembre 2012

Twitter Bootstrap
Scaffolding
 Diseño Responsive:

No solo se tiene que incluir el CSS en el head del proyecto para que éste tenga
Responsive 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 Bootstrap
CSS
 Tipografía:

Además de conservar las etiquetas ya conocidas como los
Headings, paragraphs, bolds, italics, etc. También añade formatos ya personalizados
como: Abreviaciones, direcciones, listas sin orden y con orden, etc.

Noviembre 2012

Twitter Bootstrap
CSS
 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 Bootstrap
CSS
 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 Bootstrap
CSS
 Botones: Estilos de botón se puede aplicar a cualquier cosa con el . btn clase
aplicada.

Noviembre 2012

Twitter Bootstrap
CSS
 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 Bootstrap
Componentes
• 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 Bootstrap
LESS
Less Framework es una CSS , un sistema de cuadrícula para diseñar sitios web
adaptativos. 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 Bootstrap
LESS

 Diseño Tablet

8 columnas de 768 px. pora iPads y otras
tabletas. Perfecto para la lectura de formato
largo cuando se utiliza centrada, 6-columna
de texto de ancho.

Noviembre 2012

Twitter Bootstrap
LESS

 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 Bootstrap
LESS

 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

Twitter bootstrap Inside

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (20)

Similar a Twitter bootstrap Inside

Similar a Twitter bootstrap Inside (20)

Último

Último (10)

Twitter bootstrap Inside