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:

  
  
  <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

Verwenden Sie Import und Require in JavaScript, um die Prinzipanalyse zu verpacken und zu implementieren

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!