了解如何在您的 React 项目中安装和使用 Bootstrap - 以正确的方式。

根据 Stack Overflow 开发者调查，React 是目前最流行的 JavaScript 框架。 在本文中，我将向您介绍一个名为“React-Bootstrap”的 UI 库，它提供了出色的 UI 组件。 互联网上提供了许多 React UI 库，但 React-Bootstrap 是迄今为止 Web 开发人员中最受欢迎的选择。 感谢创建者保持其与标准 Bootstrap 框架的相似性以及广泛的 Bootstrap 主题的可用性。

在 React 中集成 React-Bootstrap UI 库的 4 步指南

安装 React-Bootstrap将资产文件导入应用程序导入组件使用组件

第 1 步：安装 React-Bootstrap

在您的 React 项目中打开一个终端并执行以下命令以开始使用 NPM（节点包管理器）安装包。

npm install react-bootstrap bootstrap

如果您更喜欢使用纱线，请执行以下命令。

yarn add react-bootstrap bootstrap

上面的命令将安装两个包 - Bootstrap 和 React-Bootstrap。 除了 React-Bootstrap 之外，安装 Bootstrap 的目的是： React-Bootstrap 包不附带任何 CSS。 它只包含组件。 因此，它需要一个额外的包来包含 CSS 文件。

第 2 步：将资产文件导入应用程序

打开 index.js，并添加以下行以包含 Bootstrap 框架的 CSS 文件。

import 'bootstrap/dist/css/bootstrap.min.css';

您现在可以开始在您的应用程序中使用 React-Bootstrap UI 库及其组件。

第 3 步：导入组件

您可以通过指定引导组件的名称及其包名称来导入 React Bootstrap 的组件。 添加以下行以将按钮导入 React 页面。

import Button from 'react-bootstrap/Button';

您必须如上所示导入单个组件，而不是整个库。 因为它只包含您使用的特定组件。 通过这样做，您可以显着减少发送给客户端的代码量。

第 4 步：使用组件

这是在 React 应用程序中使用任何 Bootstrap 组件的方法。 我将演示几个，但您可以参考官方文档来查看所有组件。

按钮组件警报组件微调器组件

4.1。 按钮组件

通过将以下行添加到页面顶部来导入组件。

import Button from 'react-bootstrap/Button';

然后，您可以在导入的组件上使用道具来更改其布局。 例如，Button 有许多 props，如变体、类型、目标、大小等。请参考以下代码片段来显示按钮。

import React from 'react';import Button from 'react-bootstrap/Button';const ButtonDemo = () => {    return (        <React.Fragment>            <Button variant="primary">Primary</Button>{' '}            <Button variant="secondary">Secondary</Button>{' '}            <Button variant="success">Success</Button>{' '}            <Button variant="warning">Warning</Button>{' '}            <Button variant="danger">Danger</Button>{' '}            <Button variant="info">Info</Button>{' '}            <Button variant="light">Light</Button>{' '}        </React.Fragment>    );}export default ButtonDemo;

将它包含在 App.js 文件中，您将看到以下输出。

4.2. 警报组件

通过将以下行添加到页面顶部来导入组件。

import Alert from 'react-bootstrap/Alert';

然后，您可以在导入的组件上使用道具来更改其布局。 例如，警报具有变体之类的道具。 请参阅以下代码片段以显示警报。

import React from "react";import Alert from "react-bootstrap/Alert";const AlertDemo = () => {    return (        <React.Fragment>            {[                'primary',                'secondary',                'success',                'danger',                'warning',                'info',                'light',                'dark',            ].map((variant) => (                <Alert key={variant} variant={variant}>                    This is a {variant} alert—check it out!                </Alert>            ))}        </React.Fragment>    );}export default AlertDemo;

将它包含在 App.js 文件中，您将看到以下输出。

4.3. 微调器组件

通过将以下行添加到页面顶部来导入组件。

import Spinner from 'react-bootstrap/Spinner';

然后，您可以在导入的组件上使用道具来更改其布局。 例如，Spinner 有变体之类的道具。 请参阅以下代码片段以显示微调器。

import React from 'react';import Spinner from 'react-bootstrap/Spinner';const SpinnerDemo = () => {    return (        <React.Fragment>            <div className='mb-4'>                <Spinner animation="border" variant="primary" />                <Spinner animation="border" variant="secondary" className='ms-3' />                <Spinner animation="border" variant="success" className='ms-3' />                <Spinner animation="border" variant="danger" className='ms-3' />                <Spinner animation="border" variant="warning" className='ms-3' />                <Spinner animation="border" variant="info" className='ms-3' />                <Spinner animation="border" variant="light" className='ms-3' />                <Spinner animation="border" variant="dark" className='ms-3' />            </div>            <div>                <Spinner animation="grow" variant="primary" />                <Spinner animation="grow" variant="secondary" className='ms-3' />                <Spinner animation="grow" variant="success" className='ms-3' />                <Spinner animation="grow" variant="danger" className='ms-3' />                <Spinner animation="grow" variant="warning" className='ms-3' />                <Spinner animation="grow" variant="info" className='ms-3' />                <Spinner animation="grow" variant="light" className='ms-3' />                <Spinner animation="grow" variant="dark" className='ms-3' />            </div>        </React.Fragment>    );}export default SpinnerDemo;

将它包含在 App.js 文件中，您将看到以下输出。

您已完成学习如何在 React 应用程序中安装和使用 React-Bootstrap UI 库并创建令人惊叹的应用程序。

关注七爪网，获取更多APP/小程序/网站源码资源！