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. Windows ThinPC 7 部署后续设置与本地化

    还原注销背景 %system32%\oobe\info\backgrounds 删除该目录下所有文件后变为wes7背景 24时制与非UNICODE字符乱码解决 Control Panel \ Regi ...

  2. Ant风格表达式

    1. ?:匹配任意一个字符 *   :匹配0或者任意数量的字符 **  :匹配0或更多的目录

  3. C++-POJ2777-Count Color[线段树][lazy标记][区间修改]

     分析:https://www.bilibili.com/read/cv4777102 #include <cstdio> #include <algorithm> using ...

  4. 基于约束条件的SQL攻击

    一.背景 今天看了一篇基于约束条件的SQL攻击的文章,感觉非常不错,但亲自实践后又发现了很多问题,虽然利用起来有一定要求,不过作者的思想还是很值得学习的.原文中的主旨思想是利用数据库对空格符的特殊处理 ...

  5. apache配置跨域请求代理

    1.配置允许跨域请求 Header always set Access-Control-Allow-Origin "*"Header always set Access-Contr ...

  6. [TJOI2017] DNA - 后缀数组,稀疏表

    [TJOI2017] DNA Description 求模式串与主串的匹配次数,容错不超过三个字符. Solution 枚举每个开始位置,进行暴力匹配,直到失配次数用光或者匹配成功.考虑到容错量很小, ...

  7. JAVA 注解教程(四)Java 预置的注解

    @Deprecated 这个元素是用来标记过时的元素,想必大家在日常开发中经常碰到.编译器在编译阶段遇到这个注解时会发出提醒警告,告诉开发者正在调用一个过时的元素比如过时的方法.过时的类.过时的成员变 ...

  8. WPF学习笔记五之MVVM

    1.概念 MVVM是Model-View-ViewModel的缩写形式,它通常被用于WPF或Silverlight开发.这三者之间的关系如下图所示 模型(Model) Model——可以理解为带有字段 ...

  9. vue全局组件与局部组件

    <!DOCTYPE html> <html> <head> <title></title> </head> <script ...

  10. SpringCloud Netflix Feign

    调用其它机器上的服务(远程调用)有2种技术:REST.RPC. REST 注入RestTempalte,服务提供者的url要写成RESTful风格,在url中传递参数. 如果参数很多,url会有一长串 ...