Bootstrap es un marco CSS gratuito y de código abierto dirigido al desarrollo web front-end receptivo y móvil . Contiene plantillas de diseño basadas en CSS y (opcionalmente) JavaScript para tipografía , formularios , botones , navegación y otros componentes de la interfaz.
Autor (es) original (es) | Mark Otto, Jacob Thornton |
---|---|
Desarrollador (es) | Equipo principal de Bootstrap |
Versión inicial | 19 de agosto de 2011 |
Lanzamiento estable | 5.0.1 [1] / 13 de mayo de 2021 |
Repositorio | Repositorio Bootstrap |
Escrito en | HTML , CSS , Less (v3), Sass (v4) y JavaScript |
Plataforma | Plataforma web |
Licencia | Licencia MIT ( Licencia Apache 2.0 anterior a 3.1.0) |
Sitio web | getbootstrap |
A partir de abril de 2021, Bootstrap es el décimo proyecto con más estrellas en GitHub , con más de 150.000 estrellas, detrás de freeCodeCamp (casi 312.000 estrellas), el marco Vue.js , la biblioteca React , TensorFlow y otros. [2]
Historia
Comienzos tempranos
Bootstrap, originalmente llamado Twitter Blueprint, fue desarrollado por Mark Otto y Jacob Thornton en Twitter como un marco para fomentar la coherencia entre las herramientas internas. Antes de Bootstrap, se usaban varias bibliotecas para el desarrollo de interfaces, lo que generaba inconsistencias y una gran carga de mantenimiento. Según el desarrollador de Twitter Mark Otto:
Un grupo súper pequeño de desarrolladores y yo nos reunimos para diseñar y construir una nueva herramienta interna y vimos la oportunidad de hacer algo más. A través de ese proceso, nos vimos construir algo mucho más sustancial que otra herramienta interna. Meses después, terminamos con una versión inicial de Bootstrap como una forma de documentar y compartir patrones y activos de diseño comunes dentro de la empresa. [3]
Después de unos meses de desarrollo por parte de un pequeño grupo, muchos desarrolladores de Twitter comenzaron a contribuir al proyecto como parte de Hack Week, una semana estilo hackathon para el equipo de desarrollo de Twitter. Se le cambió el nombre de Twitter Blueprint a Bootstrap, y se lanzó como proyecto de código abierto el 19 de agosto de 2011. [4] Mark Otto, Jacob Thornton y un pequeño grupo de desarrolladores principales lo han mantenido. gran comunidad de contribuyentes. [5]
Bootstrap 2
El 31 de enero de 2012, se lanzó Bootstrap 2, que agregó soporte integrado para Glyphicons, varios componentes nuevos, así como cambios en muchos de los componentes existentes. Esta versión admite el diseño web receptivo , lo que significa que el diseño de las páginas web se ajusta dinámicamente, teniendo en cuenta las características del dispositivo utilizado (ya sea de escritorio, tableta o teléfono móvil). [6]
Bootstrap 3
El 19 de agosto de 2013, se lanzó Bootstrap 3. Rediseñó los componentes para utilizar un diseño plano y un primer enfoque móvil . Bootstrap 3 presenta un nuevo sistema de complementos con eventos con espacios de nombres. Bootstrap 3 eliminó la compatibilidad con Internet Explorer 7 y Firefox 3.6, pero hay un polyfil opcional para estos navegadores. [7]
Bootstrap 4
Mark Otto anunció Bootstrap 4 el 29 de octubre de 2014. [8] La primera versión alfa de Bootstrap 4 se lanzó el 19 de agosto de 2015. [9] La primera versión beta se lanzó el 10 de agosto de 2017. [10] Mark suspendió el trabajo en Bootstrap 3 el 6 de septiembre de 2016, para liberar tiempo para trabajar en Bootstrap 4. Bootstrap 4 se finalizó el 18 de enero de 2018. [11]
Los cambios importantes incluyen:
- Reescritura importante del código
- Reemplazo de Less con Sass
- Además de
Reboot
, una colección de cambios CSS específicos del elemento en un solo archivo, basado enNormalize
- Dejar de admitir IE8 , IE9 e iOS 6
- Compatibilidad con CSS Flexible Box
- Agregar opciones de personalización de navegación
- Adición de utilidades de tamaño y espaciado sensibles
- Cambiar de la unidad de píxeles en CSS a root ems
- Aumento del tamaño de fuente global de 14px a 16px para mejorar la legibilidad
- Dejar caer las
panel
,thumbnail
,pager
, ywell
componentes - Soltar la
Glyphicons
fuente del icono - Gran número [ cuantificar ] de clases de servicios públicos
- Estilo de formulario, botones, menús desplegables, objetos multimedia y clases de imágenes mejorados
Bootstrap 4 es compatible con las últimas versiones de Google Chrome , Firefox , Internet Explorer , Opera y Safari (excepto en Windows). Además, es compatible con IE10 y la última versión de soporte extendido (ESR) de Firefox . [12]
Bootstrap 5
Bootstrap 5 se lanzó oficialmente el 5 de mayo de 2021. [13] [se necesita una mejor fuente ]
Los principales cambios incluyen: [14] [15] [16]
- Nuevo componente de menú offcanvas
- Eliminando la dependencia de jQuery a favor de JavaScript vainilla
- Reescribir la cuadrícula para admitir columnas ubicadas fuera de las filas y medianiles sensibles
- Migrar la documentación de Jekyll a Hugo
- Eliminación de la compatibilidad con IE10 e IE11 [17]
- Traslado de la infraestructura de pruebas de QUnit a Jasmine
- Agregar un conjunto personalizado de iconos SVG
- Agregar propiedades personalizadas de CSS
- API mejorada
- Sistema de cuadrícula mejorado
- Documentos de personalización mejorados
- Formularios actualizados
- Soporte RTL
Cambios que se están evaluando: [18]
- Sistema de módulo Sass
- Mayor uso de propiedades personalizadas de CSS
- Incrustar SVG en HTML en lugar de CSS
Características
Bootstrap es una biblioteca HTML, CSS y JS que se enfoca en simplificar el desarrollo de páginas web informativas (a diferencia de las aplicaciones web ). El propósito principal de agregarlo a un proyecto web es aplicar las opciones de color, tamaño, fuente y diseño de Bootstrap a ese proyecto. Como tal, el factor principal es si los desarrolladores a cargo encuentran esas opciones de su agrado. Una vez agregado a un proyecto, Bootstrap proporciona definiciones de estilo básicas para todos los elementos HTML . El resultado es una apariencia uniforme para prosa, tablas y elementos de formulario en todos los navegadores web . Además, los desarrolladores pueden aprovechar las clases CSS definidas en Bootstrap para personalizar aún más la apariencia de sus contenidos. Por ejemplo, Bootstrap ha provisto tablas de colores claros y oscuros, encabezados de página, citas extraídas más prominentes y texto con un resaltado.
Bootstrap también viene con varios componentes de JavaScript en forma de complementos de jQuery . Proporcionan elementos de interfaz de usuario adicionales, como cuadros de diálogo , información sobre herramientas y carruseles. Cada componente de Bootstrap consta de una estructura HTML, declaraciones CSS y, en algunos casos, código JavaScript adjunto. También amplían la funcionalidad de algunos elementos de interfaz existentes, incluida, por ejemplo, una función de autocompletar para campos de entrada.
Los componentes más destacados de Bootstrap son sus componentes de diseño, ya que afectan a toda una página web. El componente de diseño básico se llama "Contenedor", ya que todos los demás elementos de la página se colocan en él. Los desarrolladores pueden elegir entre un recipiente de ancho fijo y un recipiente de ancho fluido. Mientras que el último siempre ocupa el ancho de la página web, el primero utiliza uno de los cinco anchos fijos predefinidos, dependiendo del tamaño de la pantalla que muestra la página:
- Más pequeño que 576 píxeles
- 576–768 píxeles
- 768–992 píxeles
- 992-1200 píxeles
- Más de 1200 píxeles
Una vez que un contenedor está en su lugar, otros componentes de diseño Bootstrap implementan un diseño CSS Flexbox mediante la definición de filas y columnas.
Hay disponible una versión precompilada de Bootstrap en forma de un archivo CSS y tres archivos JavaScript que se pueden agregar fácilmente a cualquier proyecto. Sin embargo, la forma sin procesar de Bootstrap permite a los desarrolladores implementar más personalizaciones y optimizaciones de tamaño. Esta forma sin formato es modular, lo que significa que el desarrollador puede eliminar componentes innecesarios, aplicar un tema y modificar los archivos Sass no compilados .
Nombre | Hexagonal (RGB) | Rojo (RGB) | Verde (RGB) | Azul (RGB) | Tono (HSL / HSV) | Satur. (HSL) | Ligero (HSL) | Satur. (VHS) | Valor (HSV) | Alternativas |
---|---|---|---|---|---|---|---|---|---|---|
Bootstrap Blanco | #FFFFFF | 100% | 100% | 100% | 0 ° | 0% | 100% | 0% | 100% | blanco |
Bootstrap Gris 100 | # F8F9FA | 97% | 98% | 98% | 210 ° | 17% | 98% | 1% | 98% | |
Bootstrap gris 200 | # E9ECEF | 91% | 93% | 94% | 210 ° | dieciséis% | 93% | 3% | 94% | |
Bootstrap Gris 300 | # DEE2E6 | 87% | 89% | 90% | 210 ° | 14% | 89% | 4% | 90% | |
Bootstrap gris 400 | # CED4DA | 81% | 83% | 85% | 210 ° | 14% | 83% | 6% | 86% | |
Bootstrap gris 500 | # ADB5BD | 68% | 71% | 74% | 210 ° | 11% | 71% | 9% | 74% | |
Bootstrap Gris 600 | # 6C757D | 42% | 46% | 49% | 208 ° | 7% | 46% | 14% | 49% | Bootstrap Gris |
Bootstrap Gris 700 | # 495057 | 29% | 31% | 34% | 210 ° | 9% | 31% | dieciséis% | 34% | |
Bootstrap Gris 800 | # 343A40 | 20% | 23% | 25% | 210 ° | 10% | 23% | 19% | 25% | Bootstrap Gris Oscuro |
Bootstrap Gris 900 | # 212529 | 13% | 15% | dieciséis% | 210 ° | 11% | 15% | 20% | dieciséis% | |
Bootstrap Negro | # 000000 | 0% | 0% | 0% | 0 ° | 0% | 0% | 0% | 0% | Negro |
Bootstrap Azul | # 0D6EFD | 5% | 43% | 99% | 216 ° | 98% | 52% | 95% | 99% | |
Bootstrap Indigo | # 6610F2 | 40% | 6% | 95% | 263 ° | 90% | 51% | 93% | 95% | |
Bootstrap Morado | # 6F42C1 | 44% | 26% | 76% | 261 ° | 51% | 51% | 66% | 76% | |
Bootstrap Rosa | # D63384 | 84% | 20% | 52% | 330 ° | 67% | 52% | 76% | 84% | |
Bootstrap rojo | # DC3545 | 86% | 21% | 27% | 354 ° | 71% | 54% | 76% | 86% | |
Bootstrap Naranja | # FD7E14 | 99% | 49% | 8% | 27 ° | 98% | 54% | 92% | 99% | |
Bootstrap Amarillo | # FFC107 | 100% | 76% | 3% | 45 ° | 100% | 51% | 97% | 100% | |
Bootstrap Verde | # 198754 | 10% | 53% | 33% | 152 ° | 69% | 31% | 82% | 53% | |
Bootstrap Teal | # 20C997 | 13% | 79% | 59% | 162 ° | 73% | 46% | 84% | 79% | |
Bootstrap Cyan | # 0DCAF0 | 5% | 79% | 94% | 190 ° | 90% | 50% | 95% | 94% | |
gris | # 808080 | 50% | 50% | 50% | 0 ° | 0% | 50% | 0% | 50% | Gris |
Azul | # 0000FF | 0% | 0% | 100% | 240 ° | 100% | 50% | 100% | 100% | |
Índigo | # 4B0082 | 29% | 0% | 51% | 275 ° | 100% | 26% | 100% | 51% | |
Púrpura | # 800080 | 50% | 0% | 50% | 300 ° | 100% | 25% | 100% | 50% | |
Rosa | # FFC0CB | 100% | 75% | 80% | 350 ° | 100% | 88% | 25% | 100% | |
rojo | # FF0000 | 100% | 0% | 0% | 0 ° | 100% | 50% | 100% | 100% | |
naranja | # FFA500 | 100% | sesenta y cinco% | 0% | 39 ° | 100% | 50% | 100% | 100% | |
Amarillo | # FFFF00 | 100% | 100% | 0% | 60 ° | 100% | 50% | 100% | 100% | |
Verde | # 008000 | 0% | 50% | 0% | 120 ° | 100% | 25% | 100% | 50% | |
Verde azulado | # 008080 | 0% | 50% | 50% | 180 ° | 100% | 25% | 100% | 50% | |
Cian | # 00FFFF | 0% | 100% | 100% | 180 ° | 100% | 50% | 100% | 100% | Agua |
Ver también
- Marco CSS
- jQuery Mobile
Referencias
- ^ "Lanzamiento v5.0.1" . 13 de mayo de 2021.
- ^ "Buscar · estrellas:> 1" . GitHub . Consultado el 14 de noviembre de 2018 .
- ^ Otto, Mark (17 de enero de 2012). "Bootstrap in A List Apart No. 342" . Blog de Mark Otto . Archivado desde el original el 28 de octubre de 2016 . Consultado el 23 de febrero de 2017 .
- ^ Otto, Mark (19 de agosto de 2011). "Bootstrap de Twitter" . Blog de desarrolladores . Gorjeo. Archivado desde el original el 23 de febrero de 2017 . Consultado el 23 de febrero de 2017 .
- ^ "Acerca de" . Bootstrap . Consultado el 23 de febrero de 2017 .
- ^ Otto, Mark (31 de enero de 2012). "Saluda a Bootstrap 2.0" . Blog de desarrolladores . Gorjeo. Archivado desde el original el 23 de febrero de 2017 . Consultado el 23 de febrero de 2017 .
- ^ Otto, Mark (19 de agosto de 2013). "Bootstrap 3 lanzado" . Archivado desde el original el 21 de octubre de 2016 . Consultado el 23 de febrero de 2017 .
- ^ Otto, Mark (29 de octubre de 2014). "Bootstrap 3.3.0 lanzado" . Archivado desde el original el 24 de julio de 2016 . Consultado el 23 de febrero de 2017 .
- ^ Otto, Mark (19 de agosto de 2015). "Bootstrap 4 alpha" . Archivado desde el original el 23 de enero de 2017 . Consultado el 23 de febrero de 2017 .
- ^ Otto, Mark; Thornton, Jacob (10 de agosto de 2017). "Bootstrap 4 Beta" . Consultado el 16 de agosto de 2017 .
- ^ colaboradores, Mark Otto, Jacob Thornton y Bootstrap (18 de enero de 2018). "Bootstrap 4" . blog.getbootstrap.com . Consultado el 16 de marzo de 2018 .
- ^ "Navegadores compatibles" . Bootstrap . Consultado el 23 de febrero de 2017 .
- ^ "Release Release v5.0.0 (# 33647) · twbs / bootstrap" . GitHub . Consultado el 5 de mayo de 2021 .
- ^ colaboradores, Mark Otto, Jacob Thornton y Bootstrap (2018-12-21). "Bootstrap 4.2.1" . Blog de Bootstrap . Consultado el 22 de marzo de 2019 .
- ^ colaboradores, Mark Otto, Jacob Thornton y Bootstrap (2019-02-11). "Bootstrap 4.3.0" . Blog de Bootstrap . Consultado el 29 de septiembre de 2019 .
- ^ "Cuadrícula Bootstrap 5 por MartijnCuppens · Pull Request # 28517 · twbs / bootstrap" . GitHub . Consultado el 29 de septiembre de 2019 .
- ^ "v5: eliminar el soporte de Internet Explorer por XhmikosR · Pull Request # 30377 · twbs / bootstrap" . GitHub . Consultado el 7 de abril de 2020 .
- ^ "Bootstrap 5 Alpha" . Blog de desarrolladores . 22 de junio de 2020.
enlaces externos
- Página web oficial
- Bootstrap en GitHub