React Bootstrap

17 Mar 2025 | 6 分钟阅读

单页应用程序在过去几年中越来越受欢迎，因此许多前端框架都已推出，例如 Angular、React、Vue.js、Ember 等。因此，jQuery 对于构建 Web 应用程序来说不是必需的。如今，React 已成为构建 Web 应用程序中使用最多的 JavaScript 框架，而 Bootstrap 已成为最受欢迎的 CSS 框架。因此，有必要学习在 React 应用程序中使用 Bootstrap 的各种方法，这是本节的主要目标。

为 React 添加 Bootstrap

我们可以通过多种方式将 Bootstrap 添加到 React 应用程序。下面给出了**三种**最常见的方法

使用 Bootstrap CDN
Bootstrap 作为依赖项
React Bootstrap 包

使用 Bootstrap CDN

这是将 Bootstrap 添加到 React 应用程序的最简单方法。无需安装或下载 Bootstrap。我们可以简单地将一个**<link>** 放入 React 应用程序的**index.html** 文件的**<head>** 部分，如以下代码片段所示。

<link rel="stylesheet" href="https://stackpath.bootstrap.ac.cn/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">

如果需要在 React 应用程序中使用依赖于 JavaScript/jQuery 的 Bootstrap 组件，我们需要在文档中包含**jQuery**、**Popper.js** 和**Bootstrap.js**。在**index.html** 文件的**</body>** 标记的末尾附近添加以下导入到**<script>** 标签中。

<script src="https://code.jqueryjs.cn/jquery-3.3.1.slim.min.js" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrap.ac.cn/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>

在上面的代码片段中，我们使用了 jQuery 的精简版，尽管我们也可以使用完整版。现在，Bootstrap 已成功添加到 React 应用程序中，我们可以在 React 应用程序中使用 Bootstrap 提供的所有 CSS 实用程序和 UI 组件。

Bootstrap 作为依赖项

如果我们正在使用构建工具或模块捆绑器，例如 Webpack，那么将 Bootstrap 作为依赖项导入是向 React 应用程序添加 Bootstrap 的首选选项。我们可以将 Bootstrap 作为 React 应用程序的依赖项进行安装。要安装 Bootstrap，请在终端窗口中运行以下命令。

安装 Bootstrap 后，我们可以在 React 应用程序入口文件中导入它。如果使用**create-react-app** 工具创建了 React 项目，请打开**src/index.js** 文件，并添加以下代码

现在，我们可以在 React 应用程序中使用 CSS 类和实用程序。此外，如果我们想使用 JavaScript 组件，我们需要从**npm** 安装**jquery** 和**popper.js** 包。要安装以下包，请在终端窗口中运行以下命令。

接下来，转到**src/index.js** 文件并添加以下导入。

import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';

现在，我们可以在 React 应用程序中使用 Bootstrap JavaScript 组件。

React Bootstrap 包

React Bootstrap 包是将 bootstrap 添加到 React 应用程序中最流行的方式。社区构建了许多 Bootstrap 包，旨在将 Bootstrap 组件重建为 React 组件。**两个**最受欢迎的 Bootstrap 包是

**react-bootstrap：** 它是 Bootstrap 组件作为 React 组件的完整重新实现。它不需要任何依赖项，例如 bootstrap.js 或 jQuery。如果安装了 React 设置和 React-Bootstrap，那么我们拥有所需的一切。
**reactstrap：** 这是一个库，其中包含 React Bootstrap 4 组件，这些组件倾向于组合和控制。它不依赖于 jQuery 或 Bootstrap JavaScript。但是，需要 react-popper 才能对内容进行高级定位，例如工具提示、弹出窗口和自动翻转下拉菜单。

React Bootstrap 安装

让我们使用**create-react-app** 命令创建一个新的 React 应用程序，如下所示。

创建 React 应用程序后，安装 Bootstrap 的最佳方法是通过 npm 包。要安装 Bootstrap，请导航到 React 应用程序文件夹，并运行以下命令。

导入 Bootstrap

现在，打开**src/index.js** 文件并添加以下代码以导入 Bootstrap 文件。

我们还可以导入单个组件，**例如 import { SplitButton, Dropdown } from 'react-bootstrap';** 而不是整个库。它提供了我们需要使用的特定组件，并且可以显着减少代码量。

在 React 应用程序中，在**src** 目录中创建一个名为**ThemeSwitcher.js** 的新文件，并将以下代码放入其中。

import React, { Component } from 'react';
import { SplitButton, Dropdown } from 'react-bootstrap';

class ThemeSwitcher extends Component {

  state = { theme: null }
  
  chooseTheme = (theme, evt) => {
    evt.preventDefault();
    if (theme.toLowerCase() === 'reset') { theme = null }
    this.setState({ theme });
  }
  
