1.在react的index.html文件中加个jQuery的引入

<script src="http://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

2.安装react-bootstrap

　　npm install react-bootstrap --save

安装bootstrap

　　npm install bootstrap@3.3.7 --save

3.在使用时，直接在入口文件导入

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

　　improt 'bootstrap/dist/js/bootstrap'

4.引入需要的组件

　　import {Navbar} from 'react-bootstrap'

脚手架搭建的react中使用bootstrap的更多相关文章

  1. 在React中使用Bootstrap

    这几天想在react中用一下bootstrap,尽管有一个适配react的很好的库叫react-bootstrap,但我还是想直接使用bootstrap 可以在react项目中执行以下命令安装boot ...

  2. create-react-app搭建的项目中添加bootstrap

    react-bootstrap是一个非常受欢迎的针对react封装过的bootstrap,它本身不包含css,所以也是需要使用bootstrap原生库. 在create-react-app建的项目目录 ...

  3. react脚手架搭建命令 react常用库

    react项目一般需要的组件库     react-redux     状态管理库     react-router-dom    路由     sass /less     style-compon ...

  4. 让vue-cli脚手架搭建的项目可以处理vue文件中postcss语法

    图中&属于postcss的语法,这样书写样式可以清楚的看出选择器之前的层级关系,非常好用. 在利用vue-cli脚手架搭建的项目中如果不配置是不支持这种写法的,这样写不会报错,但是样式不生效. ...

  5. 【webpack系列】从零搭建 webpack4+react 脚手架（一）

    搭建一个React工程的方式有很多,官方也有自己的脚手架,如果你和我一样,喜欢刨根究底,从零开始自己一行一行代码创建一个React脚手架项目,那你就来对地方了.本教程是针对React新手,以及对web ...

  6. react脚手架搭建1

    23:01:17 react脚手架搭建 (个人用的是webstorm,所以分享下webstorm中的创建react脚手架项目的方法) 1.创建新项目(前提是下载nodejs环境) 2.下载好在webs ...

  7. react+redux+generation-modation脚手架搭建一个todolist

    TodoList 1. 编写actions.js 2. 分析state 试着拆分成多个reducer 3. 了解store 4. 了解redux数据流生命周期 5. 分析容器组件和展示组件 搞清楚,数 ...

  8. 【每天学一点-04】使用脚手架搭建 React+TypeScript+umi.js+Antd 项目

    一.使用脚手架搭建项目框架 1.首先使用脚手架搭建React项目(React+TypeScript+Umi.js) 在控制台输入命令:yarn create @umijs/umi-app 2.引入An ...

  9. 在 React项目中使用 bootstrap

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

随机推荐

  1. MongoDB的安装问题

    Mongo的安装与启动: npm install mongodb -g MongoDB高性能.开源.无模式的文档型数据库,它基于分布式文件存储.介于关系数据库和非关系数据库之间的一种产品.其最大特点: ...

  2. winform DataGrid排序、去掉第一的空白列

    排序: dataGridView1.Sort(dataGridView1.Columns[3], ListSortDirection.Descending); 去掉空白列: dataGridView1 ...

  3. 162.扩展User模型-使用Proxy模型

    扩展用户模型: Django内置的User模型虽然已经足够强大了,但是有时候还是不能满足我们的需求,比如在验证用户登录的时候,它用的是用户名作为验证,而我们有时候需要通过手机号码或者是邮箱进行验证,还 ...

  4. SpringBoot整合WEB开发--（七）注册拦截器

    1.创建一个拦截器类实现HandlerInterceptor接口,重写其中的3个方法,这拦截器中方法的执行顺序为:preHandle--Controller--postHandle--afterCom ...

  5. blob - 二进制文件流下载

    /** * 返回值文件类型为 blob 二进制流文件 * responseType: 'blob' * params 接口所需参数 * 命名文件名:依据时间戳命名文件名 * (导出时需要延迟,否则导出 ...

  6. 为QT应用程序添加图标 转

    第1,第2种方法经本人验证可行 1:通过qmake生成makefile实现过程: (1) 找到一张图片.ico,名字改为myappico.ico: (2) 创建一个新的文本文档,内部添加  IDI_I ...

  7. ntpq -p命令详解

    ntpq用来监视ntpd操作,ntpq -p查询网络中的NTP服务器,同时显示客户端和每个服务器的关系 [root@localhost ~]# ntpq -p     remote           ...

  8. CodeForces -1216B.Shooting

    水题 #include <cstdio> #include <algorithm> using namespace std; ; struct node{ int s, f; ...

  9. Echat 地图样式格式

    1.白色 mapStyle: { styleJson: [{ 'featureType': 'water', 'elementType': 'all', 'stylers': { 'color': ' ...

  10. TD - 数据验证

    基本方法 this.assetCounts.focus();//聚焦 this.btnSave.cancel();//按钮取消 this.assetPerson.isValid()//是否有效,tru ...