lär dig att inkludera React Bootstrap i ditt projekt
Installation#
det bästa sättet att konsumera React-Bootstrap är via npm-paketet som du kan installera med npm (eller yarn om du föredrar). – herr talman!
om du planerar att anpassa Bootstrap Sass-filer, eller inte vill använda en CDN för stilmallen, kan det vara bra att installera vanilla Bootstrap också.,
npm install react-bootstrap bootstrap
importera komponenter#
Du bör importera enskilda komponenter som:react-bootstrap/Button I stället för hela biblioteket.Om du gör det drar du bara in de specifika komponenter du använder, vilketkan avsevärt minska mängden kod du hamnar skicka tillklienten.
import Button from 'react-bootstrap/Button';// or less ideallyimport { Button } from 'react-bootstrap';
browser globals#
Vi tillhandahållerreact-bootstrap.js ochreact-bootstrap.min.js buntar med alla komponenterexporteras på objektetwindow.ReactBootstrap. Dessa konton finns tillgängliga på unpkg, liksom i npm-paketet.,
exempel#
React-Bootstrap har startat en repo med några grundläggande CodeSandbox exempel.Klicka Här kontrollera dem.
Stylesheets#
eftersom React-Bootstrap inte är beroende av en mycket exakt version avbootstrap skickar vi inte med någon inkluderad CSS. Emellertid krävs vissasylesheet för att använda dessa komponenter.
CSS#
{/* The following line can be included in your src/index.js or App.js file*/}import 'bootstrap/dist/css/bootstrap.min.css';
hur och vilka Bootstrap-stilar du inkluderar är upp till dig, men det enklaste sättet är att inkludera de senaste stilarna från CDN. Litemer information om fördelarna med att använda en CDN finns här.,
Sass#
om du använder Sass är det enklaste sättet att inkludera bootstraps källfileri din huvudsakliga Sass-fil och sedan kräva den på din src/index.js eller App.js – fil.Detta gäller för en typiskcreate-react-app – applikation i andra användningsfall kan du behöva ställa in den bunt som du väljer att sammanställa Sass/SCSS-stilmallar till CSS.
anpassa Bootstrap#
om du vill anpassa Bootstrap-temat eller någon Bootstrap-variabeldu kan skapa en anpassad Sass-fil:
… Och importera den på huvud Sass-filen.,
/* The following line can be included in a src/App.scss */@import "custom";
avancerad användning#
se Bootstrap-dokumentför mer avancerade användningsfall och detaljer om hur du anpassar stilmallar.
teman#
React-Bootstrap är kompatibel med befintliga Bootstrap teman. Justfollow installationsanvisningarna för ditt tema val.
Browser support#
Vi strävar efter att stödja alla webbläsare som stöds av bothReactand Bootstrap.