将 Bootstrap 添加到 React.js 项目

在 React 项目中添加 Bootstrap 的方法有很多种。

• 使用 Bootstrap CDN
• 安装 Bootstrap 依赖项
• 使用 React Bootstrap 包

使用 Bootstrap CDN

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

以下是其中一个 React CDN 网址

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

如果我们需要 Bootstrap 的 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>

添加 bootstrap 依赖项

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 Bootstrap 包

• react-bootstrap
• reactstrap

使用 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

Reactstrap 支持 Bootstrap 4 版本，这意味着它比 React-bootstrap 更新

由于 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

相关文章

• 在 React Native 应用中添加动画加载器和启动画面
• 在 React JS 中创建链接的二维码
• 使用 React-Three-Fiber 在 React 中创建天空着色器
• 在 React JS 中创建动画加载骨架
• 使用纯 CSS 和 HTML 在 React JS 中创建 PDF
• React JS 中的设备检测和响应式设计
• 使用 React-Three-Fiber 在 React 中创建 3D 金属纹理盒子
• React JS 中的文件拖放功能
• 使用 react-archer 在 React JS 中绘制 DOM 元素之间的箭头
• 使用 React JS 创建富文本编辑器

有用资源

• javascript 参考教程 - 该教程包含有关 javascript 的更多信息:https://www.cainiaomax.com/javascript/