在 React 中开始使用 Bootstrap

2022-09-12 10:01:29 阅读：269 来源： 互联网

标签：... bootstrap Bootstrap React 导入使用

在 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

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

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

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

在 React 中开始使用 Bootstrap

在 React 中开始使用 Bootstrap

一些例子：