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

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

  1. npm install react-bootstrap --save

安装bootstrap。

  1. npm install bootstrap@3.3.7 --save

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

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

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

  1. 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. css3新增属性：多列(column)

    css3多列能够创建多个列来对文本进行布局,就想报纸那样. 关于多列的相关属性及属性值如下: column-count: number|auto;:指定元素应分为的列数.column-fill: 指定 ...

  2. eclipse下svn的分支与合并指南 - 更新版

    http://wenku.baidu.com/link?url=ul5vzBHZpHgzENp46RQwTYrkCUYLeVg9TuhmPM_qisR1BGzp6Qca7onhS-SOzwDYuYdA ...

  3. poj2368 Buttons

    题目描述 题解: 非常简单的巴什博弈问题. 简单来说保证$L+1$是$K$的因数即可. 决策是,先手取$x$个,后手就取$L+1-x$个. 那个$L>=2$真的很坑. 代码: #include& ...

  4. Css选择器和JQuery基本编程接口

    使用JQuery之前,首先从官网下载库文件 http://jquery.com/ jquery-2.1.4.js和jquery-2.1.4.min.js,前者是完整无压缩版本,用于开发调试:后者是压缩 ...

  5. API对接中经常会出现的签名获取，这只是某一种，仅供给有需要的人参考

    要求: 1.对所有传入参数(含系统参数和接口参数)按照字段名的 ASCII 码从小到大排序(字典序)后,使用 URL 键值对的格式.(即 key1=value1&key2=value2…)拼接 ...

  6. Turtle库学习

    Python Turtle (Python绘图工具) 导入库 import turtle as t ps:为了方便调用我们这里给这个模块在本程序内重命名为 t 1. 画布 顾名思义就是用于绘图的区域 ...

  7. Python-接口自动化（十一）

    配置文件的作用(十一) (十二)配置文件 1.python当中有一个模块可以读取配置文件里面的信息:configparser,对这个模块进行导入之后就可以使用了,import configparser ...

  8. 关于Kubernetes v1.14.0的 kube-controller-manager部署

    1. kube-controller-manager准备 默认kube-controller-manager 部署在kube-apiserver部署的服务器上面服务器的配置等在这就不在列出来 二进制文 ...

  9. SQL 一次插入多条记录

    本文介绍如何快速插入多条数据到数据表中,以满足sql语句学习或项目测试的需要. 本文非原创,是对移步原文的重新整理. 如有以下表格,如图: 1,原始添加记录的方式,sql语句如下: insert in ...

  10. BeautifulSoup4系列二

    前言 本篇详细介绍beautifulsoup4的功能,从最基础的开始讲起,让小伙伴们都能入门 一.读取HTML页面 1.先写一个简单的html页面,把以下内容copy出来,保存为html格式文件 &l ...