Ausführliche Erläuterung des BootStrap-Frameworks für extrem hohe Benutzererfahrung

Dieses Mal werde ich Ihnen das BootStrap-Framework für extrem hohe Benutzererfahrung ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die Verwendung des BootStrap-Frameworks?

[Ähnliche Videoempfehlungen: Bootstrap-Tutorial]

Installation

Führen Sie in der Terminal-CD Ihr Projektverzeichnis aus: $ npm install react-bootstrap

Dann müssen wir manuell auf das CSS verweisen

<!-- Latest compiled and minified CSS -->
<link>
<!-- Optional theme -->
<link>

Aber wir verwenden beim Lernen 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>

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>react-bootstrap</a>
      </navbar.brand>
    </navbar.header>
  </navbar>
);
// 然后我们渲染到body里
ReactDOM.render(navbarInstance,document.body);

Auf der HTML-Seite:

nbsp;html>


  
  
  <link>




  <script></script>
  <script></script>

Der Effekt ist wie 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

Ich glaube, Sie haben die Methode beherrscht, nachdem Sie den Fall in diesem Artikel gelesen haben Für weitere spannende Dinge achten Sie bitte auf PHP Weitere verwandte Artikel auf der chinesischen Website!

Empfohlene Lektüre:

Vues lokaler statischer Bildpfad

Wie element-ui den Tabellen-Scroll-Effekt ausführt

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung des BootStrap-Frameworks für extrem hohe Benutzererfahrung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!