Jak dołączyć bootstrap css i js do aplikacji reactjs?

ja newb do reactjs, chcę to bootstrap w moim reagować aplikacjęJak dołączyć bootstrap css i js do aplikacji reactjs?

Mam zainstalowany bootstrap przez npm install bootstrap --save

Teraz chcą załadować bootstrap css i js w moim reagować aplikację.

Używam webpacka.

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;

Mój problem jest "jak to bootstrap CSS i JS w reactjs aplikacji z node_modules?" Jak skonfigurować bootstrap do włączenia do mojej aplikacji reagowania?

Źródło

2016-10-14 Mehul Mali

Czy używasz Node.js na zapleczu? – DanielKhan

Po prostu importuj pliki Bootstrap na stronie HTML – Mistalis

@DanielKhan: Nie, nie używam Node.js. –

Nie można używać komponentów JavaScript opartych na Jquery Bootstrap w aplikacji React, ponieważ wszystko, co próbuje manipulować DOMem poza Reactem, jest uważane za złą praktykę. Tutaj możesz przeczytać more info about it. Nadal możesz używać surowych plików CSS z Bootstrap, jak określa to inna odpowiedź.

Zobacz bibliotekę react-bootstrap. Jest napisany wyłącznie dla React i będzie w porządku.

Dla Bootstrap 4 znajduje reactstrap

Źródło

2016-10-14 07:46:32 Shota

Można tylko import plik css gdzie chcesz. Webpack zajmie się pakowaniem css, jeśli skonfigurujesz ładowarkę zgodnie z wymaganiami.

Coś,

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

A config WebPack jak,

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

Uwaga: Musisz dodać ładowarki czcionek, a także, w przeciwnym wypadku można byłoby się błąd.

Źródło

2016-10-14 13:21:11 Thaadikkaaran

Dzięki za odpowiedź. Potrzebujesz jakichś modułów npm dla loadera i css-loadera? –

Tak, użyjcie ładowarek 'style-loader css-loader' – Thaadikkaaran

Ok, teraz, żeby zobaczyć, co to jest Webpack (coś takiego jak coś i włącz to stało się strasznym innym js-rzeczy do nauczenia się), NIemi aspiracją było użycie przycisk stylu bootstrap3 w mojej aplikacji samouczka .... teraz nie będę –

Jeśli jesteś nowy w React i przy użyciu konfiguracji create-react-app cli. Następnie uruchom poniższą komendę NPM, aby dołączyć najnowszą wersję bootstrap.

npm install --save bootstrap

lub

npm install --save [email protected]

Następnie dodać poniższą instrukcję import do index.js plików

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

lub

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

nie zapomnij użyć className jako atrybutu (reagują zastosowań ClassName jak atrybut zamiast klasy)

Źródło

2017-07-08 10:36:37

Jeśli chcesz użyć Bootstrap 4, użyj następującego polecenia: npm install [email protected] - zapisz (od teraz powyższe polecenie instalacji zainstaluje ostatnią stabilną wersję Bootstrap, która jest 3.3.7) – lgants

'Względny import poza src/nie jest obsługiwany.' – riv

Nie rozumiem, dlaczego nie wystarczy połączyć go w szablonie html –

wykonaj poniższe łącze, aby skorzystać z bootstrap React. https://react-bootstrap.github.io/

do instalacji:

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

---------------------------------- --OR -------------------------------------

Umieść Bootstrap CDN dla CSS w tag pliku index.html w reakcji i Bootstrap CDN dla Js w tagu pliku index.html. Użyj className zamiast klasy wykonaj poniższe 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>

Źródło

2017-08-29 21:56:52

Podany link jest martwy – David

Hej David, Put Bootstrap CDN dla CSS w tag pliku index.js w reakcji i Bootstrap CDN dla Js w tagu pliku index.js . Użyj className instrad klasy. –

updated Odpowiedz. –

Via KMP, należy uruchomić folowing

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

Jeśli bootstrap 4, również dodać popper.js

npm install popper.js --save

Dodaj następujące elementy (jako nowy obiekt) do swojej konfiguracji config Tablica

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

Dodaj następujące wpisy do indeksu lub układ

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

Źródło

2018-02-27 22:21:22 blamb

npm install --save bootstrap

i dodaj instrukcję import do pliku twoi index.js

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

lub Możesz po prostu dodać CDN w swoim ind plik ex.html.

Źródło

2018-03-09 11:31:19 Nikhil

Jak dołączyć bootstrap css i js do aplikacji reactjs?

Odpowiedz

Powiązane problemy