Imparare a includere Reagire Bootstrap nel progetto
Installazione#
Il modo migliore per consumare Reagire-Bootstrap è via npm pacchetto quale può installare con npm (o yarn se si preferisce).
Se si prevede di personalizzare i file Bootstrap Sass, o non si desidera utilizzare un CDN per il foglio di stile, potrebbe essere utile installare anche vanilla Bootstrap.,
npm install react-bootstrap bootstrap
Importazione di componenti#
È necessario importare singoli componenti come: react-bootstrap/Button piuttosto che l’intera libreria.Facendo così tira in solo i componenti specifici che si utilizza, whichcan ridurre significativamente la quantità di codice si finisce per inviare tothe client.
import Button from 'react-bootstrap/Button';// or less ideallyimport { Button } from 'react-bootstrap';
Browser globals#
forniamo react-bootstrap.js ereact-bootstrap.min.js bundle con tutti componentsexported su window.ReactBootstrap oggetto. Thesebundles sono disponibili su unpkg, così come nel pacchetto npm.,
Esempi #
React-Bootstrap ha avviato un repository con alcuni esempi di CodeSandbox di base.Clicca quiper controllarli.
Stylesheets#
Poiché React-Bootstrap non dipende da una versione molto precisa diBootstrap, non viene fornito con alcun CSS incluso. Tuttavia, somestylesheet è necessario per utilizzare questi componenti.
CSS#
{/* The following line can be included in your src/index.js or App.js file*/}import 'bootstrap/dist/css/bootstrap.min.css';
Come e quali stili di Bootstrap includi dipende da te, ma il modo più semplice è includere gli stili più recenti dalla CDN. Un po ‘ più informazioni sui vantaggi dell’utilizzo di un CDN può essere trovatoqui.,
Sass#
Nel caso in cui si utilizzi Sass, il modo più semplice è includere i file Sass di origine del Bootstrap nel file Sass principale e quindi richiederlo sul filesrc/index.jsoApp.js.Questo vale per una tipica applicazionecreate-react-app in altri casi d’uso potresti dover configurare il bundler di tua scelta per compilare fogli di stile Sass/SCSS su CSS.
Personalizza Bootstrap#
Se desideri personalizzare il tema Bootstrap o qualsiasi variabile Bootstrap puoi creare un file Sass personalizzato:
… E importarlo sul file Sass principale.,
/* The following line can be included in a src/App.scss */@import "custom";
Uso avanzato#
Vedere i documenti di Bootstrap per casi d’uso più avanzati e dettagli sulla personalizzazione dei fogli di stile.
Themes#
React-Bootstrap è compatibile con i temi Bootstrap esistenti. Justfollow le istruzioni di installazione per il vostro tema di scelta.
Supporto del browser#
Miriamo a supportare tutti i browser supportati da bothReactand Bootstrap.