React-bootstrap 正确设置

Question

所以我一直在练习 React，现在我发现自己正在学习 React-bootstrap。当我的设置看起来正确时，我无法让它工作。

我克隆了一个 React 样板

$ create-react-app myapp

然后我安装了bootsrap

$ npm install --save react-bootstrap

然后我加了一个<Button>

import React, { Component } from 'react';
import './App.css';
import Button from 'react-bootstrap/lib/Button';

class App extends Component {

  render() {
    return (
      <div className="App">
         <Button>Default</Button>
      </div>
    );
  }
}

export default App;

预期结果：

实际结果：

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Answer 1

您需要在应用程序中包含 bootstrap 样式。

来自Bootstrap-react site：

Because React-Bootstrap doesn't depend on a very precise version of Bootstrap, we don't ship with any included css. However, some stylesheet is required to use these components.

他们建议使用 cdn 加载样式。您可以在 index.html 文件的头部包含以下内容：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

或者您可以从 https://cdnjs.com/libraries/twitter-bootstrap/3.3.7

获取另一个版本

React-bootstrap 正确设置

React-bootstrap correct setup

twitter-bootstrap

reactjs

react-bootstrap