Diferencia entre revisiones de «Usuario:Juanda/bootstrap/Themes»

De WikiEducator
Saltar a: navegación, buscar
(Página creada con ' ===Bower=== *Es un gestor de paquetes de Front End. *Depende de nodejs y de npm (node package manager). sudo apt-get install npm')
 
Línea 1: Línea 1:
 +
{{Usuario:juanda/bootstrap/nav }}
 +
{{#widget:Slides}} {{MiTitulo| Twitter Bootstrap}}
 +
<div class="slides layout-regular template-default">
 +
<div class="slide">
 +
 +
= Crear un theme =
 +
</div>
 +
 +
<div class="slide">
 +
=== Requerimientos previos ===
 +
*node.js
 +
*npm (Viene con node desde la v0.6.3)
 +
*git (prerequisito for bower)
 +
*[http://bower.io/ Bower], gestor de paquetes para web
 +
*[http://gruntjs.com/ Grunt], gestor de tareas de javascript]
 +
*Conocimiento básico de [http://lesscss.org/ less]
 +
npm install -g bower
 +
grunt-cli
 +
npm install -g grunt-cli
 +
a very light understanding of LESSs
 +
</div>
 +
 +
<div class="slide">
 +
=== ¿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.
 +
</div>
 +
 +
<div class="slide">
 +
===Versiones de Bootstrap===
 +
*La versión 3 salió el 19 de Agosto de 2013, [http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/ ver blog].
 +
*Ojo con documentación, consultas en stackoverflow, etc. hay mucha más información de Bootstrap 2. ¡Debemos mirar con cuidado!
 +
</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>
 +
 +
 +
  
 
===Bower===
 
===Bower===

Revisión de 08:51 24 feb 2014


Requerimientos previos

  • node.js
  • npm (Viene con node desde la v0.6.3)
  • git (prerequisito for bower)
  • Bower, gestor de paquetes para web
  • Grunt, gestor de tareas de javascript]
  • Conocimiento básico de less

npm install -g bower grunt-cli npm install -g grunt-cli a very light understanding of LESSs

¿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).



Bower

  • Es un gestor de paquetes de Front End.
  • Depende de nodejs y de npm (node package manager).

sudo apt-get install npm