Megtanulják, hogyan kell tartalmaznia Reagálni Bootstrap a projekt
Telepítés#
A legjobb módja annak, hogy fogyaszt Reagálni-Bootstrap keresztül a npm csomag körül lehet telepíteni a npm (vagy yarn, ha úgy tetszik).
Ha a Bootstrap Sass fájlok testreszabását tervezi, vagy nem akarja használni a CDN-t a stíluslaphoz, hasznos lehettelepítse a vanília Bootstrap-ot is.,
npm install react-bootstrap bootstrap
összetevők importálása #
importálnia kell az egyes összetevőket, mint például:react-bootstrap/Button a teljes könyvtár helyett.Ezzel csak az Ön által használt konkrét összetevőket húzza be, amelyekjelentősen csökkentheti a kód mennyiségét, amelyet végül küldaz ügyfél.
import Button from 'react-bootstrap/Button';// or less ideallyimport { Button } from 'react-bootstrap';
Browser globals#
we provide react-bootstrap.jsandreact-bootstrap.min.jsminden összetevővel rendelkező kötegek, amelyeket a window.ReactBootstrap object. Ezek a csomagok az unpkg-n, valamint az npm csomagban is elérhetők.,
példák #
React-Bootstrap indított repo néhány alapvető CodeSandbox példák.Kattintson ide, hogy ellenőrizze őket.
stíluslapok#
mivel a React-Bootstrap nem függ a bootstrap nagyon pontos verziójától, nem szállítunk semmilyen mellékelt CSS-t. Ezeknek az összetevőknek a használatához azonban szükség van somestylesheet-re.
CSS #
{/* The following line can be included in your src/index.js or App.js file*/}import 'bootstrap/dist/css/bootstrap.min.css';
hogyan és milyen Bootstrap stílusokat tartalmaz, csak rajtad múlik, de thesimplest módja az, hogy tartalmazza a legújabb stílusok a CDN. Egy kicsit több információ található a CDN használatának előnyeirőlitt.,
Sass#
abban az esetben, ha Sass-t használ, a legegyszerűbb módja a Bootstrap forrás Sass fájljainak beillesztésea fő Sass fájlban, majd a src/index.js vagy App.js fájl.Ez egy tipikus create-react-app alkalmazásra vonatkozik más felhasználási esetekben előfordulhat, hogy be kell állítania a választott bundler-t a Sass/SCS stíluslapok CSS-be történő fordításához.
Customize Bootstrap#
Ha szeretné szabni a Bootstrap téma vagy bármilyen Bootstrap variablesakkor létrehozhat egy egyéni Sass fájl:
… Importálja a fő Sass fájlba.,
/* The following line can be included in a src/App.scss */@import "custom";
Advanced usage#
lásd a Bootstrap dokumentumokata fejlettebb Használati esetekhez és a stíluslapok testreszabásával kapcsolatos részletekhez.
Themes #
React-Bootstrap kompatibilis a meglévő Bootstrap témák. Justfollow a telepítési utasításokat a téma a választás.
böngésző támogatás #
célunk, hogy támogassa az összes böngészők által támogatott bothReactand Bootstrap.