135

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

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

现在，要在我的react应用程序中加载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应用程序中包含引导CSS和js？” 如何设置引导程序以包含在我的React应用程序中？

twitter-bootstrap reactjs webpack

— 马勒·马里（Mehul Mali）
source

您在后端使用Node.js吗？

— DanielKhan

只需导入引导文件在HTML页面中

— Mistalis

@DanielKhan：不，我没有使用Node.js。

— Mehul Mali

您使用的是引导程序的较少版本还是仅使用纯CSS？对于后者，只需包含使用CDN版本的css，然后我们对JavaScript部分做出反应。

— DanielKhan

@DanielKhan我使用普通的CSS。我不想CDN。我想使用来自node_modules的引导程序。

— Mehul Mali

245

如果您不熟悉React并使用create-react-appcli设置，请运行以下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在目标元素上用作属性（反应className用作属性而不是class）。

— 普拉文议员
source

1

如果要使用Bootstrap 4，请使用以下命令：npm install bootstrap@4.0.0-alpha.6 --save（到目前为止，上述安装命令将安装Bootstrap的最后一个稳定版本，即3.3.7）

— lgants

5

Relative imports outside of src/ are not supported.

— riv

3

我不明白为什么不只在html模板中链接它

— -ICanKindOfCode

2

解决方案的描述如下：github.com/facebook/create-react-app/issues/301

— Enrico Giurin

16

js文件呢？jquery bootstrap.js

— molikh

49

通过npm，您可以执行以下操作

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

如果是引导程序4，还添加popper.js

npm install popper.js --save

将以下内容（作为新对象）添加到您的webpack配置 loaders: [数组中

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

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

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

— 布拉姆
source

4

一个完美的最新答案+1

— Sushin Pv的

33

您不能在React应用程序中使用基于Bootstrap Jquery的Javascript组件，因为任何尝试在React外部操作DOM的做法都被视为不良做法。在这里您可以阅读有关它的更多信息。

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

1）推荐。您可以在其他答案中指定包含Bootstrap的原始CSS文件。

2）看一下react-bootstrap库。它是专门为React写的。

3）对于Bootstrap 4，有reactstrap

奖金

这些天，我通常会避免使用提供可立即使用的组件的Bootstrap库（上述的react-bootstrap或reactstrap等）。随着您越来越依赖于它们所采用的道具（您无法在其中添加自定义行为），您将失去对这些组件产生的DOM的控制。

因此，要么仅使用Bootstrap CSS，要么不使用Bootstrap。一般的经验法则是：如果不确定是否需要它，就不需要它。我已经看到了很多包含Bootstrap的应用程序，但是只使用其中的少量CSS，有时大多数CSS会被自定义样式覆盖。

— 翔太
source

1

使用选项1），如何包含Bootstrap Javascript（和jquery）？还是你不？

— LordAlpaca

1

不幸的是，react-bootstrap或reactstrap都不支持Bootstrap 4。

— Zim

1

“不使用引导程序”是一个非常可行的选择。很好的建议。

@Zim现在可以了！

— Marianna S.

17

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

就像是，

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

和webpack的配置一样，

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

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

— Thaadikkaaran
source

1

谢谢您的回复。样式加载器和CSS加载器是否需要任何npm模块？

— Mehul Mali

1

是的，请使用style-loader css-loader装载机

— Thaadikkaaran，2016年

好的，现在来看什么是webpack（有点像包含一些东西，并使用它变成另一个要学习的可怕的js东西），ny aspirationw就是在我的教程应用程序中使用bootstrap3样式按钮...。现在我不会't

— J.Guarin '17

1

@ J.Guarin如果您正在使用Facebook的创建反应的应用程序内将设立webpack与style-loader你。

— Peter W

9

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

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导入，以避免与引导冲突。

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

— Deekshith阿南德
source

7

请点击以下链接以在React中使用引导程序。 https://react-bootstrap.github.io/

对于安装：

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

- - - - - - - - - - - - - - - - - - 要么 - - - - - - - ------------------------

将React的CSS的Bootstrap CDN放入react.index文件的标签中，而CSS的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>

— 阿迪亚·帕玛（Aditya Parmar）
source

1

您提供的链接已失效

— David

嗨，大卫，在React.index文件的<head>标记中放入CSS的Bootstrap CDN，在index.js文件的<body>标记中将Js的Bootstrap CDN放入。使用class的className instrad。

— Aditya Parmar

5

为您提供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';

— 加文·贝尔森
source

我不需要导入jquery，只需使用npm安装它。我认为引导程序会自行加载

— Madacol

1

在引导程序3中，您需要为某些功能加载jquery

— GavinBelson

如果您使用的是Bootstrap 4.4.1，则还需要安装popper.js引用的npm模块'bootstrap/dist/js/bootstrap.min.js'。

— Binita Bharati

1

好的答案，使用引导程序3并使用import 'jquery/src/jquery'而不是import 'jquery'修复它时遇到了这个问题

— 密码

3

npm install --save bootstrap

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

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

或者，您可以直接在index.html文件中添加CDN。

— 尼基尔
source

那jQuery呢？

— ValRob

@ValRob将jquery添加到您的项目中：npm i jquery --save然后从'jquery'中导入$

— Nikhil

3

希望这会有所帮助;）

步骤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

— Vidhyapathi Kandhasamy
source

1

您可以直接通过安装

$ 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

检查了这一点这里点击。

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

在这里阅读

— 玛希德·霍里亚（Majed HORIA）
source

1

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

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

如果您愿意，可以从此视频中获取帮助，请确保它会对您有很大帮助。

在React项目中导入Bootstrap

— 优素福·谢赫（Yousuf Shaikh）
source

1

我尝试使用指令：

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

— Morteza Fathnia
source

0

以防万一，如果您可以使用yarn推荐用于React应用程序的工具，

你可以做，

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

— 主要
source

0

由于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>
  );
};

展开摘要

您可以通过访问他们的官方页面来检查Reactstrap

— 哈迪·米尔
source

0

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

但是我认为这个问题与这里的问题有关 -Bootstrap Dropdown在React中不起作用

有几个答案可以帮助您-

— 维克拉姆·古利亚（Vikram Gulia）
source

0

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

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

— 穆罕默德·阿里
source

0

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

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

您应该导入您的js文件

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

— Kaygi22
source

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

— 迪伦W¯¯

0

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

1.安装

npm install react-bootstrap引导程序

然后导入到App.js中导入'bootstrap / dist / css / bootstrap.min.css';
然后，您需要导入您在应用程序中使用的组件，例如如果您使用导航栏，导航，按钮，表单，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';

— 哈桑·桑尼（M Hasan Sunny）
source

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

— 拉纳

如何在ReactJS应用程序中包含Bootstrap CSS和JS？

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

奖金