Erfahren Sie, wie Sie React Bootstrap in Ihr Projekt aufnehmen
Installation#
Der beste Weg, React-Bootstrap zu verwenden, ist über das npm-Paket, dasSie können mit npm installieren (oder yarn, wenn Sie möchten).
Wenn Sie die Bootstrap-Sass-Dateien anpassen möchten oder kein CDN für das Stylesheet verwenden möchten, kann es hilfreich sein, Vanilla Bootstrap ebenfalls zu installieren.,
npm install react-bootstrap bootstrap
Komponenten importieren#
Sie sollten einzelne Komponenten wie:react-bootstrap/Button anstelle der gesamten Bibliothek importieren.Auf diese Weise werden nur die spezifischen Komponenten abgerufen, die Sie verwenden, was die Menge an Code, die Sie am Ende an den Client senden, erheblich reduzieren kann.
import Button from 'react-bootstrap/Button';// or less ideallyimport { Button } from 'react-bootstrap';
Browser globals#
Wir bieten react-bootstrap.js undreact-bootstrap.min.js bundles mit alle componentsexported auf die window.ReactBootstrap objekt. Thesebundles sind auf unpkg sowie im npm-Paket verfügbar.,
Beispiele#
React-Bootstrap hat ein Repo mit einigen grundlegenden CodeSandbox-Beispielen gestartet.Klicken Sie hier, um sie zu überprüfen.
Stylesheets#
Da React-Bootstrap nicht von einer sehr genauen Version vonbootstrap abhängt, wird kein CSS geliefert. Für die Verwendung dieser Komponenten ist jedoch ein Somestylesheet erforderlich.
CSS#
{/* The following line can be included in your src/index.js or App.js file*/}import 'bootstrap/dist/css/bootstrap.min.css';
Wie und welche Bootstrap-Stile Sie einschließen, liegt bei Ihnen, aber der einfachste Weg besteht darin, die neuesten Stile aus dem CDN einzuschließen. Ein wenig mehr Informationen über die Vorteile eines CDN finden Sie hier.,
Sass#
Falls Sie Sass verwenden, ist es am einfachsten, die Sass-Quelldateien des Bootstraps in Ihre Sass-Hauptdatei aufzunehmen und sie dann in Ihre src/index.js oder App.js – Datei einzufügen.Dies gilt für eine typische create-react-app – Anwendung In anderen Anwendungsfällen müssen Sie möglicherweise den Bundler Ihrer Wahl einrichten, um Sass/SCSS-Stylesheets in CSS zu kompilieren.
Bootstrap # anpassen
Wenn Sie das Bootstrap-Thema oder Bootstrap-Variablensie können eine benutzerdefinierte Sass-Datei erstellen:
… Und importieren Sie es in die Haupt-Sass-Datei.,
/* The following line can be included in a src/App.scss */@import "custom";
Erweiterte Verwendung#
Siehe Bootstrap-Dokumentfür erweiterte Anwendungsfälle und Details zum Anpassen von Stylesheets.
Themen#
Reagieren-Bootstrap ist kompatibel mit vorhandenen Bootstrap-Themen. Justfollow die Installationsanweisungen für Ihr Thema der Wahl.
Browserunterstützung#
Wir möchten alle von bothReactand Bootstrap unterstützten Browser unterstützen.