入门

An overview of React-Bootstrap and how to install and use.

设置

You can import the library as CommonJS modules, as ES6 modules via Babel, as AMD modules, or as a global JS script.

First add the Bootstrap CSS to your project; check here if you have not already done that. Note that:

• Because many folks use custom Bootstrap themes, we do not directly depend on Bootstrap. It is up to you to to determine how you get and link to the Bootstrap CSS and fonts.
• React-Bootstrap doesn't depend on a very precise version of Bootstrap. Just pull the latest and, in case of trouble, take hints on the version used by this documentation page. Then, have Bootstrap in your dependencies and ensure your build can read your Less/Sass/SCSS entry point. Then:

CommonJS

If you install React-Bootstrap using NPM, you can import individual components under react-bootstrap/lib rather than the entire library. Doing so pulls in only the specific components that you use, which will reduce the size of your client bundle.

$ npm install react react-bootstrap

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

ES6

$ npm install react react-bootstrap

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

AMD

$ bower install react react-bootstrap

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

浏览器全局

We provide react-bootstrap.js and react-bootstrap.min.js bundles with all components exported on the window.ReactBootstrap object. These bundles are available on CDNJS, and in both the Bower and NPM packages.

<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>

浏览器支持

We aim to support all browsers supported by both React and Bootstrap.

Unfortunately, due to the lack of resources and the will of dedicating the efforts to modern browsers and getting closer to Bootstrap's features, we will not be testing react-bootstrap against IE8 anymore. We will however continue supporting IE8 as long as people submit PRs addressing compatibility issues with it.

React requires polyfills for non-ES5 capable browsers.

<!--[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]-->