Apprenez à inclure Réagir Bootstrap dans votre projet
Installation#
La meilleure façon de consommer de Réagir-Bootstrap est via le package npm lequel installer avec des npm (ou yarn si vous préférez).
Si vous prévoyez de personnaliser les fichiers Bootstrap Sass, ou si vous ne voulez pas utiliser un CDN pour la feuille de style, il peut également être utile d’installer vanilla Bootstrap.,
npm install react-bootstrap bootstrap
l’Importation de Composants#
Vous devez importer les composants individuels de la forme:react-bootstrap/Button plutôt que l’ensemble de la bibliothèque.Cela ne fait appel qu’aux composants spécifiques que vous utilisez, ce qui peut réduire considérablement la quantité de code que vous finissez par envoyer au client.
import Button from 'react-bootstrap/Button';// or less ideallyimport { Button } from 'react-bootstrap';
Navigateur globals#
Nous fournissons react-bootstrap.js etreact-bootstrap.min.js bottes avec tous les componentsexported sur le window.ReactBootstrap objet. Ces modules sont disponibles sur unpkg, ainsi que dans le package npm.,
exemples#
React-Bootstrap a démarré un dépôt avec quelques exemples de base CodeSandbox.Cliquez ci-jointe les vérifier.
feuilles de style#
parce que React-Bootstrap ne dépend pas d’une version très précise de bootstrap, nous ne livrons pas avec du CSS inclus. Cependant, somestylesheet est nécessaire pour utiliser ces composants.
CSS#
{/* The following line can be included in your src/index.js or App.js file*/}import 'bootstrap/dist/css/bootstrap.min.css';
comment et quels styles de Bootstrap vous incluez dépend de vous, mais le moyen le plus simple est d’inclure les derniers styles du CDN. Un peuplus d’informations sur les avantages de l’utilisation d’un CDN peuvent être trouvéici.,
sass#
Si vous utilisez Sass, le moyen le plus simple est d’inclure les fichiers Sass source du Bootstrap dans votre fichier SASS principal, puis de l’exiger sur votre fichiersrc/index.js ouApp.js.Ceci s’applique à une application create-react-app typique dans d’autres cas d’utilisation, vous devrez peut-être configurer le bundler de votre choix pour compiler des feuilles de style SASS/SCSS en CSS.
personnaliser Bootstrap#
Si vous souhaitez personnaliser le thème Bootstrap ou n’importe quelle variable Bootstrap, vous pouvez créer un fichier SASS personnalisé:
… Et importez – le sur le fichier SASS principal.,
/* The following line can be included in a src/App.scss */@import "custom";
utilisation avancée#
Voir la documentation Bootstrap pour des cas d’utilisation plus avancés et des détails sur la personnalisation des feuilles de style.
Thèmes#
Réagissent-Bootstrap est compatible avec les thèmes Bootstrap. Justfollow les instructions d’installation pour votre thème de choix.
support du navigateur#
Nous visons à prendre en charge tous les navigateurs pris en charge par bothReactand Bootstrap.