Lær hvordan å inkludere Reagere Bootstrap i prosjektet
Installasjon#
Den beste måten å konsumere Reagere-Bootstrap er via npm pakken whichyou kan installere med npm (eller yarn hvis du foretrekker det).
Hvis du har tenkt på å tilpasse Bootstrap Sass-filer, eller ikke wantto bruke en CDN for stilark, kan det være nyttig toinstall vanilje Bootstrap som godt.,
npm install react-bootstrap bootstrap
Importerer Komponenter#
Du bør importere enkelte komponenter som:react-bootstrap/Button snarere enn hele biblioteket.Gjør så trekker i bare de spesifikke komponentene som du bruker, whichcan redusere mengden av kode som du ender opp med å sende til klienten.
import Button from 'react-bootstrap/Button';// or less ideallyimport { Button } from 'react-bootstrap';
Nettleser globals#
Vi gi react-bootstrap.js ogreact-bootstrap.min.js bunter med alle componentsexported på window.ReactBootstrap objekt. Thesebundles er tilgjengelig på unpkg, så vel som i npm-pakken.,
Eksempler#
Reagere-Bootstrap har startet en repo med et par grunnleggende CodeSandbox eksempler.Klikk herfor sjekk dem ut.
Stilark#
Fordi Reagere-Bootstrap ikke avhenger av en meget presis versjon ofBootstrap, vi sender ikke med noen inkludert CSS. Imidlertid, somestylesheet er nødvendig for å bruke disse komponentene.
CSS – #
{/* The following line can be included in your src/index.js or App.js file*/}import 'bootstrap/dist/css/bootstrap.min.css';
Hvordan og som Bootstrap stiler du inkluderer er opp til deg, men thesimplest måte er å inkludere den nyeste stiler fra CDN. En littlemore informasjon om fordelene ved å bruke en CDN kan være foundhere.,
Sass#
I tilfelle du bruker Sass den enkleste måten er å inkludere Bootstrap er kilde Sass filesin din viktigste Sass filen, og deretter kreve det på din src/index.js eller App.js – filen.Dette gjelder til en typisk create-react-app søknad i andre tilfeller må du kanskje setupthe bundler av ditt valg for å kompilere Sass/SCSS stilark CSS.
Tilpass Bootstrap#
Hvis du ønsker å tilpasse Bootstrap tema eller noen Bootstrap variablesyou kan opprette en egendefinert Sass-fil:
… Og importere den på de viktigste Sass-fil.,
/* The following line can be included in a src/App.scss */@import "custom";
Avansert bruk#
Se Bootstrap docsfor mer avansert bruk saker og detaljer om tilpasning av stilark.
Temaer#
Reagere-Bootstrap er kompatibel med eksisterende Bootstrap temaer. Justfollow installasjon instruksjoner for temaet du har valgt.
Nettleser støtter#
Vi har som mål å støtte alle nettlesere støttes av bothReactand Bootstrap.