react-bootstrap是一个非常受欢迎的针对react封装过的bootstrap,它本身不包含css,所以也是需要使用bootstrap原生库。

在create-react-app建的项目目录中安装react-bootstrap。

npm install react-bootstrap --save

安装bootstrap。

npm install bootstrap@3.3.7 --save

在index.js文件中增加css引用。

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';

在需要用到bootstrap组件的代码中,引入所需组件。

import { Navbar, Jumbotron, Button } from 'react-bootstrap';

react-bootstrap参考:

https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-bootstrap

https://react-bootstrap.github.io/getting-started.html

react 项目中 引入 bootstrap的更多相关文章

  1. 前端学习笔记系列一:10整体移动vscode代码块、VSCode 使用 stylus,配置格式化设置、在vue项目中引入bootstrap

    1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...

  2. react项目中引入了redux后js控制路由跳转方案

    如果你的项目中并没有用到redux,那本文你可以忽略 问题引入 纯粹的单页面react应用中,通过this.props.history.push('/list')就可以进行路由跳转,但是加上了redu ...

  3. 在 React项目中使用 bootstrap

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

  4. 【React踩坑记四】React项目中引入并使用js-xlsx上传插件(结合antdesign的上传组件)

    最近有一个前端上传并解析excel/csv表格数据的需求. 于是在github上找到一个14K star的前端解析插件 github传送门 官方也有,奈何实在太过于浅薄.于是做了以下整理,避免道友们少 ...

  5. 【React踩坑记五】React项目中引入并使用react-ace代码编辑插件(自定义列表提示)

    最近有一个引入sql编辑器插件的需求,要求代码高亮显示,代码智能提示,以及支持自定义代码提示列表等功能.中途在自定义代码提示列表中由于没有相关demo,所以踩了一些坑,遂将其整理如下,以便日后查看. ...

  6. 在 React 项目中引入 GG-Editor 编辑可视化流程

    蚂蚁金服数据可视化团队曾经开源了一款G6-Editor,但后来停止了对外支持,学习成本太高 好在后来他们团队的大牛高力结合 React + G6 开源了一个 GG-Editor(其实就是G6-Edit ...

  7. vue项目中引入bootstrap

    (1)引入Jquery文件,需要在bootstrap.min.js 之前引入. 1.npm install jquery --save-dev 2. plugins: [ new webpack.Pr ...

  8. 在Vue-cli项目中引入Bootstrap

    (1)到bootstrap官网下载所需版本的bootstrap.zip文件. (2)将bootstrap.min.css以及bootstrap.min.js解压到assets文件夹,另外还需要将fon ...

  9. react项目中引入百度地图打包报错问题

    一.我正常引入百度地图,调试时候是好使的,但是打包时候就报错 引入方法如下: 报错如图 正常调试是好使的,但是打包报这个错,解析不了这个BMap,那么怎么办呢? 然后我就转用了window办法,虽然因 ...

随机推荐

  1. 测试常用的linux命令

    一.系统 1.halt:         关机   poweroff: 关机 2.reboot:     重启 二.处理目录和文件的命令 1.ll:     显示文件详细信息 ls:    显示文件目 ...

  2. ubuntu18.04server 真机无法自动获取IP解决方法

    输入命令ip a,查看自己网卡编号,比如我的就是ens33 因为此图为虚拟机搭建的,所以网卡名称为ens33,如果是真机的话则是enp0s**的名字 2.修改netwlpan文件 1 sudo vim ...

  3. 枚举为何不能设置成public?

    听到测试与开发争论,为何枚举不能用public,用public怎么了?对于这个我也不知道到底能不能用,于是就去查了查资料. 解答: 枚举被设计成是单例模式,即枚举类型会由JVM在加载的时候,实例化枚举 ...

  4. 自定义ngCloak

    场景: 一个非常复杂的表单页面,页面有5个标签,第五个标签中又有5个标签,也就是说一共有9个标签,每个标签中都有一个表单,表单之间相互关联.所有表单项(包括复合的),有80多个数据.全部东西写在一个h ...

  5. 使用pymysql 操作MySQL数据库

    安装 pip install pymysql 注:连接前要有可使用的账户及有权限.可操作的数据库 先来一个栗子: import pymysql # 连接database conn = pymysql. ...

  6. ACM模板(Java)

    模板 Trie HIHOCODER1014 static final int N = (int)1e5+10; static final int SIGMA=(int)27; static int c ...

  7. CentOS 7中设置PHP7的Log文件日志

    对于服务器上面运行的php代码, 想要去查看对应的log,找到代码无法运行的原因 1.通过:phpinfo()去找 error_log 结果得到: 2.然后去编辑php.ini,修改三处地方 vi / ...

  8. reactNative 介绍

    React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的UI框架 React 在原生移动应用平台的衍生产物,目前支持iOS和安 ...

  9. shell if判断总结

    一.if的基本语法: if [ command ];then    符合该条件执行的语句 elif [ command ];then    符合该条件执行的语句 else    符合该条件执行的语句 ...

  10. 【转载】CentOS6.5升级手动安装GCC4.8.2

    一.简易安装 操作环境 CentOS6.5 64bit,原版本4.4.7,不能支持C++11的特性~,希望升级到4.8.2 不能通过yum的方法升级,需要自己手动下载安装包并编译 1.1 获取安装包并 ...