Bibliotecas Bootstrap UI para Angular, React y Vue.js

Bibliotecas Bootstrap UI para Angular, React y Vue.js

Este artículo enumera una serie de recursos que proporcionan componentes Bootstrap para sus aplicaciones Angular, React y Vue.js.

En estos días, la web está llena de aplicaciones de una sola página (SPA) que se sienten rápidas y receptivas a la interacción del usuario. A menudo, funcionan con marcos de JavaScript como Angular, Reaccionar, y Vue.js.

Estas bibliotecas son excelentes herramientas que ayudan a mantener el código JavaScript necesario para construir SPAs más organizados y fáciles de mantener, mientras usan técnicas inteligentes para actualizar el DOM sin ralentizar la página web.

Cuando se trata de diseñar los componentes que puede crear con estas bibliotecas, tiene muchas opciones: puede escribir su propio documento CSS global como lo haría normalmente en sitios web normales, puede escribir estilos en línea o puede usar marcos de interfaz de usuario. que es en lo que me enfocaré aquí.

Elementos de la interfaz Bootstrap para desarrolladores angulares

Angular es el más antiguo de los frameworks con los que me ocupo en este artículo. Su madurez y larga vida en el ciclo de vida brutal de los frameworks JavaScript es una señal de su base sólida y confiable para proyectos web.

¿Qué herramientas existen si desea usar Bootstrap para diseñar su aplicación Angular?

ng-bootstrap

ng-bootstrap

ng-bootstrap ofrece un conjunto de componentes de estilo Bootstrap que hace que la creación de aplicaciones Bootstrap con Angular sea muy sencilla.

Más específicamente, este recurso contiene un conjunto de Directivas angulares basado en el marcado y los estilos de Bootstrap. Para usarlo, es importante que no incluya ningún archivo JavaScript de Bootstrap. Solo necesitas Angular y Bootstrap CSS archivos.

ng-bootstrap es gratis y proyecto de código abierto. Siéntase libre de contribuir o solicitar nuevas funciones en GitHub.

ngx-bootstrap

ngx-bootstrap

Esta es otra gran biblioteca modular de código abierto de componentes Bootstrap con tecnología Angular. No es necesario utilizar jQuery ni ningún código JS de Bootstrap, aunque Bootstrap proporciona el marcado y CSS.

Para instalar la biblioteca usando npm, escriba esta línea en la línea de comando:

npm install ngx-bootstrap --save

Luego incluya el enlace a la hoja de estilo de Bootstrap en index.html documento:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">

Puedes referirte a lo impresionante docs páginas en el sitio web ngx-bootstrap para obtener explicaciones detalladas y tutoriales.

Elementos de la interfaz Bootstrap para desarrolladores de React

Reaccionar fue creado por los desarrolladores de Facebook y es una de las bibliotecas de JavaScript más modernas para crear interfaces de usuario modernas.

Si está buscando darle a su aplicación React un cambio de imagen de Bootstrap, estas son algunas de las opciones disponibles para usted.

reacciona

reacciona

reacciona es una biblioteca rápida y conveniente que le permite agregar una apariencia de Bootstrap 4 a su aplicación React.

El estilo lo proporciona Bootstrap, mientras que la funcionalidad de JavaScript está integrada en los componentes de reactstrap. Esto significa que no necesita incluir ningún código jQuery o Bootstrap JS. Sin embargo, debe incluir reaccionar-popper, ya que algunos componentes dinámicos de Bootstrap, como los menús desplegables, dependen de Popper.js para que funcione correctamente.

Puede instalar reactstrap a través de un CDN:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/4.8.0/reactstrap.min.js">

En este caso, debe incluir el Reaccionar biblioteca y ReactTransitionGroup antes de reactstrap.

También puede instalar la biblioteca y todas las dependencias con NPM:

npm install --save [email protected] react react-dom

Si tiene curiosidad, consulte los documentos y obtenga más información sobre cada componente y cómo integrar reactstrap con el Crear aplicación React configuración.

