Naučte se, jak zahrnout React Bootstrap do vašeho projektu
instalace#
nejlepší způsob, jak konzumovat React-Bootstrap je prostřednictvím balíčku npm, kterýmůžete nainstalovat pomocínpm(neboyarn pokud dáváte přednost).
Pokud plánujete přizpůsobení souborů Bootstrap Sass nebo nechcete použít CDN pro stylesheet, může být užitečné také nainstalovat vanilla Bootstrap.,
npm install react-bootstrap bootstrap
Import komponent#
měli byste importovat jednotlivé komponenty jako:react-bootstrap/Button spíše než celou knihovnu.Přitom táhne pouze konkrétní komponenty, které používáte, cožmůže výrazně snížit množství kódu, který nakonec odešleteklient.
import Button from 'react-bootstrap/Button';// or less ideallyimport { Button } from 'react-bootstrap';
Prohlížeč globals#
nabízíme react-bootstrap.jsreact-bootstrap.min.js svazky s componentsexported na window.ReactBootstrap objekt. Thesebundles jsou k dispozici na unpkg, stejně jako v balíčku npm.,
příklady #
React-Bootstrap zahájil repo s několika základními příklady CodeSandbox.Klikněte sem, podívejte se na ně.
Stylesheets#
protože React-Bootstrap nezávisí na velmi přesné verzibootstrap, nemáme loď s žádným zahrnutým CSS. Nicméně, somestylesheet je povinen používat tyto komponenty.
CSS#
{/* The following line can be included in your src/index.js or App.js file*/}import 'bootstrap/dist/css/bootstrap.min.css';
Jak a které styly Bootstrap, které zahrnete, je jen na vás, ale thesimplest způsob je zahrnout nejnovější styly z CDN. Trochuvíce informací o výhodách používání CDN lze naléztzde.,
Sass#
V případě, že používáte Sass nejjednodušší způsob, jak je zahrnout Bootstrap je zdroj Sass filesin hlavní Sass souboru a pak to vyžadují na src/index.js nebo App.js soubor.To platí pro typické create-react-app aplikace v dalších případech použití, možná budete muset setupthe bundler vašeho výběru zkompilovat Sass/SCSS styly CSS.
Customize Bootstrap#
Pokud si přejete přizpůsobit téma Bootstrap nebo jakékoli varianty Bootstrapmůžete vytvořit vlastní soubor Sass:
… A importujte jej do hlavního souboru Sass.,
/* The following line can be included in a src/App.scss */@import "custom";
Pokročilé použití#
Viz Bootstrap docsfor více pokročilé použití případy a podrobnosti o přizpůsobení šablony stylů.
témata #
React-Bootstrap je kompatibilní s existujícími tématy Bootstrap. Justfollow pokyny k instalaci pro vaše téma volby.
podpora Prohlížeče#
naším cílem je podporovat všechny prohlížeče podporované bothReactand Bootstrap.