当前位置：网站首页 > IT知识 > 正文

如何在ReactJS中使用Bootstrap?

liuian 2024-12-11 15:44 24 浏览

作者：Creative Tim

译者：Echa 攻城狮

转发链接：https://www.creative-tim.com/blog/web-design/how-to-use-bootstrap-with-reactjs/

前言

毫无疑问，构建强大的Web应用程序时，Bootstrap和ReactJS仍然是最受欢迎的选择。在ReactJS中使用本机Bootstrap并不像看起来那样容易。但是，可以使用不同的方法。

为什么将Bootstrap组件包含在React中具有挑战性？

React是一个简单的库，用于创建交互式前端网页，其基于组件的体系结构可以嵌套或并排放置。因此，将第三方库添加到React很容易。

但是，Bootstrap在很大程度上依靠jQuery来为其用户界面组件提供动力。由于jQuery直接操作文档对象模型（DOM），因此Bootstrap与React固有的声明方法相矛盾。如果您希望包含一个带有响应式12列网格的香草Bootstrap样式表或不涉及jQuery的组件，则可以轻松地将这些组件添加到React中。但是，不能以这种方式集成依赖jQuery的组件。

因此，要将Bootstrap与ReactJS一起使用，必须有一种方法来删除Bootstrap的jQuery依赖关系。

如何在ReactJS中使用Bootstrap？

选项1：将原始CSS Bootstrap文件包含到ReactJS中

将Bootstrap与ReactJS一起使用的第一个选择是将原始CSS Bootstrap文件包含在ReactJS中。

1.使用以下命令在您的系统中创建一个新的默认Create React App项目：

npx create-react-app my-project

上面的命令使用基本模板创建项目。要使用其他可用模板创建项目，请执行以下命令：

npx create-react-app my-project–template [template-name]

您可以通过在npm上搜索“ cra-template- *”来找到可用模板的列表。模板通常以“ cra-template- [template-name]”格式命名。只需在上面的命令中输入所需的模板名称即可。

2.使用以下命令运行新项目

使用以下命令导航到新项目：

cd my-project

使用以下命令启动npm：

npm start

3.将Bootstrap样式表链接到ReactJS。

使用以下命令安装Bootstrap：

npm install bootstrap

在create-react-app软件包的src / index.js或App.js文件中包含以下代码：

导入“ bootstrap / dist / bootstrap.min.css”；

现在，您可以在Bootstrap样式表成功集成到React应用程序后，将Bootstrap类与ReactJS代码一起使用。

为了最好地使用ReactJS，将Bootstrap类作为React组件导入将是理想的。幸运的是，这是通过利用第三方库（如react-bootstrap和reactstrap）来完成的。

选项2：使用react-bootstrap库

的反应的自举库是替换引导JavaScript和已经从头开始建立为一个真正阵营成分，通过除去jQuery的依赖关系最常用的库之一。该库的最新版本仅支持Bootstrap v4。

安装react-bootstrap库

要使用该库，可以使用以下命令进行安装：

npm install react-bootstrap引导程序

使用react-bootstrap的组件

要使用这些组件，只需导入单个组件（例如react-bootstrap / Button）而不是整个库。这样可以确保仅提取您使用的组件，从而减少了发送给客户端的代码。

从“ react-bootstrap / Button”导入Button；

可用的组件包括警报，手风琴，徽章，面包屑，按钮，按钮组，卡片，轮播，下拉菜单，表单，输入组，图像，图形，巨型机，列表组，模式，导航，导航栏，覆盖图，分页，弹出窗口，进度，微调框，表格，表格，工具提示和图示。

导入样式表

尽管react-bootstrap不一定依赖于Bootstrap的非常精确的版本，但仍需要某些样式表才能使用这些组件。运行以下命令：

npm安装引导程序

现在，您可以在src / index.js或App.js文件中包含以下代码：

导入“ bootstrap / dist / css / bootstrap.min.css”；

萨斯

如果使用的是Sass，请确保安装了node-sass软件包。然后，您可以在主Sass文件中包含Bootstrap的源Sass文件。这适用于典型的create-react-app应用程序。在您的src / App.scss文件中包含以下代码。

