七爪源码:在 React 中开始使用 Bootstrap

Bootstrap 是一个非常有效的前端开发工具包。 由于其预定义的实用程序类，您可以创建连贯的用户界面，而无需定义自定义 CSS。 在本文中，我们将讨论在 React 应用程序中使用它的理想方法。

在我看来，充分利用 Bootstrap 资源的最佳方式是同时使用 Bootstrap 和 React Bootstrap 库。

React Bootstrap = 基于组件的 Bootstrap 重建

使用这两个库，您可以使用 React Bootstrap 的预构建组件，例如 <Container>，甚至是复杂的组件，例如 <Button>，并使用原始 Bootstrap 类（例如 ms-2 或 text-muted）设置它们的样式。

首先，我们需要同时安装

由于 React Bootstrap 依赖于 Bootstrap，安装最新版本的 React Bootstrap 以及它开发的 Bootstrap 版本将为您提供最佳体验。 您可以在 React Bootstrap 网站上查看此信息。

显然，使用 npm

安装 BOOTSTRAP 和 REACT BOOTSTRAP

npm install react-bootstrap@2.5.0
npm install bootstrap@5.2.0

接下来，将此行添加到您的 App.tsx 文件

导入 BOOTSTRAP CSS

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

它们现在很容易在您的项目中使用。

在决定是使用 React Bootstrap 组件还是普通的 Bootstrap 类时，我采用以下方法：

我使用 React Bootstrap 的预构建，通常是包装器/父组件，并使用 Bootstrap 实用程序类来正确排列它们，以适当的间距设置它们的样式，或者偶尔修改它们的默认样式。

一些例子：

REACT BOOTSTRAP 按钮，底部有样式更改和一些边距

import { Button } from "react-bootstrap"
...
<Button
  variant='secondary'
  className='bg-light fs-2 text-muted mb-2'
>
  Click me!
</Button>

使用 <容器>

一个 REACT BOOTSTRAP 容器，带有一排和两个 COLS，使用原始 BOOTSTRAP 进行定制

import { Container, Row, Col } from "react-bootstrap"
...
<Container className='py-5'>
  <Row className='justify-content-center'>
    <Col sm='12' lg='10' className='text-dark'>
      Content... 
    </Col>
    <Col sm='12' lg='10' className='text-secondary'>
      Content... 
    </Col>
  </Row>
</Container>

使用 <表格>

也是一个带有自定义无线电输入的容器、行和列

import { Container, Row, Col, Form, FormCheck } from "react-bootstrap"
...
<Container className='py-3 py-lg-5'>
  <Row className='gy-4'>
    <Col lg='2' className='d-flex flex-column gap-2 pe-2'>
      <h3>Title</h3>
      <Form className='d-flex flex-column gap-2'>
        <FormCheck
          className='text-muted'
          type='radio'
          name='sort'
          value='newest'
          id='newest'
          label='Newest'
          checked={sort !== 'oldest'}
          onChange={() => setSort('newest')}
        />
        <FormCheck
          className='text-muted'
          type='radio'
          name='sort'
          value='oldest'
          id='oldest'
          label='Oldest'
          checked={sort === 'oldest'}
          onChange={() => setSort('oldest')}
        />
      </Form>
    </Col>
  </Row>
</Container>

我希望你发现这对你寻找新的学习材料很有用。 感谢您抽出时间来阅读！

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