将Bootstrap添加到React.js项目

王亮

2023-03-14

本文向大家介绍将Bootstrap添加到React.js项目，包括了将Bootstrap添加到React.js项目的使用技巧和注意事项，需要的朋友参考一下

有多种方法可以在react项目中添加引导程序。

使用引导CDN
安装引导程序依赖项
使用React Bootstrap软件包

使用引导CDN

这是添加引导程序的最简单方法。与其他CDN一样，我们可以在react项目的index.html中添加引导CDN。

以下是react CDN网址之一

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
   integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

如果需要引导程序的JavaScript组件，则应在index.html中添加jquery popper.js。

有了这个，完整的index.html将看起来像-

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="utf-8">
<metaname="viewport"content="width=device-width, initial-scale=1, shrink-to-fit=no">
<linkrel="manifest"href="%PUBLIC_URL%/manifest.json">
<linkrel="shortcut icon"href="%PUBLIC_URL%/favicon.ico">
<linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
crossorigin="anonymous">
<title>React App hello</title>
</head>
<body>
<divid="root"></div>
<scriptsrc="https://code.jquery.com/jquery-3.3.1.slim.min.js"
   integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
   </script>
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
   integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous">
   </script>
<scriptsrc="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
   integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous">
   </script>
</body>
</html>

添加引导依赖

npm install bootstrap
npm install jquery popper.js

现在我们可以通过导入将它们添加到react项目的index.js文件中

import'bootstrap/dist/css/bootstrap.min.css';
import $ from'jquery';
importPopperfrom'popper.js';
import'bootstrap/dist/js/bootstrap.bundle.min';
importReactfrom'react';
importReactDOMfrom'react-dom';
import'./index.css';
importAppfrom'./App';
importregisterServiceWorkerfrom'./registerServiceWorker';
ReactDOM.render(<Dropdown/>,document.getElementById('root'));
registerServiceWorker();

使用React Bootstrap软件包

有两个选项可以包含react引导程序包

反应引导
反应带

用npm安装

npm install –save react-bootstrap

该软件包当前仅服务于bootstrap 3，并且正在开发中以支持最新的bootstrap。

Include it in App.jsx file
import'bootstrap/dist/css/bootstrap.css';
import'bootstrap/dist/css/bootstrap-theme.css';

安装完成后，我们可以直接在任何组件文件中使用引导程序组件。

import{SplitButton,MenuItem}from'react-bootstrap';
import React, { Component} from 'react';
import { Button } from 'react-bootstrap';
class HelloWorld extends Component {
   render() {
      return
      <div>
         <Button bsStyle="primary">Hello World Primary</Button>
         <Button bsStyle="success">Hello World Success</Button>
         <Button bsStyle="danger">Hello World Danger</Button>
      </div>
   }
}
export default HelloWorld;

使用reactstrap

npm install –save reactstrap

reactstrapsuppors bootstrap 4版本，这意味着它比react-bootstrap最新

由于引导程序是最流行的css框架，将它与react配合使用时，我们可以非常快速地创建移动优先Web应用程序。

我们可以从reactstrap导入与其他react组件相似的组件

import {
   Button,UncontrolledAlert,Card,CardImg,CardBody,
   CardTitle,CardSubtitle,CardText
} from'reactstrap';

Reactstrap对模式窗口有很好的支持，它是React的首选库。

还有其他库，例如CoreUI-React，react-UI，React-Bootstrap-Table

将Bootstrap添加到React.js项目

使用引导CDN

添加引导依赖

使用React Bootstrap软件包

使用reactstrap

相关阅读

相关文章

相关问答

相关工具

相关文档