在 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 版本将为您提供最佳体验。您可以在以下位置查看此信息[ 反应引导网站](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 版权协议，转载请附上原文出处链接和本声明
