Heim >Web-Frontend >js-Tutorial >Verwenden des BootStrap User Experience Frameworks in React (ausführliches Tutorial)
Dieser Artikel stellt hauptsächlich das relevante Wissen vor, um schnell mit dem React BootStrap-Benutzererlebnis-Framework zu beginnen. Es ist sehr gut und hat Referenzwert. Freunde in Not können sich auf das
offizielle Dokument http:// beziehen. React-Bootstrap. github.io/getting-started.html
Installieren
CD in Ihr Projektverzeichnis im Terminal kopieren und ausführen: $ npm install react-bootstrap
Dann müssen wir CSS manuell zitieren
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">
Aber wenn wir lernen, verwenden wir externe URLs, was zu langsam ist. Daher installieren wir Bootstrap lokal.
$ npm install bootstrap
Dann finden Sie Bootstrap in Ihrem node_modules-Verzeichnis.
Auf diese Weise kann auf lokales CSS auf der Seite verwiesen werden
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" >
Okay, verwenden wir das React-BootStrap-Framework
http://react-bootstrap.github.io/components.html
Hier demonstrieren wir die Verwendung seiner Navigationsleistenkomponente
In index.js:
const React = require("react"); const ReactDOM = require("react-dom"); import {Navbar} from "react-bootstrap"; const navbarInstance = ( <Navbar> <Navbar.Header> <Navbar.Brand> <a href="#" rel="external nofollow" >react-bootstrap</a> </Navbar.Brand> </Navbar.Header> </Navbar> ); // 然后我们渲染到body里 ReactDOM.render(navbarInstance,document.body);
Auf der HTML-Seite:
es2105的写法 <link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" >
Der Effekt ist wie folgt folgt:
Hängt hauptsächlich von der Browseradresse ab, bei der es sich um den „Heißstart“ handelt, den wir zuvor konfiguriert haben.
Führen Sie den Befehl $ npm start
aus, um den Dienst zu starten
Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.
Verwandte Artikel:
So durchlaufen Sie ein zweidimensionales Array mit v-for in vue
Vue-cli Projektbeispiel für den Erhalt lokaler JSON-Dateidaten
Das obige ist der detaillierte Inhalt vonVerwenden des BootStrap User Experience Frameworks in React (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!