ReactJS 入门工具包和 Bootstrap答案

【问题标题】：ReactJS starter kit and BootstrapReactJS 入门工具包和 Bootstrap
【发布时间】：2015-11-26 22:20:54
【问题描述】：

我正在尝试将 Twitter Bootstrap 与 ReactJS 一起使用。我从 react-starter-kit (https://github.com/kriasoft/react-starter-kit) 开始并安装了 react-bootstrap。安装后，我尝试创建一些简单的按钮以查看它是否有效，但它们看起来不正确。我也看到了这个链接，https://github.com/kriasoft/react-starter-kit/issues/179，但没有运气。

我试过这样做：

/*! React Starter Kit | MIT License | http://www.reactstarterkit.com/ */

import React, { Component } from 'react';
import {Button, ButtonToolbar} from 'react-bootstrap';

class Header extends Component {

  render() {
    return (
        <div>
            <ButtonToolbar>
              <Button bsStyle="primary" bsSize="large">Large button</Button>
              <Button bsSize="large">Large button</Button>
              <Button bsStyle="primary" bsSize="xsmall">Extra small button</Button>
            </ButtonToolbar>
          </div>
        //<button type="button" className="btn btn-info btn-sm">Small Info Button</button>

    );
  }

}

export default Header;

我也尝试使用注释掉的行，但我也无法让它工作。

有谁知道为什么这些带有 Bootstrap 的按钮没有正确呈现？

【问题讨论】：

标签： twitter-bootstrap reactjs

【解决方案1】：

您的屏幕截图表明没有应用任何 CSS。据我所知，react-bootstrap 没有附带样式。您必须从 bootstrap 本身中提取 CSS。

最简单的测试方法是将以下内容放入您的 HTML：

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">

【讨论】：