Boostrap

7:46

 Boostrap



¿Qué es Boostrap?

Bootstrap, es un framework originalmente creado por Twitter, que permite crear interfaces web con CSS y JavaScript, cuya particularidad es la de adaptar la interfaz del sitio web al tamaño del dispositivo en que se visualice. Es decir, el sitio web se adapta automáticamente al tamaño de una PC, una Tablet u otro dispositivo. Esta técnica de diseño y desarrollo se conoce como “responsive design” o diseño adaptativo.

El beneficio de usar responsive design en un sitio web, es principalmente que el sitio web se adapta automáticamente al dispositivo desde donde se acceda. Lo que se usa con más frecuencia, y que a mi opinión personal me gusta más, es el uso de media queries, que es un módulo de CSS3 que permite la representación de contenido para adaptarse a condiciones como la resolución de la pantalla y si trabajás las dimensiones de tu contenido en porcentajes, puedes tener una web muy fluida capaz de adaptarse a casi cualquier tamaño de forma automática.

Aun ofreciendo todas las posibilidades que ofrece Bootstrap a la hora de crear interfaces web, los diseños creados con Bootstrap son simples, limpios e intuitivos, esto les da agilidad a la hora de cargar y al adaptarse a otros dispositivos. El Framework trae varios elementos con estilos predefinidos fáciles de configurar: Botones, Menús desplegables, Formularios incluyendo todos sus elementos e integración jQuery para ofrecer ventanas y tooltips dinámicos.

Ventajas de Boostrap.

A continuación, te mostramos hasta 7 razones para usar Bootstrap para crear tu web. ¡Y mejora el desarrollo web de tu espacio online!

1. Uso fácil
2. Compatible con distintos navegadores
3. Diseño Responsive
4. Comunidad web
5. Desarrollo rápido
6. Extensible
 7. Personalización

Antes de nada, cabe destacar la facilidad de uso de Bootstrap. De hecho, esta es una de las claves por su alta demanda entre desarrolladores y diseñadores web: su sencilla estructura de archivos. Para su acceso y modificación, solo es necesario unas nociones básicas de CSS, HTML y JavaScript.

Bootstrap es una herramienta muy intuitiva y que, además, se integra fácilmente con otras plataformas. 

Hacer accesible tu página web es muy importante; por ello, poder emplear Bootstrap en los diferentes navegadores resulta del todo beneficioso.

Google Chrome, Safari, Microsoft Edge, Mozilla Firefox, Microsoft Edge, Opera… los navegadores más populares, en la actualidad.

La importancia del diseño web responsive es notoria. De ahí que esta herramienta sea tan beneficiosa. Bootstrap ofrece todas las reglas CSS, de forma que tu página web se adapta a una gran variedad de pantallas.

La comunidad de Bootstrap es muy amplia: desde sus más de 500 colaboradores; hasta todo tipo de tutoriales o foros en los que poder resolver dudas. Esta comunidad web es ideal para pedir soporte.

Una miscelánea de desarrolladores web –tanto seniors como juniors-, que te facilitarán mucha ayuda. 

Al ser una herramienta sencilla de utilizar, el desarrollo web se agiliza. En efecto, utilizando Bootstrap el proceso es mucho más rápido.

Los bloques de código ya están preparados, por lo que los tiempos se reducen de una forma considerable; evitando así dicha escritura de código. 

Por otro lado, Bootstrap tiene a disposición multitud de herramientas para extender el framework; además de poder adaptar esta herramienta a las diversas necesidades del usuario.

Asimismo, permite personalizar un sitio web a medida, eligiendo diferentes componentes, estilos o utilidades, entre otros. De hecho, otra de las 7 razones para usar Bootstrap para crear tu web es la gran cantidad de plugins que dispone. Uno de sus grandes éxitos, sin duda alguna. 

Además, este número de plugins solo hace que crecer. Cada vez más, Bootstrap se convierte en una herramienta indispensable para los desarrolladores web.


Desventajas de Boostrap.

  • Se recomienda trabajar con Bootstrap desde el inicio de un proyecto, ya que si quieres incluir el framework en un trabajo ya iniciado algunos estilos podrían «romperse» y se tendría que ajustar a como se tenia en un principio, y eso puede ser un poco tedioso y molesto.
  • Es complicado, cambiar de versión si has realizado modificaciones profundas.
  • No es ligero, y además, para algunas funcionalidades, será necesario tener que usar Javascript y jQuery.
  • Debes adaptar tu diseño a un grid de 12 columnas, que se modifican según el dispositivo. Aquí empiezan los problemas, Bootstrap por defecto te trae anchos, márgenes y altos de línea, y realizar cambios específicos.

