Utilisation du framework d'expérience utilisateur BootStrap dans React (tutoriel détaillé)

Cet article présente principalement les connaissances pertinentes pour démarrer rapidement avec le framework d'expérience utilisateur React BootStrap. Il est très bon et a une valeur de référence. Les amis dans le besoin peuvent se référer au

document officiel http://. réagissez-bootstrap.github.io/getting-started.html

Installez

Cd dans le répertoire de votre projet dans le terminal et exécutez : $ npm install react-bootstrap

Ensuite, nous devons citer manuellement les CSS

<!-- 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">

Mais quand nous apprenons, nous utilisons des URL externes, 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 rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" >

Bon, 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 href="#" rel="external nofollow" >react-bootstrap</a>
      </Navbar.Brand>
    </Navbar.Header>
  </Navbar>
);
// 然后我们渲染到body里
ReactDOM.render(navbarInstance,document.body);

Sur la page html :

  
  
  <link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" >




  
  

L'effet est le suivant :

Dépend principalement de l'adresse du navigateur, qui est le "hot start" que nous avons configuré plus tôt.

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

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Comment parcourir un tableau bidimensionnel à l'aide de v-for dans vue

Vue-cli project Exemple d'obtention de données de fichier json local

Utilisez import et require en JavaScript pour empaqueter et mettre en œuvre l'analyse de principe

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!