这几天想在react中用一下bootstrap,尽管有一个适配react的很好的库叫react-bootstrap,但我还是想直接使用bootstrap

可以在react项目中执行以下命令安装bootstrap

npm install bootstrap@ --save

或是在bootstrap官网下载打包好的包直接放在react项目的src目录下

在使用的时候,直接在入口文件导入即可

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap';

PS:上述代码是使用npm安装bootstrap的导入方式,其他方式请选择正确的路径

如果现在启动项目,会报以下的错误

这是因为bootstrap依赖jQuery

网上有很多解决此类错误的方法,很多都是使用webpack进行配置,对于使用create_react_app创建的项目,由于create_react_app对webpack进行的封装,要想配置还要进行他法,感觉很麻烦,我作为一个小白,完全看不懂啊(T_T)

于是侥幸试了一下,直接在react的index.html文件中加个jQuery的引入

然后就OK了。。。

----------

如果您还有什么好的方法的话,欢迎在下面留言指导

在React中使用Bootstrap的更多相关文章

  1. 脚手架搭建的react中使用bootstrap

    1.在react的index.html文件中加个jQuery的引入 <script src="http://cdn.bootcss.com/jquery/3.3.1/jquery.mi ...

  2. 在 React项目中使用 bootstrap

    在使用create-react-app 创建的项目中使用 bootstrap; 安装react-bootstrap; npm install react-bootstrap --savenpm ins ...

  3. 基于 React.js + Redux + Bootstrap 的 Ruby China 示例 (转)

    一直学 REACT + METEOR 但路由部分有点问题,参考一下:基于 React.js + Redux + Bootstrap 的 Ruby China 示例 http://react-china ...

  4. 理解React中es6方法创建组件的this

    首发于:https://mingjiezhang.github.io/(转载请说明此出处). 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的 ...

  5. 【原】React中,map出来的元素添加事件无法使用

    在使用react中,经常用到react的map函数,用法和jquery里中的map一样,但是,如果你在每个map出来的元素中添加,你会发觉添加的事件无法关联, 比如,我们很多的评论,我需要在每个评论下 ...

  6. React中props.children和React.Children的区别

    在React中,当涉及组件嵌套,在父组件中使用props.children把所有子组件显示出来.如下: function ParentComponent(props){ return ( <di ...

  7. Django中使用Bootstrap

    一.在Django中引用Bootstrap模版 1.首先下载bootsrtap代码(http://v3.bootcss.com/getting-started/#download),并将下载后的文件放 ...

  8. Immutable 详解及 React 中实践

    本文转自:https://github.com/camsong/blog/issues/3 Shared mutable state is the root of all evil(共享的可变状态是万 ...

  9. 在ASP.NET MVC中使用 Bootstrap table插件

    Bootstrap table: http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/ 1. 控制器代码: using Syst ...

随机推荐

  1. 非web下的PowerMockito单元测试

    一.介绍 PowerMockito 可以用来 Mock 掉 final 方法(变量).静态方法(变量).私有方法(变量).想要使用 PowerMockito Mock掉这些内容,需要在编写的测试类上使 ...

  2. Quartz CronTrigger定时器表达式大全

    CronTrigger是基于Calendar-like调度的.当你需要在除星期六和星期天外的每天上午10点半执行作业时,那么应该使用CronTrigger.正如它的名字所暗示的那样,CronTrigg ...

  3. java 学习路线、java 入门、java自学、java 教程

    以前学习知识都是用到什么学什么,不是很系统.今天看到一个网站感觉挺不错的,分享给大家. 这个页面是学习路线功能的简介,如下图 ​ 点击选择学习路线 ​ 进入后可以选择循序渐进或者由终至始 ​ 上图标出 ...

  4. 洛谷 P3648 [APIO2014]序列分割

    题意简述 有一个长度为n的序列,分成k + 1非空的块, 选择两个相邻元素把这个块从中间分开,得到两个非空的块. 每次操作后你将获得那两个新产生的块的元素和的乘积的分数.求总得分最大值. 题解思路 f ...

  5. Flutter学习笔记(16)--Scaffold脚手架、AppBar组件、BottomNavigationBar组件

    如需转载,请注明出处:Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解 今天的内容是Scaffold脚手架.AppBar组件.BottomNavigationBa ...

  6. 【java提高】(18)---静态内部类和非静态内部类

    java提高](18)-静态内部类和非静态内部类 定义 放在一个类的内部的类我们就叫内部类. 自己从开发到现在其实用到内部类主要在两个地方会考虑用内部类: 1.使用静态内部类的单例模式 2.将Json ...

  7. IDEA编辑器

    一.打开含有jsx语法的文件都会显示红线,提示export declarations are not supported bu current javascript version 解决办法: 二.I ...

  8. git使用WebHook实现自动构建

    说明 我们使用git进行版本管理常常会遇到这样的一个需求,希望git push的时候服务器上代码的代码也能自动更新,这次我使用了coding进行示范 一.编写git pull 更新脚本 auth_pu ...

  9. Goland_IDE的护眼、主题、字体等设置

    Goland_IDE的护眼.主题.字体等设置 1.代码格式化 File->Settings->Tools->File Watchers->+->go fmt->将N ...

  10. IDEA部署 java Web项目 常见配置

    前言 从eclipse上转到idea上,第一次使用idea部署web项目,真折磨人,写了一个 helloworld 5分钟,了解idea部署web项目5小时. 我使用的是idea 2019.1版本,其 ...