Reaccionar-Bootstrap

Reaccionar-Bootstrap

Reaccionar-Bootstrap es un proyecto de código abierto que aún se encuentra en desarrollo activo para alcanzar la versión 1.0.0.

Dado que esta biblioteca no admite ninguna versión específica de Bootstrap, puede incluir cualquier hoja de estilo de Bootstrap que crea que se adapta mejor a su proyecto. En términos generales, incluir la última versión de Bootstrap asegurará que disfrute de los beneficios de las mejoras y las correcciones de errores, por lo que esta debería ser su opción preferida.

La forma más sencilla de incluir Bootstrap en su aplicación React es a través de un CDN:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

En el frente de JavaScript, solo necesita React; no se requiere jQuery o Bootstrap JS para que Rect-Bootstrap funcione. Puede instalar esta biblioteca de UI de Bootstrap usando NPM:

npm install --save react react-dom
npm install --save react-bootstrap

Instalar la biblioteca de esta manera le permitirá importar componentes individuales desde react-bootstrap/lib en lugar de toda la biblioteca. Al hacerlo, solo se obtienen los componentes individuales que necesita en lugar de todo el paquete, lo que es excelente para mantener el tamaño del archivo bajo control.

Alternativamente, puede incluir React-Bootstrap y la biblioteca React como un paquete usando CDNJS y haga referencia a los archivos en su <script> etiquetas:

<script src=""></script>
<script src=""></script>
<script src=""></script>

Diseño de materiales para la versión Bootstrap React

Material Design para Bootstrap (versión React)

Diseño de materiales para Bootstrap (también disponible para Angular y Vue) es una biblioteca de interfaz de usuario para React que combina la apariencia de Bootstrap y la de Google. Diseño de materiales.

Entre sus ventajas se encuentran:

  • estar actualizado con la última versión de Bootstrap
  • su impresionante documentación y tutoriales
  • siendo compatible con la última versión de React
  • su uso de JSX
  • su fácil instalación
  • siendo gratuito para proyectos personales y comerciales.

Para comenzar con Material Design para Bootstrap, simplemente descárguelo directamente desde el proyecto sitio web, o use NPM:

npm install mdbreact

o use hilo:

yarn add mdbreact

Una vez que tenga los archivos, todo se vinculará de manera adecuada y estará listo para funcionar. Correr npm install entonces npm start y consiga la codificación.

Elementos de la interfaz Bootstrap para desarrolladores de Vue

Vue.js no ha existido por mucho tiempo, pero ha ido ganando terreno en popularidad debido a una serie de beneficios que lo acompañan:

  • es fácil comenzar: puede incluirlo rápidamente en un proyecto HTML a través de una CDN e incorporarlo en su documento HTML normal usando sus directivas
  • puede decidir incorporar Vue gradualmente comenzando con algunas características y eventualmente adoptarlo como un marco completo
  • tiene un tamaño de archivo pequeño y es muy eficaz desde el primer momento.

Para integrar Bootstrap en su aplicación basada en Vue, Bootstrap-Vue es una buena opción.

Bootstrap-Vue

Bootstrap-Vue

Bootstrap-Vue se presenta en su sitio web como la biblioteca de IU que:

proporciona una de las implementaciones más completas de los componentes Bootstrap V4 y el sistema de cuadrícula disponible para Vue.js 2.4+, con un marcado de accesibilidad WAI-ARIA extenso y automatizado.

La documentación es excelente y también puede probar la biblioteca antes de incluirla en su proyecto en el Zona de juegos Bootstrap-Vue.

Conclusión

Este artículo ha enumerado una serie de bibliotecas de interfaz de usuario para ayudarlo a dar a los componentes de su SPA una apariencia Bootstrap. Estos son componentes Bootstrap completamente funcionales que funcionan con Angular, React y Vue listos para usar, sin necesidad de trabajo adicional de su parte.

¿Cuál es su forma favorita de integrar Bootstrap con el marco de JavaScript que elija?

También te puede interesar