React引导程序不起作用

我在reactJS中使用引导程序时遇到问题。我使用npm安装了bootstrap，并且在public.html中包含了bootstrap css，但是我只能得到没有任何样式的按钮。 public.html：React引导程序不起作用

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

我很欣赏你的想法！

来源

2017-08-03 Yiming Lee

尝试改变

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

到

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

参考：http://getbootstrap.com/css/#buttons

顺便说一句，我注意到两者都已安装和链接引导的本地副本，以及来自CDN。 CDN版本最后显示，因此优先。

来源

2017-08-03 15:51:16 Brian

我做了你说的，但它仍然不起作用。 –

但我试图将'

无论如何感谢您的想法！ –

React引导程序不起作用

回答

相关问题