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

Twitter bootstrap 如何在reactjs应用程序中包含引导css和js？
twitter-bootstrap reactjs webpack
Twitter bootstrap 如何在reactjs应用程序中包含引导css和js？,twitter-bootstrap,reactjs,webpack,Twitter Bootstrap,Reactjs,Webpack,我是react JS的新手，我想在我的react应用程序中包括引导我已通过npm安装引导程序--save安装引导程序现在，想在我的react应用程序中加载引导css和js 我正在使用网页包 webpack.config.js 我的问题是“如何在react js应用程序中从节点_模块中包含引导css和js？”如何设置引导以包含在我的react应用程序中？您不能在react应用程序中使用基于引导Jquery的Javascript组件，因为任何试图在react之外操纵DOM的行为都被认为是错误的做
我是react JS的新手，我想在我的react应用程序中包括引导
我已通过
npm安装引导程序--save安装引导程序
现在，想在我的react应用程序中加载引导css和js
我正在使用网页包
webpack.config.js
我的问题是“如何在react js应用程序中从节点_模块中包含引导css和js？”如何设置引导以包含在我的react应用程序中？
您不能在react应用程序中使用基于引导Jquery的Javascript组件，因为任何试图在react之外操纵DOM的行为都被认为是错误的做法。在这里你可以阅读
如何在React应用程序中包括引导：
1） 推荐使用。您可以按照其他答案的指定，包含引导的原始CSS文件
2） 看看图书馆。这是专门为React编写的
3） 对于引导程序4，有
奖金
现在我通常避免使用提供现成组件的引导库（上面提到的react引导或react引导等等）。随着您越来越依赖于它们所采用的道具（您不能在其中添加自定义行为），您将失去对这些组件生成的DOM的控制
因此，要么只使用引导CSS，要么不使用引导CSS。一般的经验法则是：如果你不确定你是否需要它，你就不需要它。我见过很多应用程序都包括Bootstrap，但是只使用了少量CSS，有时大部分CSS都被自定义样式覆盖。
您可以在任何地方导入CSS文件。如果您根据需要配置加载程序，Webpack将负责绑定css
大概
import 'bootstrap/dist/css/bootstrap.css';

和网页配置一样
loaders: [{ test: /\.css$/, loader: 'style-loader!css-loader' }]

注意：您还必须添加字体加载器，否则会出现错误。
如果您是React新手，并且使用创建React appcli设置，请运行下面的npm命令以包含最新版本的引导
npm install --save bootstrap

或
然后将以下导入语句添加到index.js文件中。（）
或
别忘了在目标元素上使用className作为属性（react使用className作为属性，而不是class）。请按照下面的链接使用带有react的引导。

安装：
$ npm install --save react react-dom
$ npm install --save react-bootstrap

------------------------------------或-------------------------------------
将CSS引导CDN放在react中index.html文件的标记中，将Js引导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>

通过npm，您将运行以下
npm install bootstrap jquery --save
npm install css-loader style-loader --save-dev

如果是bootstrap 4，还可以添加dependency popper.js
npm install popper.js --save

将以下内容（作为新对象）添加到您的网页配置中
loaders: [
    {
      test: /\.css$/,
      loader: 'style-loader!css-loader'
    }

将以下内容添加到您的索引或布局中
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';

并将此导入语句添加到index.js文件中
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

或者您可以简单地在index.html文件中添加CDN。
您可以通过
$ npm install --save react react-dom
$ npm install --save react-bootstrap

然后从引导中导入您真正需要的内容，如：
import Button from 'react-bootstrap/lib/Button';

//或
您还可以安装：
npm install --save reactstrap@next react react-dom

看看这个
对于CSS，您也可以仔细阅读此链接
希望这会有所帮助；）
步骤1：使用NPM安装以下命令
npm install --save reactstrap@next react react-dom

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

步骤2:example index.js主脚本导入bellow命令
npm install --save reactstrap@next react react-dom

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

第3步：用户界面组件参考以下网站
以防万一，如果您可以使用推荐用于React应用程序的纱线

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

这将把引导作为一个依赖项添加到包.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';

在项目“npm安装--保存”中安装引导程序后bootstrap@3.3.7"
您必须移动到projectsrc文件夹中的index.js文件，并从节点模块包导入引导
导入'bootstrap/dist/css/bootstrap.min.css'
如果您愿意，您可以从本视频中获得帮助，它肯定会对您有很大帮助。
由于引导/Reactstrap发布了其最新版本，即引导4，您可以按照以下步骤使用它
导航到您的项目
打开终端
我假设已经安装了npm，然后键入以下命令
npm安装--保存react dom

这将在项目中作为依赖项安装Reactstrap
下面是使用Reactstrap创建的按钮的代码

从“React”导入React；
从“reactstrap”导入{Button}；
导出默认值（道具）=>{
返回(
危险！
);
};不知何故，被接受的答案只是谈论从引导中包含css文件
npm install --save bootstrap

但我认为这个问题与这里的问题有关-

有两个答案可以帮助-


如果您在项目中使用CRA（创建反应应用程序），您可以添加以下内容：
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"
/>



我这样做是为了解决类似的问题。希望这对您有用：-）
完整的答案可以为您提供jquery和bootstrap，因为jquery是bootstrap.js的一个要求：
将jquery和引导安装到节点_模块中：
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';

我试着用指令：
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();

导入'bootstrap/dist/css/bootstrap.min.css'；
从“jquery”导入美元；
从“Popper.js”导入Popper；
导入'bootstrap/dist/js/bootstrap.bundle.min'；
从“React”导入React；
从“react dom”导入react dom；
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';

npm install bootstrap
npm install jquery popper.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();

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

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

npm install create-react-app

npm install bootstrap popper jquery

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

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

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


npm install jquery popper.js bootstrap --save

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

npm install sass --save