¿Qué es Bootstrap?


512

Aquí hay muchas preguntas relacionadas con Bootstrap. Veo a mucha gente usándolo. Así que intenté investigarlo, y encontré el sitio oficial de Bootstrap , pero solo había una sección de descarga y unas pocas palabras después de eso. Nada que explique para qué sirve ... Acabo de entender que es un asistente de front-end. Intenté encontrar algo buscando en Google, pero no encontré nada específico. Todo lo que encontré está relacionado con la definición de informática.

Entonces, mis preguntas son:

  • ¿Qué es Bootstrap en absoluto?
  • ¿Para qué se utiliza y cómo ayuda al desarrollo front-end?
  • También me gustaría tener más detalles para explicarlo.

Esta pregunta está bien contestada . Piense dos veces antes de publicar nuevas respuestas, especialmente si tiene la intención de copiar y pegar su respuesta desde otro lugar.
Meagar

Con el debido respeto, @meagar, la pregunta parece estar pidiendo una respuesta muy específica y precisa, y la respuesta aceptada lo evita con elegancia. Lo que significa que, técnicamente, no está bien respondido. Después de leer cada respuesta (incluidas las eliminadas) agregué la mía que, espero, explica qué es Bootstrap, en términos generales y fáciles de entender, principalmente para disminuir la confusión de los principiantes (que es como entiendo esta pregunta).
tao

Respuestas:


271

Es un marco de código abierto HTML, CSS y JavaScript (creado inicialmente por Twitter) que puede usar como base para crear sitios web o aplicaciones web.

Actualizar

El sitio web oficial de bootstrap se actualiza e incluye una definición clara.

"Bootstrap es el marco HTML, CSS y JS más popular para desarrollar primeros proyectos móviles receptivos en la web".

"Diseñado y construido con todo el amor del mundo por @mdo y @fat ".


2
@hutchonoid: ¿siempre está libre de bootply? ¿Cuál es la diferencia entre Joomla y bootply? cuál es mejor ?
logan

99
@logan Joomla y Bootply no son comparables. Joomla es un sistema de gestión de contenido construido en PHP y SQL, mientras que Bootply es un sitio web que se utiliza para experimentar con el marco de Bootstrap (completamente diferente). Piense en Bootply como un JSFiddle que es específicamente para Bootstrap. Y sí, Bootply siempre es gratis.
APAD1

15
Creo que lo más relevante para responder esta pregunta sería seguir el enlace denominado "Ejemplos" que se proporciona en la respuesta anterior. Copiar / pegar la definición de Bootstrap de su sitio web es obviamente inútil dado que el usuario que publicó la pregunta mencionó claramente haber mirado el sitio web de Bootstrap. No creo que ver el mismo texto de su sitio web tenga más sentido simplemente porque está escrito en negrita ahora.
Mihaela

13
@hutchonoid Puede ser una definición clara para ti porque estás usando Bootstrap durante mucho tiempo, pero confía en mí, esa definición en su sitio web es la razón por la que busqué esta respuesta: no pude entender lo que significaba. Así que estoy totalmente de acuerdo con Mihaela en esto. Si busco una respuesta a esta pregunta, no quiero que sea la misma cita del sitio web, solo en letra más grande. Su explicación no tiene sentido porque los usuarios que preguntaron esto en el pasado ya no necesitan la respuesta en el presente y cualquiera en el presente seguramente verá primero la descripción del sitio web.
Anderson

2
¿Quizás alguna mención de los proyectos para los que es más adecuado? (Es decir, sitios temporales, pequeñas aplicaciones web, micrositios, etc.)
Chuck Le Butt

94

Bootstrap es un marco Javascript de código abierto desarrollado por el equipo de Twitter. Es una combinación de código HTML, CSS y Javascript diseñado para ayudar a construir componentes de interfaz de usuario. Bootstrap también se programó para admitir tanto HTML5 como CSS3.

También se llama Front-end-framework.

Bootstrap es una colección gratuita de herramientas para crear sitios web y aplicaciones web.

Contiene plantillas de diseño basadas en HTML y CSS para tipografía, formularios, botones, navegación y otros componentes de la interfaz, así como extensiones de JavaScript opcionales.

