Twitter Bootstrap 101 Introducción

El Bootstrap de Twitter es un excelente conjunto de elementos de interfaz de usuario, diseños y herramientas de javascript cuidadosamente diseñados, disponibles de forma gratuita para usar en tu próximo proyecto de diseño web. Esta serie de videos tiene como objetivo presentarte a Bootstrap; lo lleva desde la descarga de los recursos hasta la construcción de un sitio web completo basado en Bootstrap.

Cuando Mark Otto (@mdo) y Jacob Thornton (@fat) lanzaron Twitter Bootstrap al mundo en agosto de 2011, su anuncio explicó cuál sería su valor: capacitar a los desarrolladores front-end para impulsar proyectos de manera más eficiente y efectiva.

La hoja de estilo Bootstrap proporciona una cuadrícula 960 fácil de implementar para un diseño eficiente, así como estilos diseñados por expertos para tipografía, navegación, tablas, formularios, botones y más. Para cuidar los toques de JavaScript cotidianos, Bootstrap proporciona un conjunto bien construido de complementos jQuery para menús desplegables, pestañas, cuadros modales, información sobre herramientas, mensajes de alerta y más.

Juntos, estos elementos de la interfaz brindan todos los elementos de un sitio web HTML5 fácil de usar y creado profesionalmente, de manera inmediata. Como @mdo lo puso en el post original:

Bootstrap es una forma muy sencilla de promover aplicaciones rápidas, limpias y altamente utilizables ... proporcionando una solución limpia y uniforme a las tareas de interfaz más comunes y cotidianas que los desarrolladores encuentran.

Y sin embargo, nada de esto se interpone en el camino de una mayor personalización. Nuevamente, en palabras de @mdo, mientras que Twitter Bootstrap "es muy extenso", sin embargo, sigue siendo "lo suficientemente flexible como para trabajar para muchas necesidades de diseño únicas". Así,

Puede usar Bootstrap para juntar prototipos rápidos o guiar la ejecución de diseños más sofisticados y mayores esfuerzos de ingeniería.

Los términos de licencia liberal, bajo la licencia Apache 2.0, proporcionan una gran libertad creativa. Siempre y cuando le des crédito a las buenas personas en Twitter por su trabajo, puede tomar, modificar y personalizar todo al contenido de su corazón, y luego dar la vuelta y lanzar el sitio resultante para usted o para un cliente, de forma gratuita. o con fines de lucro. (Para obtener más información, consulte este hilo de discusión, donde la gente de Twitter ha explicado cómo cumplir con la licencia mientras personaliza el código).

Dado el valor obvio de lo que ofrece y los términos liberales de su licencia, no es de extrañar que tantos desarrolladores hayan comenzado a aprovecharla al máximo. El sitio de Tumblr, "Construido con Bootstrap", ha documentado una cantidad de sitios creados por Bootstrap, que incluyen:

  • CodeAcademy.com
  • CodeCards.com
  • Impresión de códigos
  • The Hub Cycle Shop
  • Conciertos en la Clearing
  • E incluso el nuevo sitio de MSNBC: BreakingNews.com

En todos estos ejemplos, observará una cuadrícula limpia y una interfaz que connota profesionalidad. También notarás una gran variedad en los detalles. Y puede que te sorprenda el hecho de que los desarrolladores de equipos respetados como Code Academy y MSNBC han optado por construir con Bootstrap.

Si eres como yo, estarás tentado a comprobarlo por ti mismo, y deberías!

De hecho, lo he estado revisando recientemente. Déjame mostrarte el lugar.

En los dos breves videos a continuación, te presentaré la base de Twitter Bootstrap, te guiaré a través de la descarga del código, después de lo cual lo abriremos y comenzaremos a organizar las cosas para preparar nuestro propio sitio creado por Bootstrap..


Obtener el codigo

  • Ir a la página de inicio de Twitter Bootstrap
  • Descargue Bootstrap v. 1.4.0 (utilizado en este tutorial)

Video 1: Introducción

Como alternativa, descargue el video o suscríbase a Webdesigntuts + screencasts a través de iTunes!

Pasos cubiertos en este video:

  1. Visita la página de inicio de documentación en línea de Bootstrap.
  2. Ver algunos sitios construidos con Bootstrap
  3. Descarga el código de Github
  4. Descomprimirlo

Video 2: Desempaquetar y Organizar

Como alternativa, descargue el video o suscríbase a Webdesigntuts + screencasts a través de iTunes!

Pasos cubiertos en este video:

Haremos lo siguiente, pero no precisamente en este orden:

  1. Organiza el CSS
  2. Organiza el JavaScript
  3. Deshágase de los archivos innecesarios (guarde MENOS para otro día)
  4. Mantenga el archivo de licencia de Apache 2.0, según lo exigen los términos de licencia de Twitter Bootstrap
  5. Prepárese para desarrollar nuestro propio sitio Bootstrap-built

Próximos pasos?

En futuros tutoriales, te mostraré las características principales de Bootstrap y te ayudaré a usar Bootstrap para crear tu propio repositorio personalizado de fragmentos de Bootstrap. Al hacerlo, conoceremos Bootstrap, ganaremos experiencia al usarlo y personalizarlo, y nos prepararemos para trabajar con una eficiencia aún mayor en nuestros proyectos futuros creados con Bootstrap..