Fermer

mai 15, 2018

Bibliothèques Bootstrap UI pour Angular, React et Vue.js –


Cet article répertorie un certain nombre de ressources qui fournissent des composants Bootstrap pour vos applications Angular, React et Vue.js.

Ces jours-ci, le Web est rempli d'applications monopages (SPA) qui se sentent rapides et réactives aux utilisateurs interaction. Souvent, ils sont alimentés par des frameworks JavaScript comme Angular React et Vue.js .

Ces bibliothèques sont d'excellents outils qui aident à garder le JavaScript code nécessaire pour construire des SPAs plus organisé et maintenable, tout en utilisant des techniques astucieuses pour mettre à jour le DOM sans ralentir la page web.

Quand il s'agit de styliser les composants que vous pouvez créer avec ces bibliothèques, vous avez l'embarras du choix: vous pouvez écrire votre propre document CSS global comme vous le feriez normalement sur des sites Web normaux, vous pouvez écrire des styles en ligne, ou vous pouvez utiliser des frameworks UI – c'est ce sur quoi je vais me concentrer ici.

Eléments d'interface Bootstrap pour développeurs angulaires

Angular est le plus ancien des cadres que je traite dans cet article. Sa maturité et sa longue vie dans le cycle de vie brutal des frameworks JavaScript est un signe de sa base solide et fiable pour les projets web.

Quels outils sont là si vous voulez utiliser Bootstrap pour styler votre Angular

ng-bootstrap

 ng-bootstrap

ng-bootstrap propose un ensemble de composants de type Bootstrap qui permettent de créer des applications Bootstrap avec Angular en toute simplicité.

Plus spécifiquement, cette ressource contient un ensemble de directives angulaires basées sur le balisage et les styles de Bootstrap. Pour l'utiliser, il est important de ne pas inclure de fichiers JavaScript Bootstrap. Vous n'avez besoin que des fichiers Angular et Bootstrap CSS .

ng-bootstrap est un projet libre et open-source . N'hésitez pas à y contribuer ou à demander de nouvelles fonctionnalités sur GitHub.

ngx-bootstrap

 ngx-bootstrap

Voici une autre bibliothèque modulaire open source de composants Bootstrap fonctionnant sous Angular. Vous n'avez pas besoin d'utiliser jQuery ou un code Bootstrap JS, bien que le balisage et CSS soient fournis par Bootstrap.

Pour installer la bibliothèque en utilisant npm tapez cette ligne dans la ligne de commande:

 ] npm install ngx-bootstrap --save 

Puis incluez le lien vers la feuille de style de Bootstrap dans index.html document:

  

Vous pouvez vous référer aux docs géniaux pages sur le site Web ngx-bootstrap pour des explications détaillées et des didacticiels

Bootstrap pour les développeurs React

React a été créé par les développeurs Facebook et est l'une des bibliothèques JavaScript les plus à la mode pour les utilisateurs modernes. interfaces

Si vous cherchez à donner à votre application React une cure de jouvence Bootstrap, voici quelques-unes des options qui s'offrent à vous:

reactstrap

 reactstrap

reactstrap est une bibliothèque rapide et pratique qui vous permet d'ajouter un Bootst rap 4 l'apparence de votre application React.

Le style est fourni par Bootstrap, tandis que la fonctionnalité JavaScript est intégrée aux composants reatstrap. Cela signifie que vous n'avez pas besoin d'inclure de code jQuery ou Bootstrap JS. Cependant, vous devez inclure reac-popper car certains composants Bootstrap dynamiques comme les listes déroulantes dépendent de Popper.js pour fonctionner correctement.

Vous pouvez installer reatstrap via un CDN: [19659042]

Dans ce cas, vous devez inclure la bibliothèque React et ReactTransitionGroup avant reactstrap.

Vous pouvez également installer la bibliothèque et toutes les dépendances avec NPM :

 npm install --save reactstrap @ next Réagissez reac-dom 

Si vous êtes curieux, passez aux docs et apprenez-en plus sur chaque composant et comment intégrer reactstrap avec l'application Create React

