Diferencia entre revisiones de «Usuario:Juanda/bootstrap/Introducción»

De WikiEducator
Saltar a: navegación, buscar
(Página creada con '{{Usuario:juanda/bootstrap/nav }} {{#widget:Slides}} {{MiTitulo| Twitter Bootstrap}} <div class="slides layout-regular template-default"> <div class="slide"> = Introducción =…')
 
 
(3 revisiones intermedias por el mismo usuario no mostrado)
Línea 16: Línea 16:
 
<div class="slide">
 
<div class="slide">
 
=== ¿Qué es Twitter Bootstrap? ===
 
=== ¿Qué es Twitter Bootstrap? ===
*Es un framework de CSS
+
*Es el framework de Twitter que permite crear interfaces web con CSS y Javascript
*
+
*The most popular front-end framework for developing responsive, mobile first projects on the web.
 
</div>
 
</div>
  
 
<div class="slide">
 
<div class="slide">
===Versiones de jQuery===
+
===Versiones de Bootstrap===
*Versión actual de jQuery: '''1.10.2''' y '''2.0.3'''
+
*La versión 3 salió el 19 de Agosto de 2013, [http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/ ver blog].
*[http://jquery.org/license/ Licencia MIT]
+
*Ojo con documentación, consultas en stackoverflow, etc. hay mucha más información de Bootstrap 2. ¡Debemos mirar con cuidado!
*La funcionalidad es la misma
+
*La rama 2.x no es compatible con IE 6-8
+
*La rama 2.x es algo más ligera
+
*Usaremos la rama 1.x:
+
:Misma funcionalidad
+
:Mayor compatibilidad
+
 
</div>
 
</div>
  
 +
<div class="slide">
 +
===Descargas de Bootstrap===
 +
*Compilada y comprimida. Sin documentos ni fuentes originales.
 +
*Sin compilar ni comprimir. Los fuentes de CSS están en Less.
 +
*Sin compilar ni comprimir. Los fuentes de CSS están en Sass.
 +
</div>
  
 +
<div class="slide">
 +
===Documentación de Bootstrap===
 +
*[http://getbootstrap.com/ Página web del proyecto]
 +
*[http://librosweb.es/bootstrap_3/ Documentación traducida al español]
  
 +
</div>
  
 +
<div class="slide">
 +
===Utilidad de Bootstrap===
 +
*Tenemos dos opciones para utilizar Bootstrap:
 +
*Utilizar exclusivamente su sistema de rejilla (grid) para colocar elementos y responsividad.
 +
*Utilizar su diseño: botones, labels, etc así como su librería de javascript (basada en jQuery).
 +
</div>
  
 +
<div class="slide">
 +
===Diseño con Bootstrap===
 +
*Modificaremos a partir de los ficheros less existentes.
 +
*Crearemos themes.
 +
*También podremos optar por descargar themes existentes (muchos de pago).
 +
 +
</div>
 
</div>
 
</div>

Última revisión de 09:37 24 feb 2014


Requerimientos previos

  • html
  • Conocimiento básico de javascript y jQuery
  • Conocimiento básico de css

¿Qué es Twitter Bootstrap?

  • Es el framework de Twitter que permite crear interfaces web con CSS y Javascript
  • The most popular front-end framework for developing responsive, mobile first projects on the web.

Versiones de Bootstrap

  • La versión 3 salió el 19 de Agosto de 2013, ver blog.
  • Ojo con documentación, consultas en stackoverflow, etc. hay mucha más información de Bootstrap 2. ¡Debemos mirar con cuidado!

Descargas de Bootstrap

  • Compilada y comprimida. Sin documentos ni fuentes originales.
  • Sin compilar ni comprimir. Los fuentes de CSS están en Less.
  • Sin compilar ni comprimir. Los fuentes de CSS están en Sass.

Utilidad de Bootstrap

  • Tenemos dos opciones para utilizar Bootstrap:
  • Utilizar exclusivamente su sistema de rejilla (grid) para colocar elementos y responsividad.
  • Utilizar su diseño: botones, labels, etc así como su librería de javascript (basada en jQuery).

Diseño con Bootstrap

  • Modificaremos a partir de los ficheros less existentes.
  • Crearemos themes.
  • También podremos optar por descargar themes existentes (muchos de pago).