Sus características.

Para descubrir qué es Bootstrap a profundidad, no podemos dejar de mencionar los elementos que hacen de este framework el más popular del mundo. Así que, en este apartado, te mostraremos cuáles son las principales características de Bootstrap que han encantado a los programadores web. 

Luego de leerlas, seguramente estarás convencido de que Bootstrap es un framework esencial para desarrollar tus actividades diarias en programación.

1. Iconos 

Para hacer tu página web lo más amigable posible, necesitas símbolos que le permitan a las personas acceder a determinadas opciones de forma sencilla. Felizmente, una de las características de Bootstrap es que incluye una amplia biblioteca de íconos, los cuales se dividen en los siguientes grupos: 

  • Glyphicons: 250 íconos basados en vectores para que utilices en la programación de tu página web de forma gratuita, aunque puedes comprar más si deseas. 
  • Ionicons: una fuente con 601 iconos de Ionic Framework; todos son gratis y de código abierto.
  • Font Awesome: 585 íconos gratuitos que destacan por una colección muy útil de símbolos para redes sociales.
  • Octicons: íconos orientados a GitHub (una plataforma de desarrollo colaborativo).

2. Tablas

  • Otra de las características principales de Bootstrap es que te permite crear tablas de forma sencilla. De hecho, para crear una tabla responsive solo debes añadir un código muy básico con la clase table: <table class="table table-responsive">. 

    Sin embargo, también existen componentes que te permitirán llevar la elaboración de tablas en Bootstrap al siguiente nivel para darles muchas más particularidades. Uno de ellos es DataTables, que funciona como un plugin para librería Javascript jQuery. 

  • 3.1. Codeply

    Por otro lado, si buscas botones distintos y quieres jugar un poco más con las características de Bootstrap, Codeply es una gran vía. 

    Antes conocida como Bootply, este repositorio de código te ayudará a encontrar más de 1000 snippets de todo tipo (botones, paginación, mapas de Googles, etc). Solo debes registrarte de forma gratuita para acceder a su editor visual y descubrir distintos códigos.

    4. Esquemas de color

    Siguiendo con las características de Bootstrap, debes saber que este framework te ayudará a personalizar ampliamente tu página web con los esquemas de color que tiene disponibles.

    En seguida, te contamos cuáles son los recursos de Bootstrap que te pueden ayudar con esta tarea. 

    4.1. Lavish

    Con Lavish, puedes subir una imagen cuyos colores te gusten y, automáticamente, recibirás un esquema de color para implementar a tu página web. 

    Este es uno de los componentes de Bootstrap más importantes, ya que el color hará que tu interfaz capture mejor la atención del usuario.

    4.2. PaintStrap

    Un camino más rápido para editar por completo los colores de tu página web es con un tema. Para eso, la herramienta PaintStrat es muy eficaz, ya que te permite generar temas gratis con el esquema de color de Adobe Color CC. 

    Solo debes descargar los archivos CSS y sustituirlos por los componentes de Bootstrap para utilizar el tema de tu predilección.

Su creador:

1. Mark Otto.

Mark Otto es un diseñador viviendo y trabajando en San Francisco, trabajó como freelance durante la secundaria y la universidad, antes de mudarse a California para trabajar en la empresa de diseño ZURB, en 2007.

Durante su estancia en ZURB diseñó y desarrolló docenas de proyectos con grandes y pequeños clientes, incluido un sitio web para Britney Spears -¡Cool! – .

Después de un periodo de dos años y medio en ZURB, renunció para comenzar a trabajar en Twitter como diseñador de productos.

En Twitter trabajó en numerosos proyectos y varias herramientas internas, ahí fue donde creó el popular kit de herramientas para front-end de código abierto Bootstrap con ayuda del buen Jacob Thornton.

Bootstrap nació en Twitter como un medio para crear mejores herramientas internas, comenzó como algo simple de HTML/CSS, luego Jacob construyó complementos encima y así es como comenzó “Bootstrap de Twitter” llamado así originalmente.








You Might Also Like

0 Comments