简介

React-Bootstrap是一个可重用的前端组件库, 你可以通过Facebook的React.js框架获得Twitter Bootstrap的外观，但代码更清晰,React-Bootstrap组件库试图遵循React.js原则，即应在单个位置定义单个功能。React-Bootstrap是使用React完全重新实现Bootstrap组件。它不依赖于任何一个bootstrap.js或jQuery。如果您安装了React安装程序并安装了React-Bootstrap，那么您将获得所需的一切。

MIT 协议，最新版本v1.0.0-beta.9，支持bootstrap 4.3

浏览器兼容性

官网回应：We aim to support all browsers supported by both React and Bootstrap.

安装

使用React Bootstrap的最佳方法是通过你可以安装的npm软件包npm（如果你愿意，还可以安装）。

npm install react - bootstrap bootstrap

导入

您应该导入以下单个组件： react-bootstrap/Button而不是整个库。这样做只会引入您使用的特定组件，这可以显着减少您最终发送到客户端的代码量。

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

浏览器全局

我们提供react-bootstrap.js并 react-bootstrap.min.js捆绑了在window.ReactBootstrap对象上导出的所有组件。这些捆绑包可以在unpkg和npm包中使用。

< script src = “ https://unpkg.com/react/umd/react.production.js ” crossorigin />
< script src = “ https://unpkg.com/react-dom/umd/react-dom.production.js ”
 crossorigin 
/>
< script 
 src = “ https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js ”
 crossorigin 
/>
< script > var Alert = ReactBootstrap.Alert; </ script >

样式表

因为React-Bootstrap不依赖于非常精确的Bootstrap版本，所以我们不附带任何包含的CSS。但是，某些样式表需要使用这些组件。您包含的样式和引导样式取决于您，但最简单的方法是包含CDN中的最新样式。

<link
 rel="stylesheet"
 href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
 integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
 crossorigin="anonymous"
/>

对于更高级的用例，您还可以使用Webpack或Browserify等捆绑器在您的构建过程中包含css文件，但这超出了本指南的范围。有关自定义样式表以匹配组件使用的详细信息，另请参阅。

主题

React-Bootstrap与现有的Bootstrap主题兼容。只需按照您选择的主题的安装说明进行操作即可。

小心！

因为React-Bootstrap完全重新实现了Bootstrap的JavaScript，所以它不会自动与扩展默认JavaScript行为的主题兼容。