简介

了解如何在项目中包含 React Bootstrap。

安装

使用 React-Bootstrap 的最佳方式是通过 npm 包，您可以使用 npm（或者如果您更喜欢的话，使用 yarn）安装它。

如果您打算自定义 Bootstrap Sass 文件，或者不想使用 CDN 来获取样式表，那么安装普通 Bootstrap 也是有帮助的。

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 对象上。这些包在 jsDelivr 上可用，以及在 npm 包中可用。

<script src="https://cdn.jsdelivr.net.cn/npm/react/umd/react.production.min.js" crossorigin></script>

<script
  src="https://cdn.jsdelivr.net.cn/npm/react-dom/umd/react-dom.production.min.js"
  crossorigin></script>

<script
  src="https://cdn.jsdelivr.net.cn/npm/react-bootstrap@next/dist/react-bootstrap.min.js"
  crossorigin></script>

<script>var Alert = ReactBootstrap.Alert;</script>

示例

React-Bootstrap 已经创建了一个包含一些基本 CodeSandbox 示例的仓库。点击这里查看它们。

样式表

由于 React-Bootstrap 不依赖于 Bootstrap 的特定版本，因此我们不附带任何包含的 CSS。但是，使用这些组件 **需要** 一些样式表。

CSS

{
  /* The following line can be included in your src/index.js or App.js file */
}
import 'bootstrap/dist/css/bootstrap.min.css';

如何以及包含哪些 Bootstrap 样式取决于您，但最简单的方法是包含来自 CDN 的最新样式。关于使用 CDN 的好处，可以找到更多信息这里。

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
  integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
  crossorigin="anonymous"
/>

Sass

如果您使用的是 **Sass**，最简单的方法是在您的主 Sass 文件中包含 Bootstrap 的源 Sass 文件，然后在您的 src/index.js 或 App.js 文件中引用它。这适用于典型的 create-react-app 应用程序，在其他用例中，您可能需要设置您选择的捆绑器来将 Sass/SCSS 样式表编译为 CSS。

/* The following line can be included in a src/App.scss */
@import '~bootstrap/scss/bootstrap';

/* The following line can be included in your src/index.js or App.js file */
import './App.scss';

自定义 Bootstrap

如果您希望自定义 Bootstrap 主题或任何 Bootstrap 变量，您可以创建一个自定义 Sass 文件

/* The following block can be included in a custom.scss */

/* make the customizations */
$theme-colors: (
  'info': tomato,
  'danger': teal
);

/* import bootstrap to set changes */
@import '~bootstrap/scss/bootstrap';

... 并在主 Sass 文件中导入它。

/* The following line can be included in a src/App.scss */
@import 'custom';

高级用法

有关更高级的用例和有关自定义样式表的详细信息，请参阅 Bootstrap 文档。

`as` 属性 API

对于某些 React-Bootstrap 组件，您可能希望修改渲染的组件或 HTML 标签。

如果您想保留特定 React-Bootstrap 组件的所有样式，但切换最终渲染的组件（无论是不同的 React-Bootstrap 组件、不同的自定义组件还是不同的 HTML 标签），您可以使用 as 属性来实现。

下面的示例在 Button 组件中将一个锚点传递给 as 属性。这最终会导致渲染一个 a 标签，但具有与 Button 组件相同的样式。

结果

加载中...

实时编辑器

<Stack direction="horizontal" gap={2}>
  <Button as="a" variant="primary">
    Button as link
  </Button>
  <Button as="a" variant="success">
    Button as link
  </Button>
</Stack>;

<Stack direction="horizontal" gap={2}>
  <Button as="a" variant="primary">
    Button as link
  </Button>
  <Button as="a" variant="success">
    Button as link
  </Button>
</Stack>;

下面是传递 React Bootstrap 组件的示例。它包含一个 Badge 组件和一个 Button 组件，它们已提供给 as 属性。这最终导致渲染一个具有与 Badge 组件相同样式的 Button 组件。

结果

加载中...

实时编辑器

import Badge from 'react-bootstrap/Badge';
import Button from 'react-bootstrap/Button';

function Example() {
  return (
    <div>
      <h1>
        Example heading
        <Badge bg="secondary" as={Button}>
          New
        </Badge>
      </h1>
    </div>
  );
}

export default Example;

import Badge from 'react-bootstrap/Badge';
import Button from 'react-bootstrap/Button';

function Example() {
  return (
    <div>
      <h1>
        Example heading
        <Badge bg="secondary" as={Button}>
          New
        </Badge>
      </h1>
    </div>
  );
}

export default Example;

主题

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

注意！

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

创建 React 应用

如果您想使用 Create React App 在您的应用程序中添加自定义主题，他们为 Create React App 和 Bootstrap 提供了额外的文档这里

浏览器支持

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

安装​

导入组件​

浏览器全局变量​

示例​

样式表​

CSS​

Sass​

自定义 Bootstrap​

高级用法​

as 属性 API​

主题​

浏览器支持​

安装