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. FastDFS和集中存储方式对比

    指标 FastDFS   NFS  集中存储设备如NetApp.NAS 线性扩容性  高  差  差 文件高并发访问性能 高 差  一般 文件访问方式 专有API POSIX  支持POSIX 硬件成 ...

  2. [模板] Exgcd

    求解一组ax+bc=gcd(a,b) #include<iostream> #include<cstdio> using namespace std; int exgcd(in ...

  3. Spring AOP 详细介绍

    一.理解 “面向切面编程” 面向切面编程(Aspect Oriented Programming,AOP)是软件编程思想发展到一定阶段的产物,是对面向对象编程(Object Oriented Prog ...

  4. Java多线程入门Ⅱ

    线程的让步 线程让出自己占用的CPU资源 线程让出资源,不指定让给谁 线程让出资源,指定让给谁 方法1: public static void yield(); 线程实现交替打印 import jav ...

  5. 【HIHOCODER 1325】 平衡树·Treap

    描述 小Ho:小Hi,我发现我们以前讲过的两个数据结构特别相似. 小Hi:你说的是哪两个啊? 小Ho:就是二叉排序树和堆啊,你看这两种数据结构都是构造了一个二叉树,一个节点有一个父亲和两个儿子. 如果 ...

  6. Tomcat启动慢（运行shutdown.sh的时候报错）

    Using CATALINA_BASE: /usr/local/tomcatUsing CATALINA_HOME: /usr/local/tomcatUsing CATALINA_TMPDIR: / ...

  7. 在mysql的操作界面中,如何清屏幕

    1.快捷键:Ctrl+L2.通过执行SHELL命令: \! clear实际上 \! 用来执行操作系统的shell命令,不仅是clear,其他命令也可以.shell命令执行完成后,会返回mysql Us ...

  8. python模块以及导入出现ImportError: No module named ‘xxx‘问题

    python中,每个py文件被称之为模块,每个具有__init__.py文件的目录被称为包.只要模块或者包所在的目录在sys.path中,就可以使用import 模块或import 包来使用如果你要使 ...

  9. HDU-2509-Be the Winner,博弈题~~水过~~

    Be the Winner Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ht ...

  10. [Go]程序实体

    Go语言中的程序实体包括变量.常量.函数.结构体.接口 1.常见声明变量的方式 package main import ( "flag" "fmt" ) fun ...