Algunas razones para los programadores prefirieron Bootstrap Framework

  1. Fácil de comenzar

  2. Gran sistema de cuadrícula

  3. Estilo base para la mayoría de los elementos HTML (tipografía, código, tablas, formularios, botones, imágenes, iconos)

  4. Amplia lista de componentes.

  5. Complementos Javascript incluidos

Tomado de About Bootstrap Framework


16
Me parece más una colección de componentes o widgets que un "marco". ¿Puede aclarar qué constituye exactamente un "marco" y cuándo una biblioteca de componentes deja de ser una biblioteca de componentes y comienza a ser un "marco"? ¿Tiene algo que ver con el "sistema de red"?
Kirby L. Wallace

25

Bootstrap, como lo sé, es un CSS bien definido. Aunque usando Bootstrap también podría usar JavaScript, jQuery, etc. Pero la diferencia principal es que, usando Bootstrap, puede llamar al nombre de la clase y luego obtener el resultado en el formulario HTML. por ej. coloración de botones con forma de texto, usando diseños. Para todo esto, no tiene que escribir un archivo CSS, solo debe usar el nombre de clase correcto para dar forma a su formulario HTML.


10
En realidad, bootstrap es mucho más que un simple 'archivo css'.
Receta

1
Estoy de acuerdo con @Recipe, no se trata solo del archivo CSS
Sujay sreedhar

1
Personalmente estoy de acuerdo con Blitz. No porque tenga una lista completa de características de Bootstrap, sino que en mi (s) tienda (s) compleja (s), utilizo principalmente codificación purista, y uso Bootstrap para sus características css más básicas. Ese es el núcleo de sus puntos fuertes.
Suamere

1
Esta es una respuesta muy pobre que, mal, explica lo que hace CSS (y solo CSS). Voto negativo Básicamente, simplemente explica que puede usar CSS y luego hacer referencia a las clases para modificar su interfaz de usuario. Nada que ver con bootstrap en sí mismo sobre otros recursos empaquetados.
RichieHH

22

En palabras más simples, puede entender Bootstrap como un marco web front-end creado por Twitter para una creación más rápida de aplicaciones web receptivas para dispositivos. Bootstrap también se puede entender principalmente como una colección de clases CSS que se definen en él y que simplemente se pueden usar directamente. Utiliza CSS, javascript, jQuery, etc. en segundo plano para crear el estilo, los efectos y las acciones de los elementos de Bootstrap.

Es posible que sepa que usamos CSS para diseñar elementos de página web y crear clases y asignar clases a elementos de página web para aplicarles el estilo. Bootstrap aquí simplifica el diseño ya que solo tenemos que incluir archivos Bootstrap y mencionar los nombres de clase predefinidos de Bootstrap para los elementos de nuestra página web y se diseñarán automáticamente a través de Bootstrap. A través de esto, nos deshacemos de escribir nuestras propias clases CSS para dar estilo a los elementos de la página web. Lo más importante es que Bootstrap está diseñado de tal manera que hace que el dispositivo de su sitio web responda y ese es el objetivo principal. Otras alternativas para Bootstrap podrían ser: marcos Foundation , Materialise , etc.

Bootstrap lo libera de escribir mucho código CSS y también le ahorra el tiempo que dedica a diseñar las páginas web.


18

Bootstrap es un marco CSS y JavaScript de código abierto que fue desarrollado originalmente para la aplicación de Twitter por el equipo de diseñadores y desarrolladores de Twitter. Luego lo lanzaron para código abierto. Siendo un usuario de Twitter Bootstrap desde hace mucho tiempo, creo que es uno de los mejores para diseñar sitios web receptivos listos para dispositivos móviles. Muchos complementos CSS y Javascript están disponibles para diseñar su sitio web en poco tiempo. Es una especie de marco de diseño de plantilla rápido. Algunas personas se quejan de que los archivos CSS de bootstrap son pesados ​​y tardan en cargarse, pero estas afirmaciones son hechas por personas perezosas. No tiene que mantener el archivo bootstrap.css completo en su sitio web. Siempre tiene la opción de eliminar los estilos de los componentes que no necesita para su sitio web. Por ejemplo, Si solo usa componentes básicos como formularios y botones, puede eliminar otros componentes como acordeones, etc. del archivo CSS principal. Para comenzar a incursionar en bootstrap, puede descargar las plantillas y componentes básicos degetbootstrap y deja que ocurra la magia.


4

