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. Open Cascade创建自己的MFC文档程序

    项目初始设置在Visual studio中创建一个单文档MFC项目(本例以MFCTest为名称): 在项目属性的VC++页面设置包含目录.库目录,在链接器的输入中添加OCC库目录下的所有.lib文件名 ...

  2. 用固定长度的数组实现stack queue

    package my_basic.class_3; /** * 用数组结构实现大小固定的队列和栈 */ public class Code_01_Array_stack_queue { public ...

  3. python基础(二) —— 流程控制语句

    编程语言中的流程控制语句分为以下几类: 顺序语句 分支语句 循环语句 其中顺序语句不需要单独的关键字来控制,就是按照先后顺序一行一行的执行,不需要特殊的说明. 下面主要是 分支语句 和 循环语句的说明 ...

  4. 二手GTX650

    某鱼入手一二手华硕显卡GTX650 店主信誉挺高的,到手图片 我K,被骗了翻新的假显卡,华硕没有过这个样式的GTX650啊,还是新的散热风扇及前挡板,不管了先把风扇拆了,竟然连风扇散热硅脂都是刚刚涂上 ...

  5. Linux组和提权

    目 录 第1章 组命名管理**    1 1.1 group组信息和密码信息    1 1.1.1 /etc/group 组账户信息    1 1.1.2 /etc/gshadow 组密码信息     ...

  6. css搞定所有垂直居中问题

    单行文本 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  7. blocking and nonblocking assign

    key word: 仿真建模  clock采样block/nonblock blocking时,有时候clk会sample edge后的data: nobocking时,clk sample 以前的d ...

  8. Oracle中有关日期的语法

    Oracle中有关日期的语法 Oracle提供了丰富的日期函数.利用日期函数可以灵活的对日期进行运算. to_date()函数——将字符串转换为日期型 to_date()函数用于将字符串转换为日期.被 ...

  9. P1027 car的旅行路线

    car的旅行路线 洛谷链接 这个题关键就是 如何把每个点表示出来,其实求出四个点的坐标后,只需要把这些点连接起来,用一遍folyed求出最短路径就好了. 代码: #include<cmath&g ...

  10. 51nod1135 原根

    原根判定:$m>2$,$\varphi (m)$的不同素数是$q_1,q_2,……,q_s$,$(g,m)=1$,则$g$是$m$的一个原根的充要条件是$g^{\frac{\varphi(m)} ...