用ChatGPT解决这个技术问题 Extra ChatGPT

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

我是 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;

我的问题是“如何从节点模块在 ReactJS 应用程序中包含引导 CSS 和 JS？”如何设置引导程序以包含在我的 React 应用程序中？

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

P
Praveen M P

如果您是 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
m
mhannani

通过 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'
    }

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

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”
@blamb 你能解释一下为什么在顶层导入 Bootstrap CSS 可以在子组件中访问它吗？
S
Shota

你不能在 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 现在他们做到了！
T
Thaadikkaaran

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

就像是， 

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

和 webpack 配置一样， 

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

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

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

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

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 而不是 bootstrap。
这必须是公认的答案
A
Aditya Parmar

请按照以下链接将引导程序与 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 文件的标签中。在 index.html 下面使用 className 而不是 class 

<!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。
G
GavinBelson

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

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

希望这会有所帮助；）

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

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

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

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

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

Z
Zim

引导程序 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_使用引导组件。例如，这里是下拉... 

// 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';
我很抱歉，但我认为这是一个错误的答案，bootstrap 的模块与 react 不兼容。至少我尝试了 react 18.2.0 和 boostrap 5.1.3 并且你不能将 boostrap 模块导入到 react 项目中。
N
Nikhil 
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'
M
Morteza Fathnia

我尝试指导： 

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();
M
Majed HORIA

您可以通过以下方式直接安装它 

$ 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

Y
Yousuf Shaikh

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

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

如果你喜欢，你可以从这个视频中得到帮助，相信它会对你有很大帮助。

Import Bootstrap In React Project

M
M Hasan Sunny

以下是包含最新引导程序的方法
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';
问题不在于反应引导。这是关于引导 css 框架的。这意味着不是这个 (react-bootstrap.github.io) 而是这个 (getbootstrap.com)
w
wingman__7

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

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

https://i.stack.imgur.com/rq2xr.png

在 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";

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

p
prime

以防万一您可以使用推荐用于 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';
H
Hadi Mir

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

导航到您的项目 打开我假设 npm 已经安装的终端，然后键入以下命令 npm install --save reactstrap react react-dom

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

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

从“反应”导入反应；从'reactstrap'导入{按钮}； export default (props) => { return ( ); };

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

V
Vikram Gulia

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

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

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

https://stackoverflow.com/a/52251319/4266842 https://stackoverflow.com/a/54188034/4266842

a
ataman

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

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

I
Idhem

我只想补充一点，在您的 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/…
J
Jafar Karuthedath

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

安装 jquery ， popper.js，引导包 npm install jquery popper.js bootstrap --save 使用以下导入更新 index.js import "bootstrap/dist/css/bootstrap.min.css";导入“bootstrap/dist/js/bootstrap.js”；

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

npm install sass --save
M
Muhammad Ahmed

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

关注公众号,不定期副业成功案例分享
关注公众号

不定期副业成功案例分享

想领先一步获取最新的外包任务吗？

立即订阅

HuntsBot(狩猎机器人)，一站式外包任务、远程工作、产品创意分享与订阅平台，支持钉钉、飞书、企业微信、邮箱、Telegram机器人订阅。平台会以及时、稳定、可靠的技术把外包任务需求、远程工作机会、产品创意等推送给每一位订阅的用户。

简体中文 English

平台

支持

联系我们

在使用过程中有任何问题或建议，可以通过以下方式联系我们：

微信公众号: 火星来客

Email: huntsbot@xinbeitime.com

Copyright© 2022-2023 www.huntsbot.com 浙ICP备2022000860号-4 All Rights Reserved.