Qu'est-ce que React-Bootstrap ?

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!