2017-08-03 12 views
0

リアクションスレッドにブートストラップを使用するのに問題があります。私はnpmを使ってブートストラップをインストールし、public.htmlにブートストラップCSSを含めましたが、私はスタイルを持たないボタンしか得られません。 public.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="%PUBLIC_URL%/favicon.ico"> 
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css"> 
    <title>React App</title> 
    </head> 
    <body> 
    <div id="root"></div> 
    <script src="/js/bundle.js"></script> 

    </body> 
</html> 

APP.js:

import React, { Component } from 'react'; 
import logo from './logo.svg'; 
import './App.css'; 

import{Button} from 'react-bootstrap'; 

class App extends Component { 
    render() { 
    return (
     <div className="App"> 
     <div className="App-header"> 
      <img src={logo} className="App-logo" alt="logo" /> 
      <h2>Welcome to React</h2> 
     </div> 
     <p className="App-intro"> 
      To get started, edit <code>src/App.js</code> and save to reload. 
     </p> 
      <button bsSize="large" bsStyle="danger">Test</button> 

     </div> 
    ); 
    } 
} 

export default App; 

私はあなたのアイデアに感謝!さておき、私はあなたが両方インストールされている気づき、ブートストラップのローカルコピーをリンクさだけでなく、からのようhttp://getbootstrap.com/css/#buttons

答えて

0

<button bsSize="large" bsStyle="danger">Test</button> 

<button type="button" class="btn btn-danger">Test</button> 

への参照を変更してみてくださいCDN。 CDNバージョンが最後に表示されるので、優先されます。

+0

私はあなたの言ったことをしましたが、それでも動作しません。 –

+0

しかし、私は '

+0

! –

関連する問題