What is React-Bootstrap?

React-Bootstrap is a library that encapsulates Bootstrap based on ReactJS. It is a reusable front-end component library that can be installed through the "cnpm install react-bootstrap --save" command.

What is React-Bootstrap

React-Bootstrap is a library that encapsulates Bootstrap based on ReactJS. It is a reusable front-end component library.

The style component of react-bootstrap depends on bootstrap.

Official website: https://react-bootstrap.github.io

How to install React-Bootstrap

Use the following command to install

cnpm  install react-bootstrap  --save

//或者
$ bower install react react-bootstrap

Usage:

When writing content components that use react-bootstrap components, you must import the required components from react-bootstrap;

For example: in the component component In .js, the Button component of React-bootstrap is used. The specific writing method is as follows:

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

Introduce bootstrap.css in the template header of index.ejs. Put the bootstrap.css source code in the dist folder.

Style Sheet

Since React-Bootstrap does not depend on the specific Bootstrap version, the release package does not include any css. Although some style sheets are required when using these components. How to select and load bootstrap style files is up to the user. The easiest way is to load the latest style sheet files from the 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">

For more programming-related knowledge, please visit: Programming Learning Website! !

The above is the detailed content of What is React-Bootstrap?. For more information, please follow other related articles on the PHP Chinese website!