如何将 Bootstrap 添加到 React 应用程序并在其中使用类答案

【问题标题】：How to add Bootstrap to React app and use classes inside如何将 Bootstrap 添加到 React 应用程序并在其中使用类
【发布时间】：2020-05-29 21:52:16
【问题描述】：

由于我们无法在 React 应用程序中添加 CDN 链接和“类”属性，因此有人可以解释如何将引导程序添加到反应应用程序以及如何在反应组件中使用它们。请您解释一下如何在反应应用程序中使用引导组件。这对我真的很有帮助，因为我是反应开发人员的初学者..

【问题讨论】：

react-bootstrap.github.io查看此链接
如果您只需要使用 css，请将 bootstrap.min.css 添加到您的项目文件夹中。然后将其导入App.js。导入后，您可以在应用程序中使用引导类，如下所示<div className='row'></div>
我在不同的项目中使用了 2 个依赖项 1.) react-bootstrap 或 2.) reactstrap 获取任何一个并尝试使用。
感谢您的帮助 Delowar Hosain ..！

标签： reactjs bootstrap-4 frontend

【解决方案1】：

阅读本文 https://react-bootstrap.github.io/getting-started/introduction

     1. install react-bootstrap

                npm install react-bootstrap bootstrap


     2. import css file in your index.js or app.js

                import 'bootstrap/dist/css/bootstrap.min.css';

             <link
              rel="stylesheet"
              href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
              integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
              crossorigin="anonymous"
             />

      3. import components like

                import { Button } from 'react-bootstrap';

您可以使用普通的引导类，例如 className="row"

【讨论】：

【解决方案2】：

您不能在 react 应用程序中直接使用引导程序，而是可以使用包含引导程序组件的 reactstrap。

在 react 中使用 reactstrap 的例子

import React from 'react';
import { Button } from 'reactstrap';

export default (props) => {
  return (
    <Button color="danger">Danger!</Button>
  );
};

【讨论】：