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引導程序不起作用

回答

相關問題