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. 使用jave2将音频wav转换成mp3格式

    最近需要用到语音合成功能,网上查阅了一番,发现可以使用腾讯云的语音合成API来完成这个功能,但是腾讯云的api返回的是wav格式的音频文件,这个格式的文件有些不通用,因此需要转换成mp3格式的文件.  ...

  2. RTSP详解

    关于 RTSP. RTSP协议是一个非常类似HTTP协议的流控制协议.它们都使用纯文本来发送信息,而且rtsp协议的语法也和HTTP类似.Rtsp一开始这样设计,也是为了能够兼容使用以前写的HTTP协 ...

  3. 12. KEY_COLUMN_USAGE

    12. KEY_COLUMN_USAGE KEY_COLUMN_USAGE表描述哪些键列具有约束. KEY_COLUMN_USAGE表有以下列: CONSTRAINT_CATALOG :约束所属目录的 ...

  4. 夯实Java:从面向对象说起

    作者:伯特出处:github.com/ruicbAndroid/LoulanPlan声明:本文出自伯特的<LoulanPlan>,转载务必注明作者及出处. 刚学习 Java 那会就接触了& ...

  5. 周三面试Python开发,这几道Python面试题差点答错,Python面试题No7

    第1题:阅读下面的代码,默读出A0,A1至An的最终值. A0 = dict(zip(('a','b','c','d','e'),(1,2,3,4,5))) A1 = range(10) A2 = [ ...

  6. 【C#】【数据结构】001-线性表:顺序表

    C#数据结构:顺序表结构 1.自定义顺序表结构 using System.Collections; using System.Collections.Generic; /// <summary& ...

  7. 洛谷P4779 Dijkstra 模板

    这道题很久之前做过 今天复习(复读)一遍 有疑问的就是pair的专属头文件#include<utility> 但是据说iostream和vector等已经包含了这个 #include< ...

  8. luogu2770 航空路线问题

    前置技能:HDU3376 Matrix Again 所以看到这个题,我们也会想着用最大费用最大流解决,因为从起点飞到终点再飞回来,就等于从起点飞两次到终点且这两次飞行除了起点终点之外没有访问超过一次的 ...

  9. CactiI表结构和数据被动获取

    cacti我们也用了很久了,但是它的表结构一直都没有去关心过,得空抽了半个晚上的时间,把它的库表结构大概看了下,某些字段的含义跟大家分享下:cacti的数据都是存放在rrdtool中的,数据库存放的其 ...

  10. Android版网易云音乐唱片机唱片磁盘旋转及唱片机机械臂动画关键代码实现思路

     Android版网易云音乐唱片机唱片磁盘旋转及唱片机机械臂动画关键代码实现思路 先看一看我的代码运行结果. 代码运行起来初始化状态: 点击开始按钮,唱片机的机械臂匀速接近唱片磁盘,同时唱片磁盘也 ...