Bevezető

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.

Leave a Comment