Как включить bootstrap css и js в приложение reactjs?

Я новичок в reactjs, я хочу включить bootstrap в мое приложение react

Я установил bootstrap by npm install bootstrap --save

теперь, хотите загрузить bootstrap css и js в моем приложении react.

Я использую webpack.

webpack.конфиг.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;

моя проблема: "как включить bootstrap css и js в приложение reactjs из node_modules?"Как настроить bootstrap для включения в мое приложение react?

56
reactjs twitter-bootstrap webpack

9 ответов

если вы новичок в реагировании и использовании create-react-app cli настройка. Затем выполните приведенную ниже команду NPM, чтобы включить последнюю версию bootstrap.

 npm install --save bootstrap

или 

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

затем добавьте следующую инструкцию import в .js

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

или 

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

не забудьте использовать className как атрибут (react использует className как атрибут вместо класс)

97

вы не можете использовать компоненты Javascript на основе Bootstrap Jquery в приложении React, так как все, что пытается манипулировать DOM вне React, считается плохой практикой. Здесь вы можете прочитать подробнее о.

Как включить Bootstrap в приложение React:

1) рекомендовано. Вы можете включить необработанные CSS-файлы Bootstrap, как указано в других ответах.

2) посмотри react-bootstrap библиотека. Это исключительно написано для реакции.

3) для Bootstrap 4 есть reactstrap

бонус

в эти дни я обычно избегаю загрузочных библиотек, которые предоставляют готовые к использованию компоненты (вышеупомянутые react-bootstrap или reactstrap и т. д.). Поскольку вы становитесь зависимыми от реквизита, который они берут (вы не можете добавить пользовательское поведение внутри них), и вы теряете контроль над DOM, который производят эти компоненты.

поэтому либо используйте только Bootstrap CSS, либо оставьте Ушко наружу. Общее эмпирическое правило: если вы не уверены, нужно ли вам это, вам это не нужно. Я видел много приложений, которые включают Bootstrap, но используют только небольшое количество CSS, и иногда большая часть этого CSS переопределяется пользовательскими стилями.

21

можно просто import файл css, где вы хотите. Webpack позаботится о том, чтобы связать css, если вы настроили загрузчик по мере необходимости.

что-то вроде

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

и webpack конфиг вроде

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

Примечание: Вы также должны добавить загрузчики шрифтов, иначе вы получите ошибку.

12

Via npm, вы бы запустить folowing

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

если bootstrap 4, также добавьте поппер.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';
9

пожалуйста, перейдите по ссылке ниже, чтобы использовать bootstrap с React. https://react-bootstrap.github.io/

для установки :

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

------------------------------------или-------------------------------------

поместите загрузочный CDN для CSS в тег индекса.html-файл в react и Bootstrap CDN для Js в теге индекса.HTML-файл. Применение класса вместо класса следуйте ниже индекса.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>
5
npm install --save bootstrap

и добавьте import в свой индекс.файл JS

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

или вы можете просто добавить CDN в свой индекс.HTML-файл.

3

вы можете установить его dirctly через 

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

затем импортируйте то, что вам действительно нужно из bootstrap, например :

import Button from 'react-bootstrap/lib/Button';

// или

import  Button  from 'react-bootstrap';

а также вы можете установить:

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

зацените нажмите здесь .

и для CSS вы можете прочитать эту ссылку также carfuly

читать здесь

1

надеюсь, это полезно;)

Шаг 1: с помощью NPM установите эту команду ниже

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

Шаг 2: пример индекса.в JS скрипт импорта ниже команду

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

Шаг 3: компоненты пользовательского интерфейса см. ниже веб-сайт reactstrap.гитуб.io

1

на всякий случай, если вы можете использовать yarn что рекомендуется для приложений React,

вы можете сделать,

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

это добавит bootstrap в качестве зависимости от вашего 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 в своем .

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