七爪源码:React-Bootstrap UI 库入门

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

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

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

1. 安装 React-Bootstrap
2. 将资产文件导入应用程序
3. 导入组件
4. 使用组件

第 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/小程序/网站源码资源！