Dowiedz się, jak włączyć React Bootstrap do swojego projektu
instalacja#
najlepszym sposobem na użycie React-Bootstrap jest pakiet npm, który możesz zainstalować za pomocąnpm(lubnpm 8c6844f292 ” >
jeśli wolisz).
jeśli planujesz dostosować pliki Bootstrap Sass lub nie chcesz używać CDN do arkusza stylów, pomocne może być również zainstalowanie vanilla Bootstrap.,
npm install react-bootstrap bootstrap
Importowanie komponentów#
należy importować poszczególne komponenty, takie jak:react-bootstrap/Button zamiast całej biblioteki.W ten sposób przyciąga tylko określone komponenty, których używasz, co może znacznie zmniejszyć ilość kodu, który wysyłasz do klienta.
import Button from 'react-bootstrap/Button';// or less ideallyimport { Button } from 'react-bootstrap';
Browser globals#
zapewniamy react-bootstrap.js Ireact-bootstrap.min.js pakiety ze wszystkimi komponentami eksportowanymi na window.ReactBootstrap obiekt. Są one dostępne na unpkg, jak również w pakiecie npm.,
przykłady#
React-Bootstrap uruchomił repo z kilkoma podstawowymi przykładami CodeSandbox.Kliknij, aby je sprawdzić.
arkusze stylów#
ponieważ React-Bootstrap nie zależy od bardzo precyzyjnej wersji bootstrap, nie dostarczamy żadnych dołączonych CSS. Jednak niektóre arkusze są wymagane do korzystania z tych składników.
CSS#
{/* The following line can be included in your src/index.js or App.js file*/}import 'bootstrap/dist/css/bootstrap.min.css';
to, jak i jakie style Bootstrap dodasz, zależy od ciebie, ale najlepszym sposobem jest dołączenie najnowszych stylów z CDN. Więcej informacji na temat korzyści płynących z korzystania z CDN można znaleźć tutaj.,
Sass#
w przypadku, gdy używasz Sass, najprostszym sposobem jest dołączenie źródłowego pliku Sass Bootstrapa w głównym pliku Sass, a następnie Wymaganie go w plikusrc/index.jslubApp.js.Dotyczy to typowej aplikacji create-react-app w innych przypadkach może być konieczne skonfigurowanie wybranego pakietu do kompilacji arkuszy stylów SASS / SCSS do CSS.
Dostosuj motyw Bootstrap#
Jeśli chcesz dostosować motyw Bootstrap lub dowolną zmienną Bootstrap, możesz utworzyć niestandardowy plik Sass:
… I zaimportować go do głównego pliku Sass.,
/* The following line can be included in a src/App.scss */@import "custom";
zaawansowane użycie#
Zobacz dokumenty Bootstrap, aby uzyskać bardziej zaawansowane przypadki użycia i szczegóły dotyczące dostosowywania arkuszy stylów.
motywy#
React-Bootstrap jest kompatybilny z istniejącymi motywami Bootstrap. Po prostu postępuj zgodnie z instrukcjami instalacji dla wybranego motywu.
Obsługa przeglądarki#
naszym celem jest obsługa wszystkich przeglądarek obsługiwanych zarówno przez reactand Bootstrap.