React-Bootstrap est une bibliothèque qui encapsule Bootstrap basée sur ReactJS. Il s'agit d'une bibliothèque de composants frontaux réutilisables qui peut être installée via la commande "cnpm install react-bootstrap --save".
Qu'est-ce que React-Bootstrap ?
React-Bootstrap est une bibliothèque qui encapsule Bootstrap basée sur ReactJS ? est une bibliothèque de composants frontaux réutilisables.
Le composant de style de React-bootstrap dépend du bootstrap.
Site officiel : https://react-bootstrap.github.io
Comment installer React-Bootstrap
Utilisez la commande suivante pour installer
cnpm install react-bootstrap --save //或者 $ bower install react react-bootstrap
Utilisation :
Lors de l'écriture de composants de contenu qui utilisent des composants React-bootstrap, vous devez importer les composants requis depuis React-bootstrap
Par exemple : dans le composant Component ; Dans .js, le composant Button de React-bootstrap est utilisé. La méthode d'écriture spécifique est la suivante :
import React from‘react’; import {Button} from ‘react-bootstrap’; export default class MyComponent React.Component{ constructor(props){ super(props); } render(){ return( <div> <Button bsStyle="default"></Button> </div> ); } };
Dans l'en-tête du modèle d'index.ejs, introduisez bootstrap.css. Placez le code source bootstrap.css dans le dossier dist.
Feuille de style
Étant donné que React-Bootstrap ne dépend pas d'une version spécifique de Bootstrap, le package de distribution n'inclut aucun CSS. Bien que certaines feuilles de style soient requises lors de l'utilisation de ces composants. La manière de sélectionner et de charger les fichiers de style d'amorçage dépend de l'utilisateur. Le moyen le plus simple consiste à charger les derniers fichiers de feuille de style à partir du CDN.
<!-- 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">
Pour plus de connaissances liées à la programmation, veuillez visiter : Site Web d'apprentissage en programmation ! !
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!