Home > Web Front-end > JS Tutorial > body text

Detailed explanation of BootStrap ultra-high user experience framework

PHPz
Release: 2018-10-13 17:22:43
Original
1432 people have browsed it

This time I will bring you a detailed explanation of the BootStrap ultra-high user experience framework. What are the precautions for using the BootStrap framework? The following is a practical case, let's take a look.

【Related video recommendation: Bootstrap tutorial

Installation

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

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>
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>react-bootstrap</a>
      </navbar.brand>
    </navbar.header>
  </navbar>
);
// 然后我们渲染到body里
ReactDOM.render(navbarInstance,document.body);
Copy after login

On the html page:

nbsp;html>


  es2105的写法
  
  <link>


  <script></script>   <script></script>
Copy after login

The effect is as follows:

Detailed explanation of BootStrap ultra-high user experience framework

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:

vue’s local static image path

element-ui How to operate the table scrolling effect

The above is the detailed content of Detailed explanation of BootStrap ultra-high user experience framework. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!