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

twitter-bootstrap Bootstrap

村村LEY

2020-03-11

我是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应用程序中?

第831篇《如何在ReactJS应用程序中包含Bootstrap CSS和JS?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

3个回答
理查德村村小宇宙 2020.03.11

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

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

老丝Eva 2020.03.11

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

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

有几个答案可以帮助您-

  1. https://stackoverflow.com/a/52251319/4266842
  2. https://stackoverflow.com/a/54188034/4266842
Tony达蒙 2020.03.11

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

对于安装:

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

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

将React的CSS的Bootstrap CDN放入react.index文件的标记中,并将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>

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android