Descargo de responsabilidad: he usado bootstrap en el pasado, pero nunca antes aprecié lo que realmente es, esta descripción viene de mí llegando a mi propia definición hoy. Y sé que bootstrap v4 está fuera, pero encontré que la documentación de bootstrap v3 es mucho más clara, así que lo usé. La biblioteca no va a cambiar fundamentalmente lo que proporciona.

Brevemente

Bootstrap es una colección de archivos CSS y JavaScript que proporciona un estilo predeterminado atractivo para elementos html estándar y algunos objetos de contenido web comunes que no son elementos html estándar.

Para hacer una analogía, es como aplicar un tema en PowerPoint, pero para su sitio web: hace que las cosas se vean bastante bien sin demasiado esfuerzo inicial.

¿En qué consiste?

La documentación oficial de v3 lo divide en tres secciones:

Estos corresponden aproximadamente a las tres cosas principales que ofrece Bootstrap:

  • Archivos CSS simples que diseñan elementos html estándar. Entonces, Bootstrap hace que sus elementos estándar se vean bonitos. por ejemplo, html:<input class="btn btn-default" type="button" value="Input">Click me</button>
  • Los archivos CSS que usan el estilo en elementos html estándar para convertirlos en algo que no es un elemento html estándar pero es un elemento Bootstrap estándar (por ejemplo, https://getbootstrap.com/docs/3.3/components/#progress ). De esta forma, Bootstrap extiende la lista de elementos web "estándar" de una manera visualmente consistente. por ejemplo, html:<span class="glyphicon glyphicon-align-left"></span>
  • Las clases CSS están diseñadas con jQuery en mente. Internamente, Bootstrap utiliza selectores jQuery para modificar los estilos sobre la marcha e interactuar con el DOM, y por lo tanto proporciona al usuario la misma capacidad. Creo que esto requiere más explicación, así que ...

Usando Javascript / jQuery

Bootstrap extiende jQuery bastante. Si miramos el código fuente, podemos ver que usa jQuery para hacer cosas como: configurar escuchas para eventos keydown para interactuar con menús desplegables . Realiza toda esta configuración de jQuery cuando la importa en su <script>etiqueta, por lo que debe asegurarse de que jQuery esté cargado antes que Bootstrap.

Además, vincula el javascript al DOM más estrictamente que jQuery, proporcionando una interfaz de clase javascript . Por ejemplo, alternar un botón mediante programación . Recuerde que CSS simplemente define cómo se ve una cosa, por lo que el trabajo principal de estas operaciones tenderá a modificar qué clases de CSS se aplican al elemento en ese momento. Este tipo de cambio, basado en la entrada del usuario, no se puede hacer con CSS simple.

Hay otras interacciones estándar con un usuario a las que estamos acostumbrados los ciudadanos de Internet que no están cubiertas por CSS. Como hacer clic en un enlace que lo desplaza hacia abajo en una página en lugar de cambiar de página. Una de las cosas que Bootstrap le brinda es una manera fácil de implementar este comportamiento en su propio sitio web.

Normas

He mencionado mucho la palabra "estándar" aquí, y por una buena razón. Creo que lo mejor que proporciona Bootstrap es un conjunto de estándares atractivos. Puede modificar el tema predeterminado tanto como desee, pero es una mejor línea de base que html, css y js sin formato. Y es por eso que se llama "marco".

Los diferentes navegadores web tienen diferentes estilos predeterminados y pueden actuar de manera diferente, y necesitan diferentes prefijos CSS y cosas así. Una de las principales ventajas de Bootstrap es que es mucho más confiable que escribir todas esas cosas entre navegadores (todavía tendrá problemas, estoy seguro, pero es más fácil).

Creo que Bootstrap era más preferido cuando trago y babel no eran tan populares. Mirando Bootstrap parece que viene de un tiempo antes de que todos compilaran su javascript. Sigue siendo relevante, pero ahora puede obtener algunos de los beneficios de otras fuentes.

Las versiones más recientes de CSS le han permitido definir transiciones entre estas listas estáticas a medida que cambian. La versión original de Bootstrap en realidad es anterior a la adopción generalizada de esta capacidad en los navegadores, por lo que todavía tienen sus propias clases de animación. Hay algunos bits de Bootstrap que son así: que otras cosas han surgido a su alrededor y lo hacen parecer un poco redundante.


3

Bootstrap es un marco HTML, CSS, JS con muchos componentes que le permiten crear sitios web o aplicaciones web hermosos y modernos muy rápidamente.

Los siguientes sitios web contienen ejemplos, elementos y componentes reutilizables que puede integrar en su proyecto utilizando el marco de arranque

bootsnipp.com

startbootstrap.com

bootdey.com


1

Bootstrap es el marco de código abierto más popular y ampliamente utilizado del mundo para desarrollar con HTML, CSS y JS. Es un marco front-end de HTML. Bootstrap ayuda a crear sitios web o aplicaciones web receptivas y un sistema de cuadrícula de 12 columnas que ayuda a ajustar dinámicamente el sitio web a una resolución de pantalla adecuada. La versión actual de bootstrap es 4.3.1 y el equipo de bootstrap también ha anunciado oficialmente la versión de Bootstrap 5 y cambios como eliminar jquery de bootstrap. Algunas de las razones cruciales por las que el marco de arranque es más preferible son

  • Es fácil de usar
  • Bootstrap tiene un gran apoyo comunitario
  • Las personalizaciones se pueden hacer fácilmente
  • Aumenta la velocidad de desarrollo.
  • Sensibilidad

    Para más detalles, puede consultar el sitio web oficial: https://getbootstrap.com/

Fuente: https://vmokshagroup.com/blog/bootstrap-advantages/


1

Según los estándares de hoy en día y la terminología web, diría Bootstrap es, en realidad , no un marco , aunque eso es lo que sus reclamaciones de sitios web. La mayoría de los desarrolladores consideran los marcos Angular, Vue y React, mientras que Bootstrap se conoce comúnmente como una " biblioteca ".

Pero, para ser exactos y correctos, Bootstrap es una colección de código abierto para dispositivos móviles de CSS, JavaScript y HTML diseñada para proporcionar medios para desarrollar elementos web comúnmente utilizados considerablemente más rápido (y más inteligente) que tener que codificarlos desde cero .

Algunos principios básicos que contribuyeron al éxito de Bootstrap:

  • es reutilizable
  • es flexible (es decir: permite sistemas de cuadrícula personalizados, cambios de puntos de interrupción de respuesta, tamaños de canales de columna o colores de estado con facilidad; como regla general, la mayoría de las configuraciones están controladas por variables globales)
  • es intuitivo
  • es modular (tanto JavaScript como (S) CSS utilizan un enfoque modular; uno puede encontrar fácilmente tutoriales para hacer compilaciones de Bootstrap personalizadas, para incluir solo las partes que necesitan)
  • tiene compatibilidad entre navegadores superior a la media
  • Accesibilidad web lista para usar (lector de pantalla listo)
  • está bastante bien documentado

Contiene plantillas de diseño y funcionalidad para: diseño, tipografía, formularios, navegación, menús (incluidos menús desplegables), botones, paneles, insignias, modales, alertas, pestañas, plegables, acordeones, carruseles, listas, tablas, paginación, utilidades de medios (incluidos incrustaciones, imágenes y reemplazo de imágenes), utilidades de respuesta, utilidades basadas en color (primario, secundario, peligro, advertencia, información, claro, oscuro, silenciado, blanco), otras utilidades (posición, margen, relleno, tamaño, espaciado, alineación, visibilidad), scrollspy, afijo, información sobre herramientas, popovers.


De forma predeterminada, se basa en jQuery, pero encontrará variantes gratuitas de jQuery impulsadas por cada uno de los marcos de JavaScript progresivos populares modernos:

Trabajar con Bootstrap depende en gran medida de la aplicación de ciertas clases (o, según el marco JS: directivas, métodos o atributos / accesorios) y del uso de estructuras de marcado particulares.

La documentación generalmente contiene ejemplos genéricos que se pueden copiar y pegar fácilmente y usar como plantillas de inicio.


Otra ventaja de desarrollar con Bootstrap es su comunidad vibrante, traducida en una gran cantidad de temas, plantillas y complementos disponibles para ellos, la mayoría de los cuales son de código abierto (es decir, calendarios, selectores de fecha / hora, complementos para la gestión de contenido tabular, como así como bibliotecas / colecciones de componentes creadas sobre Bootstrap, como MDB, plantillas de cartera, plantillas de administración, etc.)

Por último, pero no menos importante, Bootstrap se ha mantenido bien a lo largo de los años, lo que lo convierte en una opción sólida para aplicaciones / sitios web listos para la producción.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.