Bootstrap 3Haniel Martin Arteaga

Carlos Martín Pérez Jacobo Rodicio Gonzalez Samuel Dóniz Domínguez

Framework de Twitter

Estilos CSS

Requiere jQuery

Requiere el doctype de HTML5

Esta ideada para el diseño móvil

Licencia

Apache 2 License

¿Que permite hacer?

Descargar y usar gratuitamente.

Utilizar e incluir Bootstrap en cualquier paquete o distribución de software que crees.

¿Que prohíbe la licencia?

No decir quienes son sus autores.

Decir que los autores de Bootstrap apoyan o tienen alguna relación con el proyecto.

Utilizar algún elemento de la empresa Twitter y decir que has sido tu quien lo ha creado.

¿Por que Bootstrap?

Usabilidad

¿Por que Bootstrap?

Usabilidad

Bien Estructurado

¿Por que Bootstrap?

Usabilidad

Bien Estructurado

Completo

¿Por que Bootstrap?

Usabilidad

Bien Estructurado

Completo

A la moda

¿Por que Bootstrap?

Usabilidad

Bien Estructurado

Completo

A la moda

Multidispositivo

¿Por que Bootstrap?Usabilidad

Bien Estructurado

Completo

A la moda

Multidispositivo

Gran Comunidad

Estructurabootstrap/

├── css/

│ ├── bootstrap.css

│ ├── bootstrap.min.css

│ ├── bootstrap-theme.css

│ └── bootstrap-

├── js/

│ ├── bootstrap.js

│ └── bootstrap.min.js

└── fonts/

├── halflings-regular.eot

├── halflings-regular.svg

├── halflings-regular.ttf

└── halflings-regular.woff

Compatibilidad con Navegadores

Pensado para utilizarse en las versiones más recientes de escritorio y móviles.

Los navegadores Internet Explorer 8 y 9 también están soportados, pero …

Internet Explorer 8 requiere el uso de la librería respond.js para que el diseño web responsive funcione bien.

http://caniuse.com/

Internet Explorer

<meta http-equiv="X-UA-Compatible" content=“IE=edge">

Definir parametros de anchura: @-ms-viewport { width: device-width; }

Primera Plantilla

Grilla AdaptableExtra

Pequeño (<768px>

Pequeño (>768)

Medio (>992px)

Grandes (>1200px)

Ancho del contenedor

Auto 750px 970px 1170px

Prefijo de clase

.col-xs- .col-sm- .col-md- .col-lg-

Nº de columnas

12

Tamaño columna

AUto 60px 70px 95px

Ejemplo Rejillas

Algunos Ejemplos

Algunos Ejemplos

Algunos Ejemplos

Conclusión

Facilita el manejo de diseño.

Ahorra mucho tiempo.

Actualmente, es el framework frond-end.

Soporte.

Para Empezar

http://getbootstrap.com/components/