React bootstrap не работает

У меня проблемы с использованием начальной загрузки в reactJS. Я установил bootstrap с помощью npm и включил bootstrap css в public.html, но я могу получить только кнопку без какого-либо стиля. 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;

Ценю твои идеи!


react-bootstrap
person Yiming Lee    schedule 03.08.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте изменить

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

to

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

Ссылка: http://getbootstrap.com/css/#buttons

Кстати, я заметил, что вы установили и связали локальную копию начальной загрузки, а также из CDN. Версия CDN отображается последней, поэтому она имеет приоритет.

person Brian    schedule 03.08.2017
comment
Но я попытался изменить «‹button›» на «‹Button›», это работает! - person Yiming Lee; 03.08.2017
comment
В любом случае спасибо за вашу идею! - person Yiming Lee; 03.08.2017