【问题标题】：How to include bootstrap css and js in reactjs app?如何在 reactjs 应用程序中包含引导 css 和 js？
【发布时间】：2017-02-23 13:27:39
【问题描述】：

我是 reactjs 的新手，我想在我的 react 应用程序中包含引导程序

我已经安装了npm install bootstrap --save的引导程序

现在，想在我的 react 应用中加载引导 css 和 js。

我正在使用 webpack。

webpack.config.js

var config = {
    entry: './src/index',

    output: {
        path: './',
        filename: 'index.js'
    },

    devServer: {
        inline: true,
        port: 8080,
        historyApiFallback: true,
        contentBase:'./src'
    },

    module: {
        loaders: [
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                loader: 'babel',

                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
};

module.exports = config;

我的问题是“如何在 node_modules 的 reactjs 应用程序中包含引导 css 和 js？”如何设置引导程序以包含在我的反应应用程序中？

【问题讨论】：

你在后端使用 Node.js 吗？
只需在 HTML 页面中导入 Bootstrap 文件
@DanielKhan ：不，我没有使用 Node.js。
您使用的是较少版本的引导程序还是只是简单的 css？对于后者，只需使用 CDN 版本包含 css，然后我们对 JavaScript 部分做出反应引导。
@DanielKhan 我使用了纯 CSS。我不想CDN。我想使用 node_modules 的引导程序。

标签： twitter-bootstrap reactjs webpack

【解决方案1】：

你不能在 React 应用程序中使用基于 Bootstrap Jquery 的 Javascript 组件，因为任何试图在 React 之外操纵 DOM 的东西都被认为是不好的做法。在这里你可以阅读more info about it。

如何在你的 React 应用中包含 Bootstrap：

1) 推荐。您可以按照其他答案的说明包含 Bootstrap 的原始 CSS 文件。

2) 看看react-bootstrap 库。它专为 React 编写。

3) 对于 Bootstrap 4，有 reactstrap

奖金

这些天我通常避免使用提供现成组件的 Bootstrap 库（上面提到的 react-bootstrap 或 reactstrap 等）。随着您越来越依赖它们所采用的道具（您无法在其中添加自定义行为）并且您失去了对这些组件生成的 DOM 的控制。

所以要么只使用 Bootstrap CSS，要么不使用 Bootstrap。一般的经验法则是：如果不确定是否需要它，则不需要它。我见过很多包含 Bootstrap 的应用程序，但只使用了其中的少量 CSS，有时大部分 CSS 会被自定义样式覆盖。

【讨论】：

使用选项 1)，如何包含 Bootstrap Javascript（和 jquery）？或者你没有？
不幸的是，react-bootstrap 或 reactstrap 都不支持 Bootstrap 4。
“离开引导程序”是一个非常可行的选择。很好的建议。
@Zim 现在他们做到了！

【解决方案2】：

你可以在任何你想要的地方importcss 文件。如果您根据需要配置了加载程序，Webpack 会注意捆绑 css。

类似的，

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

和 webpack 配置一样，

loaders: [{ test: /\.css$/, loader: 'style-loader!css-loader' }]

注意：您还必须添加字体加载器，否则会出错。

【讨论】：

谢谢您的回复。需要样式加载器和 css-loader 的任何 npm 模块吗？
是的，使用style-loader css-loaderloaders
好的，现在看看什么是 webpack（像包含一些东西并使用它变成了一个可怕的另一个 js 东西来学习），我的愿望是在我的教程中使用 bootstrap3 样式按钮应用程序....现在我不会
@J.Guarin 如果您使用 Facebook 的 create-react-app，它将为您设置 webpack 和 style-loader。

【解决方案3】：

如果您是 React 新手并使用 create-react-app cli 设置，请运行以下 npm 命令以包含最新版本的引导程序。

npm install --save bootstrap

或

npm install --save bootstrap@latest

然后将以下导入语句添加到 index.js 文件中。 (https://getbootstrap.com/docs/4.4/getting-started/webpack/#importing-compiled-css)

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

或

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

不要忘记使用 className 作为目标元素的属性（react 使用 className 作为属性而不是 class >)。

【讨论】：

Relative imports outside of src/ are not supported.
我不明白为什么不在html模板中链接它
解决方案在这里描述：github.com/facebook/create-react-app/issues/301
js文件呢？ jquery bootstrap.js
我找到了这篇文章，它可能会有所帮助blog.logrocket.com/how-to-use-bootstrap-with-react-a354715d1121

【解决方案4】：

请按照下面的链接使用带有 React 的引导程序。 https://react-bootstrap.github.io/

安装：

$ npm install --save react react-dom
$ npm install --save react-bootstrap

------------------------------------或---------- --------------------------

将 CSS 的 Bootstrap CDN 放在 react 中 index.html 文件的标签中，将 Js 的 Bootstrap CDN 放在 index.html 文件的标签中。使用 className 而不是 class 按照下面的index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="../src/images/dropbox_logo.svg">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">




  </head>
  <body>

    <div id="root"></div>

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

  </body>
</html>

【讨论】：

