Lue, miten kuuluu Reagoida Bootstrap projektin
Asennusta#
paras tapa kuluttaa Reagoida-Bootstrap on kautta npm paketti, jotkavoit asentaa npm (tai yarn jos haluat).
Jos aiot muokkaamalla Bootstrap Sass tiedostoja tai halua käyttää CDN tyylitiedoston, se voi olla hyödyllistä toinstall vanilja Bootstrap samoin.,
npm install react-bootstrap bootstrap
tuo komponentteja#
sinun pitäisi tuoda yksittäisiä komponentteja kuten:react-bootstrap/Button eikä koko kirjastoa.Näin vedät sisään vain tietyt osat, joita käytät, mikä voi vähentää merkittävästi koodin määrää, jonka päätyt lähettää asiakkaalle.
import Button from 'react-bootstrap/Button';// or less ideallyimport { Button } from 'react-bootstrap';
Selain globals#
tarjoamme react-bootstrap.js jareact-bootstrap.min.js nippujen kanssa kaikki componentsexported päälle window.ReactBootstrap objekti. Ne ovat saatavilla unpkg: ssä sekä npm-paketissa.,
Examples#
React-Bootstrap on aloittanut repon muutamalla peruskoodilla ja Laatikkoesimerkeillä.Klikkaa tästä tarkistaaksesi ne.
Stylesheets#
koska React-Bootstrap ei riipu kovin tarkasta versiosta bootstrapista, emme toimita millään mukana olevalla CSS: llä. Näiden komponenttien käyttöön tarvitaan kuitenkin somestylesheet.
CSS#
{/* The following line can be included in your src/index.js or App.js file*/}import 'bootstrap/dist/css/bootstrap.min.css';
miten ja mitkä Bootstrap-tyylit sisällytetään on sinusta kiinni, mutta thesimplest way sisältää CDN: n uusimmat tyylit. Hieman tietoa CDN: n käytön hyödyistä löytyy täältä.,
Sass#
Jos käytät Sassia, yksinkertaisin tapa on sisällyttää Bootstrapin lähde Sass-files Pääsass-tiedostoosi ja vaatia se sitten src/index.js tai App.js – tiedostoosi.Tämä koskee tyypillinen create-react-app sovelluksen muuta käyttöä tapauksissa saatat joutua setupthe paalain valintasi koota Sass/SCSS CSS stylesheets.
Mukauta Bootstrap#
Jos haluat muokata Bootstrap-teemaa tai mitä tahansa Bootstrap-variablesyou-tiedostoa:
… Ja tuo se Sassin päätiedostoon.,
/* The following line can be included in a src/App.scss */@import "custom";
Lisäasetukset-käyttö#
Katso Bootstrap docsfor kehittyneempiä käyttää tapauksia ja yksityiskohtia muokkaamalla stylesheets.
Teemat#
React-Bootstrap on yhteensopiva olemassa olevien Bootstrap-teemojen kanssa. Seuraa vain valitsemasi teeman asennusohjeita.
Selaintuki#
pyrimme tukemaan kaikkia bothreactand Bootstrapin tukemia selaimia.