在 React 中开始使用 Bootstrap

在 React 中开始使用 Bootstrap

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

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

React Bootsrap = 基于组件的 Bootstrap 重建

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

首先，我们需要同时安装

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

显然，使用 npm

安装引导和反应引导 npm install [email protected]
npm install [email protected]

接下来，将此行添加到您的 应用程序.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'
>
点我！

使用 <Container>

一个带有一行和两个列的反应引导容器，使用原始引导进行定制 从“react-bootstrap”导入 { Container, Row, Col }
...



内容...


内容...

使用 <Form>

也是一个带有定制无线电输入的容器、行和列 从“react-bootstrap”导入 { Container, Row, Col, Form, FormCheck }
...

标题

<FormCheck
className='文本静音'
类型='收音机'
名称='排序'
值='最新的'
id='最新的'
标签='最新的'
检查={排序！=='最旧的'}
onChange={() => setSort('newest')}
/>
<FormCheck
className='文本静音'
类型='收音机'
名称='排序'
值='最旧的'
id='最旧的'
标签='最旧的'
已检查={排序 === '最旧的'}
onChange={() => setSort('oldest')}
/>

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

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

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

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

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