您提供的链接已失效
嘿，David，将 CSS 的 Bootstrap CDN 放在 react 中 index.js 文件的标记中，并将 Js 的 Bootstrap CDN 放在 index.js 文件的标记中。使用类的 className instrad。

【解决方案5】：

通过 npm，您将运行以下命令

npm install bootstrap jquery --save
npm install css-loader style-loader --save-dev

如果是 bootstrap 4，还要添加依赖 popper.js

npm install popper.js --save

将以下内容（作为新对象）添加到您的 webpack 配置

loaders: [
    {
      test: /\.css$/,
      loader: 'style-loader!css-loader'
    }

将以下内容添加到您的 index 或 layout

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

【讨论】：

一个完美的最新答案 +1
对于 Bootstrap 5：yarn add @popperjs/core 或 npm i @popperjs/core
无法解析“popper.js”

【解决方案6】：

npm install --save bootstrap

并将此导入语句添加到您的 index.js 文件中

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

或者您可以简单地在 index.html 文件中添加 CDN。

【讨论】：

jquery 怎么样？
@ValRob 将 jquery 添加到您的项目中：npm i jquery --save then import $ from 'jquery'

【解决方案7】：

您可以直接通过安装它

$ npm install --save react react-dom
$ npm install --save react-bootstrap

然后从引导程序中导入您真正需要的内容，例如：

import Button from 'react-bootstrap/lib/Button';

// 或

import  Button  from 'react-bootstrap';

你也可以安装：

npm install --save reactstrap@next react react-dom

看看click here 。

对于 CSS，您也可以仔细阅读此链接

read here

【讨论】：

【解决方案8】：

希望这会有所帮助；）

第 1 步：使用 NPM 安装以下命令

npm install --save reactstrap@next react react-dom

第 2 步：示例 index.js 主脚本导入波纹管命令

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

第 3 步：UI 组件参考以下网站 reactstrap.github.io

【讨论】：

【解决方案9】：

以防万一你可以使用推荐用于 React 应用程序的yarn，

你可以的，

yarn add bootstrap@4.1.1 // this is to add bootstrap with a specific  version

这会将引导程序作为依赖项添加到您的 package.json 中。

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "4.1.1", // it will add an entry here
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-scripts": "1.1.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

之后，只需在您的 index.js 文件中导入 bootstrap。

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

【讨论】：

【解决方案10】：

在您的项目“npm install --save bootstrap@3.3.7”中安装引导程序后您必须移动到项目 SRC 文件夹中的 index.js 文件并从节点模块包中导入引导程序。

导入'bootstrap/dist/css/bootstrap.min.css';

如果您愿意，可以从该视频中获得帮助，相信它会对您有很大帮助。

Import Bootstrap In React Project

【讨论】：

【解决方案11】：

由于 Bootstrap/Reactstrap 已经发布了他们的最新版本，即 Bootstrap 4，您可以按照以下步骤使用它

导航到您的项目
打开终端
我假设 npm 已经安装，然后输入以下命令

npm install --save reactstrap react react-dom

这会将 Reactstrap 作为依赖项安装到您的项目中。

这是使用 Reactstrap 创建的按钮的代码

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

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

您可以通过访问他们的offical page 来检查 Reactstrap

【讨论】：

【解决方案12】：

不知何故，接受的答案只是谈论从引导程序中包含 css 文件。

但我认为这个问题与这里的问题有关 - Bootstrap Dropdown not working in React

有几个答案可以提供帮助 -

【讨论】：

【解决方案13】：

如果您在项目中使用 CRA(create-react-app)，则可以添加：

npm install react-bootstrap bootstrap

如果您在应用程序中使用引导程序并且如果它不起作用，请在 index.html 中使用它：

<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
  integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
  crossorigin="anonymous"
/>

我做了以上来解决类似的问题。希望这对您有用:-)

【讨论】：

【解决方案14】：

为您提供 jquery 和 bootstrap 的完整答案，因为 jquery 是 bootstrap.js 的要求：

将 jquery 和 bootstrap 安装到 node_modules 中：

npm install bootstrap
npm install jquery

使用这个确切的文件路径导入您的组件：

import 'jquery/src/jquery'; //for bootstrap.min.js
//bootstrap-theme file for bootstrap 3 only
import 'bootstrap/dist/css/bootstrap-theme.min.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';

【讨论】：

我不需要导入jquery，只需用npm安装即可。我认为引导程序会自行加载它
在 bootstrap 3 中，您需要为某些功能加载 jquery
如果你使用的是 bootstrap 4.4.1，你还需要安装 'bootstrap/dist/js/bootstrap.min.js' 引用的 popper.js npm 模块。
很好的答案，在 bootstrap 3 中遇到了这个问题并使用 import 'jquery/src/jquery' 而不是 import 'jquery' 修复了它

【解决方案15】：

我尝试指导：

npm install bootstrap
npm install jquery popper.js

然后在 src/index.js:

import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<Dropdown />, document.getElementById('root'));
registerServiceWorker();

【讨论】：

【解决方案16】：