导入“?bootstrap / scss / bootstrap”；

选项3：使用reactstrap库

该reactstrap库已明确被用于引导V4使用创建的，它可以让你相关的引导组件导入到你的ReactJS项目。

安装reactstrap库

要使用该库，可以使用以下命令进行安装：

npm install reactstrap react react-dom

使用reactstrap的组件

要使用相关的组件，您可以简单地导入所需的组件而不是整个库。这样可以确保仅提取您使用的组件，从而减少了发送给客户端的代码。例如：

import { Button } from ‘reactstrap’;

可用的组件包括警报，徽章，面包屑，按钮下拉菜单，按钮组，按钮，卡片，轮播，折叠，下拉菜单，淡入淡出，表单，输入组，巨型机，布局，列表组，媒体，模式，导航栏，导航，分页，弹出窗口，进度，微调框，表格，标签，祝酒词和工具提示。

导入样式表

为了使您按预期工作，您需要手动添加Bootstrap CSS。运行以下命令：

npm安装引导程序

并且，通过包含以下代码，将Bootstrap CSS导入到reactstrap的src / index.js文件中：

导入“ bootstrap / dist / css / bootstrap.css”；

选项4：其他第三方模块

react-bootstrap和reactstrap还有其他选项，可用于有效地将新的Bootstrap之类的组件用于ReactJS。例子包括react-bootstrap-table2之类的东西，react-bootstrap-table的重建。

顾名思义，react-bootstrap-table2显式用于创建Web应用程序的动态表。由于名称已经在npm上使用，因此此模块的安装需要运行以下命令：

npm install react-bootstrap-table-next

安装后，需要在使用模块之前将react-bootstrap-table2 CSS添加到应用程序中。在使用该模块之前，请添加以下代码：

导入“ react-bootstrap-table-next / dist / react-bootstrap-table2.min.css”；

结论

用于在Bootstrap中包含Bootstrap的选项取决于您使用的Bootstrap版本，所需组件的类型以及所需的灵活性。

如何在ReactJS中使用Bootstrap?

前言

为什么将Bootstrap组件包含在React中具有挑战性？

如何在ReactJS中使用Bootstrap？

选项1：将原始CSS Bootstrap文件包含到ReactJS中

选项2：使用react-bootstrap库

选项3：使用reactstrap库

选项4：其他第三方模块

结论

推荐React 学习相关文章

相关推荐

Python实现人事自动打卡，再也不会被批评

Psutil + Flask + Pyecharts + Bootstrap 开发动态可视化系统监控

一个解决支持HTML/CSS/JS网页转PDF(高质量)的终极解决方案

再见Swagger UI 国人开源了一款超好用的 API 文档生成框架，真香

【验证码逆向专栏】vaptcha 手势验证码逆向分析

网页转成pdf文件的经验分享网页转成pdf文件的经验分享怎么弄

C++ std::vector 简介

python使用fitz模块提取pdf中的图片

《人人译客》如何规划你的移动电商网站(2)

Jupyterhub安装教程 jupyter怎么安装包

如何在ReactJS中使用Bootstrap?

前言

为什么将Bootstrap组件包含在React中具有挑战性？

如何在ReactJS中使用Bootstrap？

选项1：将原始CSS Bootstrap文件包含到ReactJS中

选项2：使用react-bootstrap库

选项3：使用reactstrap库

选项4：其他第三方模块

结论

推荐React 学习相关文章

相关推荐

Python实现人事自动打卡，再也不会被批评

Psutil + Flask + Pyecharts + Bootstrap 开发动态可视化系统监控

一个解决支持HTML/CSS/JS网页转PDF(高质量)的终极解决方案

再见Swagger UI 国人开源了一款超好用的 API 文档生成框架，真香

【验证码逆向专栏】vaptcha 手势验证码逆向分析

网页转成pdf文件的经验分享 网页转成pdf文件的经验分享怎么弄

C++ std::vector 简介

python使用fitz模块提取pdf中的图片

《人人译客》如何规划你的移动电商网站(2)

Jupyterhub安装教程 jupyter怎么安装包

网页转成pdf文件的经验分享网页转成pdf文件的经验分享怎么弄