Maison >interface Web >js tutoriel >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 :
es2105的写法 <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!