我只想补充一点，在您的 index.js 文件中安装和导入引导程序不足以使用引导程序组件。每次你想使用一个组件时，你都应该导入它，比如：我需要使用一个容器和一行

    <Container>
        <Row>
        <Col sm={4}> Test </Col>
        <Col sm={8}> Test </Col>
        </Row>
</Container>

你应该在你的 js 文件中导入

import {Container, Row, Col} from 'react-bootstrap';

【讨论】：

在文档中，首选方法是单独导入每个组件。例如对于 Row，它是 import Row from 'react-bootstrap/Row'；来源：react-bootstrap.github.io/getting-started/…

【解决方案17】：

我也有类似的情况。我的设置如下所示

npm install create-react-app

这将为您提供样板代码设置以开始。玩转 App.js 文件的主要逻辑。

稍后您可以使用 CLI 工具创建的 index.html 中的引导 CDN。或

npm install bootstrap popper jquery

然后简单地将其包含在 App.js 文件中。

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.bundle'

很少有作者提到使用 className 属性而不是 class，但就我而言，两者的工作方式如下所示。但是如果你在浏览器上使用类并在开发者工具中查看控制台，你会看到使用类的错误。所以请改用类名。

    <div className="App" class = "container"> //dont use class attribute

不要忘记删除默认的 CSS 导入以避免与引导程序冲突。

希望对您有所帮助，祝您编码愉快！！！

【讨论】：

这对我来说是最好的答案。此外，如果您使用的是 SCSS，请加载您自己的 CSS 而不是引导程序。
这必须是公认的答案

【解决方案18】：

这是包含最新引导程序的方法
https://react-bootstrap.github.io/getting-started/introduction

1.安装

npm install react-bootstrap 引导

然后导入到 App.js 导入'bootstrap/dist/css/bootstrap.min.css';
然后您需要导入您在应用中使用的组件，例如如果你使用 navbar、nav、button、form、formcontrol 然后像下面这样导入所有这些：

import Navbar from 'react-bootstrap/Navbar'
import Nav from 'react-bootstrap/Nav'
import Form from 'react-bootstrap/Form'
import FormControl from 'react-bootstrap/FormControl'
import Button from 'react-bootstrap/Button'


// or less ideally
import { Button } from 'react-bootstrap';

【讨论】：

问题不在于 react-bootstrap。这是关于引导 css 框架的。这意味着不是这个（react-bootstrap.github.io），而是这个（getbootstrap.com）

【解决方案19】：

简单解决方案（2020）如下：-

npm install --save jquery popper.js
npm install --save bootstrap
npm install --save style-loader css-loader
更新 webpack.config.js，您必须告诉 webpack 如何处理引导 CSS 文件，因此您必须添加一些规则，如下所示：-

在 React 应用程序的入口点（通常是 index.js）中添加一些导入，将它们放在顶部，确保不要更改顺序。

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

import $ from "jquery";

import Popper from "popper.js";

import "bootstrap/dist/js/bootstrap.bundle.min";

这些步骤应该可以帮到你，如果有问题请评论。

【讨论】：

【解决方案20】：

以下是 bootstrap 4 和 npm 对我有用的方法

安装jquery , popper.js, bootstrap 包

npm install jquery popper.js bootstrap --save

使用以下导入更新 index.js

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.js";

另外，如果您使用sass 作为您的自定义样式，您可以安装sass 包

npm install sass --save

【讨论】：

【解决方案21】：

您可以使用 Visual Studio 终端添加引导程序： YourApplicationName> npm install bootstrap@4.1.1

【讨论】：

【解决方案22】：

引导程序 5（2021 年更新）

Bootstrap 5 is modular 不再需要 jQuery。因此，您可以导入 Bootstrap 组件并直接从bootstrap 引用它们。这意味着您不再需要像react-bootstrap 或reactstrap 这样的第三方库。

使用 React + Bootstrap 5：

1_安装引导程序并将其添加到package.json...

npm install 'bootstrap' --save

2_ 导入引导程序和/或特定组件...

import { Collapse, Popover, Toast, Tooltip, Alert, Modal, Dropdown } from bootstrap

3_ 使用 Bootstrap 组件。例如，这里是下拉...

// component
const DropdownDemo = () => {
    const ddRef = useRef()  

    useEffect(() => {
        var dd = new Dropdown(ddRef.current, {})
    })
    
    return (
        <div className="py-2">
            <div className="dropdown">
              <button className="btn btn-secondary dropdown-toggle" type="button" ref={ddRef} aria-expanded="false">
                Dropdown button
              </button>
              <ul className="dropdown-menu" aria-labelledby="dropdown1">
                <li><a className="dropdown-item" href="#">Action</a></li>
                <li><a className="dropdown-item" href="#">Another action</a></li>
                <li><a className="dropdown-item" href="#">Something else here</a></li>
              </ul>
            </div>
        </div>
    )
}

// React app
function App() {
  const [mounted, setMounted] = useState(true);

  return (
    <div>
        {mounted &&
            <div>
                <DropdownDemo />
            </div>
        }
    </div>
  )
}

【讨论】：

你的意思是如果我在我的项目中使用 bootstrap5，我不需要包含以下行吗？ import 'bootstrap/dist/css/bootstrap.min.css';