开始

React-Bootstrap 概览以及如何安装及使用。

npm (推荐)

$ npm install react-bootstrap --save

bower

$ bower install react react-bootstrap

样式表

由于 React-Bootstrap 不依赖于具体的 Bootstrap 版本, 所以发行包中不包括任何 css。尽管使用这些组件时，一些样式表是必须的。如何选择和加载 bootstrap 样式文件由使用者决定，最简单的办法就是从 CDN 上加载最新的样式表文件。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

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

使用 Webpack 或 Browserify 打包 css 也是一个好的方法，但这超出了本指南的范围。请查看 http://getbootstrap.com/customize/ 来获取如何定制所需组件的方法。

主题

React-Bootstrap 与 Bootstrap 主题兼容。请参照如下安装指令来选择你的主题。

由于 React-Bootstrap 是 Bootstrap 的 Javascript 实现, 它不是基于 Bootstrap 自身 JavaScript 文件的扩展。

React-Bootstrap 是使用 React 技术的 Bootstrap 组件再实现，他不依赖于 bootstrap.js 以及 jQuery。如果你使用 React 并安装 React-Bootstrap ，就马上可以使用了。

你可以使用它做为 CommonJS 的模块, 也可通过 Babel、AMD 或全局 JS 脚本用做 ES6 模块。

打包大小的优化

使用 npm 安装 React-Bootstrap，就可以从 react-bootstrap/lib 导入单个组件，而避免包含全部的组件库而导致包过大。在开发中标明使用到的具体组件，打包时可以有效降低客户端包的大小。

#CommonJS

var Alert = require('react-bootstrap/lib/Alert');
// or
var Alert = require('react-bootstrap').Alert;

#ES6

Es6 模块还不直接支持，需要借助 Babel 的翻译器来进行处理。

import Button from 'react-bootstrap/lib/Button';
// or
import { Button } from 'react-bootstrap';

#AMD

对于 AMD 的支持需要引入全量包。如果只想使用特定的组件，请考虑使用 npm 和 CommonJS 模块的方式来替代.

define(['react-bootstrap'], function(ReactBootstrap) {
  var Alert = ReactBootstrap.Alert;
  ...
});

#游览器全局对象

我们提供的 react-bootstrap.js 和 react-bootstrap.min.js 包，将全部组件导入到 window.ReactBootstrap 对象。这些包可通过 CDNJS 获取，支持 Bower 和 NPM 包.

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/<react-version>/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/<react-version>/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/<version>/react-bootstrap.min.js"></script>
<script>
var Alert = ReactBootstrap.Alert;
</script>

我们的目标是 React 和 Bootstrap 支持的浏览器我们都支持。

不幸的是由于缺少资源以及现代浏览器不断向前发展的趋势，我们没有针对 IE8 做过 react-bootstrap 测试。
如果有人提出 IE8 的兼容性问题，我们提供持续的支持。

React 需要 polyfills 支持非 ES5 兼容的浏览器。

<!--[if lt IE 9]>
<script>
(function(){
  var ef = function(){};
  window.console = window.console || {log:ef,warn:ef,error:ef,dir:ef};
}());
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv-printshiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-shim.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-sham.js"></script>
<![endif]-->

开始

#安装

样式表

主题

#Javascript