11

Bootstrap highlights

20Nov
en Desarrollo web, Documentación, Herramientas, Web

En este articulo quisiera presentarles uno de los proyectos más descargados del github:

Bootsrap

Este framework, como bien lo dice su principal slogan es una herramienta elegante e intuitiva destinada al desarrollo web. Nos provee de una serie de utilidades que nos hacen la vida cada vez más sencilla  a la hora de crear nuestros proyectos web, sin más un breve recuento de las principales funciones de esta maravilloso framework.

Estructura de ficheros

 bootstrap/
  ├── css/
  │   ├── bootstrap.css
  │   ├── bootstrap.min.css
  ├── js/
  │   ├── bootstrap.js
  │   ├── bootstrap.min.js
  ├── img/
  │   ├── glyphicons-halflings.png
  │   ├── glyphicons-halflings-white.png
└── README.md

Una de las principales técnicas que nos brinda y de las que más uso, es la posibilidad
de crear la estructura de nuestra web con un sistema de rejillas en combinaciones de 12 columnas.

Ejemplo

 <div class="row">
  <div class="span4">...</div>
  <div class="span8">...</div>
 </div>

Aquí se crearía una fila de 940px de ancho total y se divide en porciones parejas
de 40% y 80% aproximadamente.

Esto también puede desarrollarse de forma fluida, que a medida que crezca la resolución
de la pantalla se agrande el elemento :


<div class="row-fluid">
 <div class="span4">...</div>
 <div class="span8">...</div>
</div>

Diseño para móviles y otros dispositivos.

Como las tendencias actuales nos obligan a crear web adaptables en diseño a estos dispositivos, bootstrap nos ayuda con esto, brindandos clases css para controlar este tipo de comportamiento. En la documentación oficial ofrecen una tabla con los elementos y dimensiones para trabajar este tipo de diseños.

Ejemplo

<div class=".visible-phone"></div>

Contiene además una serie de plugins JS desarrollados especificamente para
el uso con bootstrap y así agrandar el espectro de uso del framework. Algunos de
estos plugins nos pemiten crear de forma fácil y elegante, tabs, pop-up, ventanas modales
entre otras.

Aquí el enlace de la documentación y el núcleo.

Bootstrap

2.25 MB

11 Comentarios

  1. Sería muy bueno que pusieran una tutorial sobre como trabajar con el

    • Erick dice:

      El tutorial es él en sí mismo. Cuando lo decompactas y navegas a la dirección “docs”, te sale toda la documentación muy bien explicada de como utilizar cada cosa.

  2. Alexei dice:

    Entendi más o menos todo, pero necesito saber si falta algo para empezar o con lo que descargué es suficiente. Porque la estructura de carpeta que describen no la veo.

    Gracias de antemano.

    • Erick dice:

      Para utilizarlo va a depender mucho de lo que quieras hacer. Por defecto sí debes incluir bootstrap.css para tener todos los estilos que vas a necesitar en tu aplicación. Los plugins javascript que desees tener, sólo tienes que incluir el .js y hacer la llamada correspondiente en el caso necesario. Se me ocurre, hacer un encuentro o conferencia para enseñar a usar bootstrap. ¿Qué creen?

      • Alexei dice:

        Ok, gracias, después de un día de pasar trabajo por creer que era más complicado de lo que reamente era, ya entendí de qué se trata todo, lo de la conferencia depende del tiempo, pero está bien.

        Gracias y felicidades por esta gran idea.

  3. sigfried dice:

    Admins, si pueden arreglen una pequeña falta de ortografía en el post dice : “que nos hacen la vida cada ves más sencilla”, ese ves es con z, sería vez. Un saludo y mis felicitaciones por este gran sitio.

  4. jordy dice:

    seguro de q todas las herramientas y framework aqui son free? desearia saber antes de descargar las herramientas, si estan bajo licencia libre… gracias

  5. Roger dice:

    Podrían descargar el bootstrap 3 y ponerlo aquí??

  6. Ornolis Vázquez dice:

    Alguien sabe o tiene en su poder la versión 3 de este framework, si es posible ponerlo aquí mejor

  7. cmederosa dice:

    En estos momentos tengo el bootstrap 3 pero soy de la CUJAE y no puedo colgar nada aqui, me dejas tu correo y te lo mando se lleva menos de 3 MB, o me puedes escribir a mailto:cmederosa@fecrd.cujae.edu.cu slds

Dejar un comentario