如何在React应用程序中包含Bootstrap：

Question

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

我已经按npm install bootstrap --save

安装了bootstrap

现在，想在我的反应应用程序中加载bootstrap 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 app中包含bootstrap css和js？”如何设置bootstrap以包含在我的反应应用程序中？

Answer 1

如果您不熟悉React并使用 create-react-app cli 设置。然后运行以下NPM命令以包含最新版本的bootstrap。

 npm install --save bootstrap

或

npm install --save bootstrap@4.0.0-alpha.6

然后将以下import语句添加到 index.js 文件

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

或

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

不要忘记使用 className 作为属性（react使用 className 作为属性而非类）

Answer 2

你不能在React app中使用基于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被自定义样式覆盖。

Answer 3

通过 npm ，您可以运行下面的

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

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

npm install popper.js --save

将以下内容（作为新对象）添加到 webpack config loaders: [数组

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

将以下内容添加到索引或布局

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

Answer 4

您可以随时随地table_b css文件。如果您根据需要配置了加载程序，Webpack会小心地捆绑css。

类似的东西，

import

和webpack配置一样，

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

注意：您还必须添加字体加载器，否则您将收到错误。

Answer 5

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

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，但就我而言，两者的工作方式如下。但是，如果您使用类并在浏览器上的开发人员工具中查看控制台，则会看到使用类的错误。请改用className。

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

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

希望如此，祝您编程愉快！

Answer 6

请按照以下链接使用React的bootstrap。 https://react-bootstrap.github.io/

安装：

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

------------------------------------ OR ---------- ---------------------------

将bootstrap CDN for CSS放入react的index.html文件的标签中，并将indexs文件的标签中的Js的Bootstrap CDN放入。使用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>

Answer 7

npm install --save bootstrap

并将此import语句添加到index.js文件中

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

或者您只需在index.html文件中添加CDN。

Answer 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

Answer 9

你可以通过

直接安装它

$ 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，你也可以阅读这个链接carfuly

read here

Answer 10

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

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

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

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

import $ from "jquery";

import Popper from "popper.js";

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

这些步骤应该可以为您提供帮助，如果有问题，请发表评论。

Answer 11

引导程序 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>
  )
}

Answer 12

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

Answer 13

这是对我有用的 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

Answer 14

以下是如何添加最新的引导程序
https://react-bootstrap.github.io/getting-started/introduction

1。安装

npm install react-bootstrap引导程序

然后导入到App.js 导入'bootstrap / dist / css / bootstrap.min.css';
然后，您需要导入在应用程序中使用的组件，例如如果您使用导航栏，导航，按钮，窗体，窗体控件，然后像下面那样导入所有这些控件：

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';

Answer 15

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

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

您应该导入js文件

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

Answer 16

我尝试使用指令：

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();

Answer 17

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

将jquery安装并引导至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';

Answer 18

如果您在项目中使用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"
/>

我做了上面的事情来解决类似的问题。希望这对您有用：-）

Answer 19

以某种方式接受的答案只是在谈论包括引导中的css文件。

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

有几个答案可以帮助您-

Answer 20

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

Answer 21

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

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

如果您愿意从此视频中获取帮助，请确保它会为您带来很大帮助。

Import Bootstrap In React Project

Answer 22

以防万一，如果您可以使用推荐用于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"
  }
}

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

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

如何在reactjs应用程序中包含bootstrap css和js？

22 个答案:

如何在React应用程序中包含Bootstrap：

加成