Home Web Front-end JS Tutorial Using BootStrap user experience framework in React (detailed tutorial)

Using BootStrap user experience framework in React (detailed tutorial)

Jun 01, 2018 am 10:03 AM
bootstrap react experience

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">
Copy after login

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" >
Copy after login

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);
Copy after login

On the html page:




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


Copy after login


The effect is as follows:

Using BootStrap user experience framework in React (detailed tutorial)

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to introduce bootstrap into Eclipse How to introduce bootstrap into Eclipse Apr 05, 2024 am 02:30 AM

How to introduce bootstrap into Eclipse

How to introduce idea into bootstrap How to introduce idea into bootstrap Apr 05, 2024 am 02:33 AM

How to introduce idea into bootstrap

How to read the bootstrap mediation effect test results in stata How to read the bootstrap mediation effect test results in stata Apr 05, 2024 am 01:48 AM

How to read the bootstrap mediation effect test results in stata

750,000 rounds of one-on-one battle between large models, GPT-4 won the championship, and Llama 3 ranked fifth 750,000 rounds of one-on-one battle between large models, GPT-4 won the championship, and Llama 3 ranked fifth Apr 23, 2024 pm 03:28 PM

750,000 rounds of one-on-one battle between large models, GPT-4 won the championship, and Llama 3 ranked fifth

How to read the results of bootstrap mediation test How to read the results of bootstrap mediation test Apr 05, 2024 am 03:30 AM

How to read the results of bootstrap mediation test

How to use bootstrap to test mediation effects How to use bootstrap to test mediation effects Apr 05, 2024 am 03:57 AM

How to use bootstrap to test mediation effects

What is the difference between bootstrap and springboot What is the difference between bootstrap and springboot Apr 05, 2024 am 04:00 AM

What is the difference between bootstrap and springboot

How to export the results of bootstrap test mediation effect stata command How to export the results of bootstrap test mediation effect stata command Apr 05, 2024 am 03:39 AM

How to export the results of bootstrap test mediation effect stata command

See all articles