Qué es Bootstrap

Creado para desarrollar aplicaciones web, Bootstrap es un framework de código abierto. Funciona interactuando con CSS y JavaScript, para crear una interfaz web adaptable a la pantalla del dispositivo web utilizada por el usuario.

Responsive Design

El diseño adaptativo o Responsive Design, es una técnica usada para adaptar la web, a las diversas plataformas: ordenador, Tablet, Smartphone, IPad. Esta técnica responde a la necesidad de adaptar el diseño de un sitio web al medio utilizado por el usuario para acceder a este.

Historia de Bootstrap

Originalmente fue llamado Blueprint de Twitter. Fue desarrollado como una solución a las inconsistencias en el desarrollo dentro del equipo de ingenieros de Twitter. En el año 2011, paso a ser de código abierto y cambio su nombre a Bootstrap.

Como funciona Bootstrap

La estructura de Bootstrap se basa en 12 columnas que son las encargadas de dar solución a las necesidades requeridas para el diseño de un sitio web. Estas columnas estilo CSS, junto con JavaScript y HTML, se combinan para crear un sitio web a través de una serie de herramientas como menús, controles de página y barras de progreso.

Con la ayuda de un archivo principal llamado Bootstrap.css, que contiene las definiciones de los estilos utilizados, se logran fijar las características a un elemento.

Como obtener Bootstrap

Para conseguir Bootstrap, debes acceder al sitio web oficial. El sitio web te da la opción de descargar:

1. Instalar a través del administrador de paquetes

“Instale los archivos fuente Sass y JavaScript de Bootstrap a través de npm, RubyGems, Composer o Meteor. Las instalaciones gestionadas por paquetes no incluyen documentación ni nuestros scripts de compilación completos. También puede usar nuestro repositorio de plantillas npm para generar rápidamente un proyecto Bootstrap a través de npm”.

• Incluir a través de CDN

“Cuando solo necesita incluir el CSS o JS compilado de Bootstrap, puede usar jsDelivr. Véalo en acción con nuestro inicio rápido simple, o explore los ejemplos para impulsar su próximo proyecto. También puede optar por incluir Popper y nuestro JS por separado”.

Características de Bootstrap

Bootstrap presenta una serie de características, entre las principales:

• Diseño Responsive: Una de las características principales de Bootstrap es la de lograr la adaptación al dispositivo utilizado por el usuario, a través de la estilización del elemento <div>; y el uso de class container. El framework funciona, asignando a la estilización del elemento <div> un class container que puede ser:

• Container: Es el encargado de determinar el tamaño ideal para el diseño de página.

• Container – Fluid: Determina la longitud del diseño de página.

• Container – Breakpoint: Determina el ancho personalizado de la página.

Biblioteca de componentes

• Accordion: Crea acordeones que se contraen verticalmente en combinación con nuestro complemento JavaScript Collapse.

El cuerpo del acordeón del primer elemento, se muestra de forma predeterminada, hasta que el complemento de collapse agrega las clases apropiadas que se usa para diseñar cada elemento. Estas clases controlan la apariencia general, así como la visualización y ocultación a través de transiciones CSS. Puedes modificar cualquiera de esto con CSS personalizado o sobrescribir nuestras variables predeterminadas. También vale la pena señalar que casi cualquier HTML puede ir dentro de .accordion-body, aunque la transición limita el desbordamiento.

• Alerts: Proporciona mensajes de retroalimentación contextuales para las acciones típicas de los usuarios con mensajes de alerta disponibles y flexibles. Las alertas están disponibles para cualquier longitud de texto, así como un botón de cierre opcional. Para un estilo adecuado, se usa una de las ocho clases contextuales obligatorias (por ejemplo, .alert-success). Para el botón de cierre en línea, usa el complemento JavaScript de alertas.

• Badges: Documentación y ejemplos para insignias, nuestro pequeño componente de conteo y etiquetado. Las insignias se escalan para coincidir con el tamaño del elemento padre inmediato mediante el uso de tamaños de fuente relativos y unidades em. A partir de la v5, las insignias ya no tienen estilos de focus o de hover para los enlaces.

• Breadcrumb: Indica la ubicación de la página actual dentro de una jerarquía de navegación que agrega automáticamente separadores a través de CSS.

• Buttons: Usa los estilos de botones personalizados de Bootstrap para acciones en formularios, cuadros de diálogo y más, con soporte para múltiples tamaños, estados y más.

• Button group: Agrupa una serie de botones en una columna vertical.

• Cards: Las tarjetas de Bootstrap brindan un contenedor de contenido flexible y extensible con múltiples variantes y opciones. Una tarjeta es un contenedor de contenido flexible y extensible. Incluye opciones para encabezados y pies de página, una amplia variedad de contenido, colores de fondo contextuales y potentes opciones de visualización. Si estás familiarizado con Bootstrap 3, las tarjetas reemplazan nuestros viejos panels, Wells y thumbnails. Una funcionalidad similar a esos componentes está disponible como clases modificadoras para tarjetas.

• Carousel: Un componente de presentación de diapositivas para recorrer elementos (imágenes o diapositivas de texto) como un carrusel. El carrusel es una presentación de diapositivas para recorrer una serie de contenido, creado con transformaciones CSS 3D y un poco de JavaScript. Funciona con una serie de imágenes, texto o marcas personalizadas. También incluye soporte para controles e indicadores anteriores/siguientes.

Es compatible en los navegadores donde la API es visible. El carrusel evitará el deslizamiento cuando la página web no esté visible para el usuario (como cuando la pestaña del navegador está inactiva, la ventana del navegador está minimizada, etc.).

• Close button: Un botón de cierre genérico para descartar contenido como modals y alerts.

• Collapse: Alterna la visibilidad del contenido en un proyecto con algunas clases y complementos de JavaScript.

Entre otros:

• Dropdowns
• List group
• Modal
• Naus y tabs
• Navbar
• Offcanvas
• Pagination
• Placeholders
• Popovers
• Progress
• Scrollspy
• Spinners
• Toasts
• Tooltips

Ventajas de utilizar Bootstrap

• Diseño de plantilla e interfaces.
• Utiliza Less: Un lenguaje de estilo CSS.
• Combinación de diferentes tecnologías: HTML, CSS y JavaScript.

Desventajas de utilizar Bootstrap

• Complejidad en el código HTML.
• Utilización de mucho código para componentes.

Si quieres desarrollar de manera profesional con Bootstrap te invitamos a conocer nuestro curso:

Megacurso de Bootstrap de Cero a Maestro

Más Información…