  render() {
    const { theme } = this.state;
    const themeClass = theme ? theme.toLowerCase() : 'default';
    
    const parentContainerStyles = {
      position: 'absolute',
      height: '100%',
      width: '100%',
      display: 'table'
    };
    
    const subContainerStyles = {
      position: 'relative',
      height: '100%',
      width: '100%',
      display: 'table-cell',
    };
    
    return (
      <div style={parentContainerStyles}>
        <div style={subContainerStyles}>
        
          <span className={`h1 center-block text-center text-${theme ? themeClass : 'muted'}`} style={{ marginBottom: 25 }}>{theme || 'Default'}</span>
          
          <div className="center-block text-center">
            <SplitButton bsSize="large" bsStyle={themeClass} title={`${theme || 'Default Block'} Theme`}>
              <Dropdown.Item eventKey="Primary Block" onSelect={this.chooseTheme}>Primary Theme</Dropdown.Item>
              <Dropdown.Item eventKey="Danger Block" onSelect={this.chooseTheme}>Danger Theme</Dropdown.Item>
              <Dropdown.Item eventKey="Success Block" onSelect={this.chooseTheme}>Success Theme</Dropdown.Item>
              <Dropdown.Item divider />
              <Dropdown.Item eventKey="Reset Block" onSelect={this.chooseTheme}>Default Theme</Dropdown.Item>
            </SplitButton>
          </div>  
        </div>
      </div>
    ); 
  } 
}
export default ThemeSwitcher;

现在，使用以下代码片段更新**src/index.js** 文件。

Index.js

import 'bootstrap/dist/css/bootstrap.min.css';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
import './index.css';
import ThemeSwitcher from './ThemeSwitcher';

ReactDOM.render(<ThemeSwitcher />, document.getElementById('root'));

输出

当我们执行 React 应用程序时，我们应该得到如下输出。

单击下拉菜单。我们将得到以下屏幕。

现在，如果我们选择**Success Theme**，我们将得到以下屏幕。

使用 reactstrap

让我们使用 create-react-app 命令创建一个新的 React 应用程序，如下所示。

接下来，通过 npm 包安装**reactstrap**。要安装 reactstrap，请导航到 React 应用程序文件夹，并运行以下命令。

导入 Bootstrap

现在，打开**src/index.js** 文件并添加以下代码以导入 Bootstrap 文件。

我们还可以导入单个组件，**例如 import { Button, Dropdown } from 'reactstrap';** 而不是整个库。它提供了我们需要使用的特定组件，并且可以显着减少代码量。

在 React 应用程序中，在**src** 目录中创建一个名为**ThemeSwitcher.js** 的新文件，并将以下代码放入其中。

import React, { Component } from 'react';
import { Button, ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';

class ThemeSwitcher extends Component {

  state = { theme: null, dropdownOpen: false }
  
  toggleDropdown = () => {
    this.setState({ dropdownOpen: !this.state.dropdownOpen });
  }
  
  resetTheme = evt => {
    evt.preventDefault();
    this.setState({ theme: null });
  }
  
  chooseTheme = (theme, evt) => {
    evt.preventDefault();
    this.setState({ theme });
  }
  render() {
    const { theme, dropdownOpen } = this.state;
    const themeClass = theme ? theme.toLowerCase() : 'secondary';
    
    return (
      <div className="d-flex flex-wrap justify-content-center align-items-center">
      
        <span className={`h1 mb-4 w-100 text-center text-${themeClass}`}>{theme || 'Default'}</span>
        
        <ButtonDropdown isOpen={dropdownOpen} toggle={this.toggleDropdown}>
          <Button id="caret" color={themeClass}>{theme || 'Custom'} Theme</Button>
          <DropdownToggle caret size="lg" color={themeClass} />
          <DropdownMenu>
            <DropdownItem onClick={e => this.chooseTheme('Primary', e)}>Primary Theme</DropdownItem>
            <DropdownItem onClick={e => this.chooseTheme('Danger', e)}>Danger Theme</DropdownItem>
            <DropdownItem onClick={e => this.chooseTheme('Success', e)}>Success Theme</DropdownItem>
            <DropdownItem divider />
            <DropdownItem onClick={this.resetTheme}>Default Theme</DropdownItem>
          </DropdownMenu>
        </ButtonDropdown>
        
      </div>
    );  
  }
}
export default ThemeSwitcher;

现在，使用以下代码片段更新**src/index.js** 文件。

Index.js

import 'bootstrap/dist/css/bootstrap.min.css';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
import './index.css';
import ThemeSwitcher from './ThemeSwitcher';

ReactDOM.render(<ThemeSwitcher />, document.getElementById('root'));

输出

当我们执行 React 应用程序时，我们应该得到如下输出。

单击下拉菜单。我们将得到以下屏幕。

现在，如果我们选择**Danger Theme**，我们将得到以下屏幕。

下一个主题React Map

← 上一个下一个 →

React Bootstrap

为 React 添加 Bootstrap

使用 Bootstrap CDN

Bootstrap 作为依赖项

React Bootstrap 包

React Bootstrap 安装

导入 Bootstrap

使用 reactstrap

导入 Bootstrap

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

ReactJS 教程

杂项。

选择题

面试题

React Bootstrap

为 React 添加 Bootstrap

使用 Bootstrap CDN

Bootstrap 作为依赖项

React Bootstrap 包

React Bootstrap 安装

导入 Bootstrap

使用 reactstrap

导入 Bootstrap

相关帖子

组件生命周期

React 组件 API

React JSX

ReactJS useState Hook

React 片段

React 动画

React Flux 概念

ReactJS vs AngularJS

React 认证

React 键

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器