这几天想在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. 基于Spring框架应用的权限控制系统的研究和实现

    摘 要: Spring框架是一个优秀的多层J2EE系统框架,Spring本身没有提供对系统的安全性支持.Acegi是基于Spring IOC 和 AOP机制实现的一个安全框架.本文探讨了Acegi安全 ...

  2. .net持续集成测试篇之Nunit参数化测试

    系列目录 在进行单元测试的时候,很多时候,很多时候我们都是在单元测试方法内部提供特定的值,但是这样测试往往造成样本数不足从而导致覆盖的结果不够全面,很多时候我们更想提供来自外部的,满足条件的一组值来进 ...

  3. Altium Designer16设置GND和VCC线宽规则的一种操作方法及注意事项

    昨天看到学弟在画电路板,看到他设置电源线线宽时出了一点问题,设置的规则最开始有作用,后来重新从原理图导入更新PCB时,电源线变绿,规则设置点更新也没有用.接下来是操作步骤: 第一步:点击Design- ...

  4. ride.py在运行python3.×版本后导致无法运行及解决办法

    最近一直在自学python自动化,网上看到rf框架挺适合初学自动化测试,于是通过虫师的搭建了rf框架, 但是在使用过程中遇到了一个问题,在网上没有找到明确解决办法于是想到记录一下 之前为了搭建rf框架 ...

  5. No!No!No! It's not fashion!

    还记得搞怪的hold住姐Miss Lin么,对于人们常规的行为,Miss Lin会挑起夸张的眉毛说:"Oh my God, it's not fashion!".如果程序员圈子里有 ...

  6. javaScript基础-03 javascript语句

    一. 声明语句 var和function都是声明语句.声明或定义变量或函数. var 声明一个或者多个变量.语法如下: var a ; var b = 1; var c, d; var e = 3; ...

  7. centos7单机安装kafka,进行生产者消费者测试

    [转载请注明]: 原文出处:https://www.cnblogs.com/jstarseven/p/11364852.html   作者:jstarseven    码字挺辛苦的.....  一.k ...

  8. Mac如何前往文件夹 修改hosts文件 显示隐藏文件 Mac如何查看剪切板

    Mac 如何前往文件夹 首先,回到桌面,或者点击Finder(访达) 然后输入快捷键 ⌘ Command + ⇧ Shift + G 或者在Finder上方状态栏中点击‘前往’>>> ...

  9. 车载多传感器融合定位方案:GPS +IMU+MM

    导读 高德定位业务包括云上定位和端上定位两大模块.其中,云上定位主要解决Wifi指纹库.AGPS定位.轨迹挖掘和聚类等问题:端上定位解决手机端和车机端的实时定位问题.近年来,随着定位业务的发展,用户对 ...

  10. netty源码解解析(4.0)-18 ChannelHandler: codec--编解码框架

    编解码框架和一些常用的实现位于io.netty.handler.codec包中. 编解码框架包含两部分:Byte流和特定类型数据之间的编解码,也叫序列化和反序列化.不类型数据之间的转换. 下图是编解码 ...