leer hoe u React Bootstrap in uw project kunt opnemen
installatie#
De beste manier om React-Bootstrap te gebruiken is via het NPM-pakket dat u kunt installeren met npm(ofyarnindien gewenst).
als je van plan bent om de Bootstrap Sass bestanden aan te passen, of geen CDN wilt gebruiken voor het stylesheet, kan het handig zijn om vanilla Bootstrap ook te installeren.,
npm install react-bootstrap bootstrap
importeren van componenten#
u moet individuele componenten importeren zoals:react-bootstrap/Button in plaats van de hele bibliotheek.Door dit te doen trekt alleen de specifieke componenten die u gebruikt, die aanzienlijk kan verminderen de hoeveelheid code die u uiteindelijk naar de klant te sturen.
import Button from 'react-bootstrap/Button';// or less ideallyimport { Button } from 'react-bootstrap';
Browser globals#
wij bieden react-bootstrap.js enreact-bootstrap.min.js Bundels Met alle componenten geëxporteerd op het window.ReactBootstrap object. Deze bundels zijn beschikbaar op unpkg, evenals in het NPM-pakket.,
voorbeelden #
React-Bootstrap is een repo gestart met een paar basis voorbeelden van CodeSandbox.Klik hier om ze te bekijken.
Stylesheets#
omdat React-Bootstrap niet afhankelijk is van een zeer precieze versie van bootstrap, wordt er geen CSS meegeleverd. Echter, somestylesheet is vereist om deze componenten te gebruiken.
CSS#
{/* The following line can be included in your src/index.js or App.js file*/}import 'bootstrap/dist/css/bootstrap.min.css';
hoe en welke Bootstrap stijlen u opneemt is aan u, maar de beste manier is om de nieuwste stijlen van de CDN op te nemen. Meer informatie over de voordelen van het gebruik van een CDN vindt u hier.,
Sass#
in het geval dat u Sass gebruikt, is de eenvoudigste manier om de broncode Sass-bestanden van de Bootstrap in uw hoofd Sass-bestand op te nemen en het vervolgens op uw src/index.js of App.js bestand te vereisen.Dit is van toepassing op een typische create-react-app toepassing in andere use cases moet u mogelijk de bundler van uw keuze Instellen om Sass/SCSS stylesheets naar CSS te compileren.
Bootstrap aanpassen#
Als u het Bootstrap-thema of elke Bootstrapvariables wilt aanpassen, kunt u een aangepast Sass-bestand aanmaken:
… En importeer het in het hoofd Sass bestand.,
/* The following line can be included in a src/App.scss */@import "custom";
geavanceerd gebruik#
zie de Bootstrap docsvoor meer geavanceerde use cases en details over het aanpassen van stylesheets.
thema ‘s#
React-Bootstrap is compatibel met bestaande Bootstrap-thema’ s. Volg gewoon de installatie-instructies voor uw thema van keuze.
Browser ondersteuning#
We streven ernaar om alle browsers ondersteund door zowel react als Bootstrap te ondersteunen.