Afla cum pentru a include Reacționa Bootstrap în proiectul dumneavoastră
Instalare#
Cel mai bun mod de a consuma Reacționa-Bootstrap este prin intermediul npm pachetul pe care se poate instala cu npm (sau yarn dacă preferați).
dacă intenționați să personalizați fișierele Bootstrap Sass sau nu doriți să utilizați un CDN pentru foaia de stil, poate fi util să instalați și vanilla Bootstrap.,
npm install react-bootstrap bootstrap
Importul de Componente#
ar trebui să-import de componente individuale, cum ar fi:react-bootstrap/Button mai degrabă decât întreaga bibliotecă.Acest lucru atrage numai componentele specifice pe care le utilizați, carepoate reduce semnificativ cantitatea de cod pe care o trimiteți clientului.
import Button from 'react-bootstrap/Button';// or less ideallyimport { Button } from 'react-bootstrap';
Browser-ul globals#
oferim react-bootstrap.js șireact-bootstrap.min.js pachete cu toate componentsexported pe window.ReactBootstrap obiect. Aceste legături sunt disponibile pe unpkg, precum și în pachetul npm.,
Examples#
React-Bootstrap a început un repo cu câteva exemple de bază CodeSandbox.Faceți clic pe aicipentru a le verifica.
Stylesheets#
deoarece React-Bootstrap nu depinde de o versiune foarte precisă a bootstrap, nu livrăm Niciun CSS inclus. Cu toate acestea, somestylesheet este necesară pentru a utiliza aceste componente.
CSS#
{/* The following line can be included in your src/index.js or App.js file*/}import 'bootstrap/dist/css/bootstrap.min.css';
cum și ce stiluri Bootstrap includeți depinde de dvs., dar cel mai simplu mod este să includeți cele mai recente stiluri de pe CDN. Un picmai multe informații despre beneficiile utilizării unui CDN pot fi găsiteaici.,
Sass#
în cazul În care utilizați Sass cel mai simplu mod este de a include Bootstrap sursă Sass filesin ta principală Sass fișierului și necesită apoi pe src/index.js sau App.js fișier.Acest lucru se aplică la o problemă tipic create-react-app aplicarea în alte cazuri de utilizare s-ar putea să setupthe bundler de alegerea ta pentru a compila Sass/SCSS foi de stil CSS.
Personalizați Bootstrap#
dacă doriți să personalizați tema Bootstrap sau orice variante Bootstrapputeți crea un fișier Sass personalizat:
… Și importați-l pe fișierul principal Sass.,
/* The following line can be included in a src/App.scss */@import "custom";
utilizare Avansată#
a se Vedea Bootstrap docsfor mai avansate cazuri de utilizare și detalii despre personalizarea foi de stil.
teme #
React-Bootstrap este compatibil cu temele Bootstrap existente. Doarurmați instrucțiunile de instalare pentru tema de alegere.
suport Browser #
scopul nostru este de a sprijini toate browserele acceptate de bothReactand Bootstrap.