Explication détaillée du cadre d'expérience utilisateur ultra-haute BootStrap

Cette fois, je vais vous apporter une explication détaillée du framework d'expérience utilisateur ultra-haute BootStrap. Quelles sont les précautions d'utilisation du framework BootStrap ? Ce qui suit est un cas pratique, jetons un coup d'oeil.

[Recommandations vidéo associées : Tutoriel Bootstrap]

Installation

Exécutez dans le cd du terminal dans le répertoire de votre projet : $ npm install react-bootstrap

Ensuite, nous devons référencer manuellement le CSS

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

Mais nous utilisons des URL externes lors de l'apprentissage, ce qui est trop lent. Par conséquent, nous installons bootstrap localement.

$ npm install bootstrap

Ensuite, vous trouverez bootstrap dans votre répertoire node_modules.

De cette façon, les CSS locaux peuvent être référencés sur la page

<link>

D'accord, utilisons le framework React-BootStrap

http://react-bootstrap . github.io/components.html

Nous démontrons ici l'utilisation de son composant de barre de navigation

Dans 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);

Sur la page html :

nbsp;html>


  
  
  <link>




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

L'effet est le suivant :

Dépend principalement de l'adresse du navigateur, qui est le "démarrage à chaud" que nous avons configuré plus tôt.

Exécutez la commande $ npm start pour démarrer le service

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. des choses plus excitantes, veuillez faire attention à php Autres articles connexes sur le site chinois !

Lecture recommandée :

Chemin d'image statique local de vue

Comment element-ui exploite l'effet de défilement de la table

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!