How to use the React BootStrap framework

This time I will show you how to use the React BootStrap framework and what are the precautions for using the React BootStrap framework. The following is a practical case, let's take a look.

Installation

[Related video recommendations: Bootstrap tutorial]

Execute in the terminal cd to your project directory: $ npm install react-bootstrap

Then we need to manually quote css

<!-- Latest compiled and minified CSS -->
<link>
<!-- Optional theme -->
<link>

But we use it when learning External URLs are too slow. Therefore, we install bootstrap locally.

$ npm install bootstrap

Then you will find that there is bootstrap in your node_modules directory.

In this way, local css can be referenced on the page

<link>

Okay, let’s use the React-BootStrap framework

http://react-bootstrap.github .io/components.html

Here we demonstrate the use of its navigation bar component

In index.js:

const React = require("react");
const ReactDOM = require("react-dom");
import {Navbar} from "react-bootstrap";
const navbarInstance = (
  <navbar>
    <navbar.header>
      <navbar.brand>
        <a>react-bootstrap</a>
      </navbar.brand>
    </navbar.header>
  </navbar>
);
// 然后我们渲染到body里
ReactDOM.render(navbarInstance,document.body);

On the html page:

nbsp;html>


  
  
  <link>




  <script></script>
  <script></script>

The effect is as follows:

Mainly depends on the browser address, which is the "hot start" we configured earlier.

Execute the command $ npm start Start the service

I believe you have mastered the method after reading the case in this article. For more exciting content, please pay attention to other related articles on the php Chinese website!

Recommended reading:

react native uses fetch to upload images

How to compress the files packaged by webpack to become smaller

Use import and require to package JS

Several ways to bind this to react events

The above is the detailed content of How to use the React BootStrap framework. For more information, please follow other related articles on the PHP Chinese website!