Using BootStrap user experience framework in React (detailed tutorial)

This article mainly introduces the relevant knowledge to quickly get started with the React BootStrap user experience framework. It is very good and has reference value. Friends in need can refer to the

official document http://react-bootstrap. github.io/getting-started.html

Installation

In the terminal cd to your project directory and execute: $ npm install react-bootstrap

Then we need to manually reference 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">

But we use external URLs when learning, 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 rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" >

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 href="#" rel="external nofollow" >react-bootstrap</a>
      </Navbar.Brand>
    </Navbar.Header>
  </Navbar>
);
// 然后我们渲染到body里
ReactDOM.render(navbarInstance,document.body);

On the html page:

  
  
  <link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" >





  
  

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to traverse a two-dimensional array using v-for in vue

Vue-cli project Example of obtaining local json file data

##Use import and require in JavaScript to package and implement principle analysis

The above is the detailed content of Using BootStrap user experience framework in React (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!