Lær at omfatte Reagere Bootstrap i dit projekt
Installation#
Den bedste måde at forbruge Reagere-Bootstrap er via npm pakke whichyou kan installere med npm (eller yarn hvis du foretrækker det).
Hvis du planlægger at tilpasse Bootstrap Sass-filerne, eller ikke ønsker at bruge en CDN til stylesheet, kan det også være nyttigt at installere vanilla Bootstrap.,
npm install react-bootstrap bootstrap
import af komponenter#
Du bør importere individuelle komponenter som:react-bootstrap/Button i stedet for hele biblioteket.Dermed trækker i kun de specifikke komponenter, som du bruger, som kan reducere mængden af kode, du ender med at sende til klienten.
import Button from 'react-bootstrap/Button';// or less ideallyimport { Button } from 'react-bootstrap';
Browser globals#
Vi leverer react-bootstrap.js ogreact-bootstrap.min.js bundter med alle componentsexported på window.ReactBootstrap objektet. Disse bind er tilgængelige på unpkg, såvel som i NPM-pakken.,
eksempler#
React-Bootstrap har startet en repo med et par grundlæggende Codesandbo.eksempler.Klik her for at tjekke dem ud.
Stylesheets#
da React-Bootstrap ikke afhænger af en meget præcis version af Bootstrap, sender vi ikke med nogen inkluderet CSS. Men somestylesheet er forpligtet til at bruge disse komponenter.
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 hvilke Bootstrap stilarter, du medtager, er op til dig, men thesimplest måde er at inkludere de nyeste styles fra CDN. Lidtflere oplysninger om fordelene ved at bruge en CDN kan findesher.,
Sass#
I tilfælde af at du bruger Sass den enkleste måde er at inkludere Bootstrap ‘ s kilde Sass filesin din vigtigste Sass-fil og derefter kræve det på din src/index.js eller App.js fil.Dette gælder for en typisk create-react-app ansøgning i andre use cases skal du muligvis setupbundteren efter eget valg for at kompilere SASS / SCSS stylesheets til CSS.
Tilpas Bootstrap#
Hvis du ønsker at tilpasse Bootstrap-temaet eller eventuelle Bootstrap-variablerdu kan oprette en brugerdefineret Sass-fil:
… Og importere det på de vigtigste Sass-fil.,
/* The following line can be included in a src/App.scss */@import "custom";
avanceret brug#
se Bootstrap-dokumenterne for mere avancerede brugssager og detaljer om tilpasning af stilark.
temaer#
React-Bootstrap er kompatibel med eksisterende Bootstrap temaer. Justfollo.installationsvejledningen til dit tema valg.
bro .ser support#
vi sigter mod at understøtte alle bro .sere, der understøttes af bothReactand Bootstrap.