React-Bootstrap

 React-Bootstrap

React-Bootstrap est un projet open-source qui est encore en cours de développement pour atteindre la version 1.0.0

Puisque cette bibliothèque ne supporte aucune version spécifique de Bootstrap, vous êtes libre d'inclure n'importe quelle version de B La feuille de style Ootstrap vous semble la mieux adaptée à votre projet. De manière générale, y compris la dernière version de Bootstrap vous assurera les avantages des améliorations et corrections de bugs, donc ce devrait être votre option préférée.

La façon la plus directe d'inclure Bootstrap dans votre application React est via un CDN: [19659042]

Sur le front JavaScript, vous avez juste besoin de Réagir; Aucun jQuery ou Bootstrap JS n'est requis pour que Rect-Bootstrap fonctionne. Vous pouvez installer cette bibliothèque Bootstrap UI en utilisant NPM:

 npm install --save réagissent
npm install --save react-bootstrap 

L'installation de la bibliothèque de cette façon vous permettra d'importer des composants individuels à partir de react-bootstrap / lib plutôt que de la bibliothèque entière. Cela n'introduit que les composants individuels dont vous avez besoin plutôt que le package complet, ce qui est idéal pour conserver la taille du fichier sous contrôle.

Vous pouvez également inclure React-Bootstrap et la bibliothèque React en utilisant CDNJS et référencez les fichiers dans vos balises :

 <script src = "https://cdnjs.cloudflare.com/ajax/libs/react//react.min.js"> 
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react//react-dom.min.js"> 
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap//react-bootstrap.min.js"> 

Conception matérielle pour Bootstrap React Version

 Material Design pour Bootstrap (version React)

Material Design pour Bootstrap (disponible aussi pour Angular et Vue ) est une bibliothèque d'interface utilisateur pour React qui combine l'aspect de Bootstrap et Google Material Design .

Parmi ses avantages sont:

  • étant à jour avec la dernière version de Bootstrap
  • sa documentation impressionnante et tutoriels
  • étant compatible avec la dernière version de React
  • son ​​utilisation de JSX
  • son ​​installation facile
  • étant libre pour des projets personnels et commerciaux.

Pour commencer avec Material Design pour Bootstrap, il suffit de le télécharger directement du projet. site web ou utilisez le NPM:

 npm install mdbreact 

ou utilisez le fil: [19659017] yarn ajouter mdbreact

Une fois que vous avez les fichiers, tout est lié de manière appropriée et prêt à partir. Exécutez npm install puis npm démarrez et obtenez le codage.

Éléments d'interface Bootstrap pour les développeurs de vues

Vue.js n'existe pas depuis longtemps, mais c'est régulièrement

  • il est facile de commencer: vous pouvez rapidement l'inclure dans un projet HTML via un CDN et l'incorporer dans votre document HTML normal en utilisant ses directives
  • ] vous pouvez décider d'incorporer Vue de manière incrémentielle en commençant avec quelques fonctionnalités et finalement l'adopter comme un framework à part entière
  • il a une petite taille de fichier et il est très performant prêt à l'emploi.

Pour intégrer Bootstrap dans votre Bootstrap-Vue

Bootstrap-Vue

 Bootstrap-Vue

Bootstrap-Vue se présente sur son site web comme la bibliothèque de l'interface utilisateur. :

fournit l'une des implémentations les plus complètes de Bootstra p V4 composants et système de grille disponibles pour Vue.js 2.4+, avec un marquage étendu et automatisé WAI-ARIA accessibilité

La documentation est excellente et vous pouvez également essayer la bibliothèque avant de l'inclure dans votre projet sur le ] Bootstrap-Vue playground .

Conclusion

Cet article a répertorié un certain nombre de bibliothèques d'interface utilisateur pour vous aider à donner un aspect Bootstrap aux composants de votre SPA. Ce sont des composants Bootstrap entièrement fonctionnels qui fonctionnent avec Angular, React et Vue, sans nécessiter de travail supplémentaire de votre part.

Quelle est votre façon préférée d'intégrer Bootstrap avec votre framework JavaScript de choix?




Source link