在 React 中开始使用 Bootstrap

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

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

  React Bootsrap = 基于组件的 Bootstrap 重建

通过这两个库，您可以使用 React Bootstrap 的预构建组件，例如 <Container> ，甚至是复杂的，比如 <Button> ，并使用原始的 Bootstrap 类来设置它们的样式，例如 女士-2 或者 文本静音 .

首先，我们需要同时安装

  由于 React Bootstrap 依赖于 Bootstrap，安装最新版本的 React Bootstrap 以及它开发的 Bootstrap 版本将为您提供最佳体验。您可以在以下位置查看此信息[ 反应引导网站](https://react-bootstrap.github.io/) .

显然，使用 npm

  安装引导和反应引导 npm install [[email protected]](/cdn-cgi/l/email-protection)  
 npm install [[email protected]](/cdn-cgi/l/email-protection)

接下来，将此行添加到您的 应用程序.tsx 文件

  导入引导 CSS 导入'bootstrap/dist/css/bootstrap.min.css'

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

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

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

一些例子：

  **带有样式更改和底部边缘的反应引导按钮** 从“react-bootstrap”导入 { Button }  
 ...  
 <Button  
 变体='次要'  
 className='bg-light fs-2 文本静音 mb-2'  
 >  
 点我！  
 </Button>

使用 <Container>

  **一个带有一行和两个列的反应引导容器，使用原始引导进行定制** 从“react-bootstrap”导入 { Container, Row, Col }  
 ...  
 <Container className='py-5'>  
 <Row className='justify-content-center'>  
 <Col sm='12' lg='10' className='text-dark'>  
 内容...  
 </Col>  
 <Col sm='12' lg='10' className='text-secondary'>  
 内容...  
 </Col>  
 </Row>  
 </Container>

使用 <Form>

  **也是一个带有定制无线电输入的容器、行和列** 从“react-bootstrap”导入 { Container, Row, Col, Form, FormCheck }  
 ...  
 <Container className='py-3 py-lg-5'>  
 <Row className='gy-4'>  
 <Col lg='2' className='d-flex flex-column gap-2 pe-2'>  
 <h3>标题</h3>  
 <Form className='d-flex flex-column gap-2'>  
 <FormCheck  
 className='文本静音'  
 类型='收音机'  
 名称='排序'  
 值='最新的'  
 id='最新的'  
 标签='最新的'  
 检查={排序！=='最旧的'}  
 onChange={() => setSort('newest')}  
 />  
 <FormCheck  
 className='文本静音'  
 类型='收音机'  
 名称='排序'  
 值='最旧的'  
 id='最旧的'  
 标签='最旧的'  
 已检查={排序 === '最旧的'}  
 onChange={() => setSort('oldest')}  
 />  
 </Form>  
 </Col>  
 </Row>  
 </Container>

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

☕️如果您从我的文章中理解了一些更好的东西，您可以通过请我喝咖啡来支持我： https://www.buymeacoffee.com/daanworks

订阅我的电子邮件列表，并在此处或上关注我 推特 如果你以后想读更多这样的故事

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/30422/50471209

标签：...,bootstrap,Bootstrap,React,导入,使用
来源： https://www.cnblogs.com/amboke/p/16685549.html