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. DFS || HDU 2181

    题意:一个规则的实心十二面体,它的 20个顶点标出世界著名的20个城市,你从一个城市出发经过每个城市刚好一次后回到出发的城市. 前20行的第i行有3个数,表示与第i个城市相邻的3个城市.第20行以后每 ...

  2. java内存模型(线程独占部分)

    线程独占部分 1.你了解Java的内存模型吗? 内存简介 有内核空间.用户空间(java是运行在用户空间上) 32位系统--->最大的访问内存大小是4G 62位系统--->最大的访问内存大 ...

  3. h lib dll文件相关部分

    参考:https://www.cnblogs.com/azbane/p/7364060.html 只对其中自己用得到的重点做了个笔记. 1..h头文件是编译时必须的,lib是链接时需要的,dll是运行 ...

  4. Hash冲突的几种解决方法

    1. 开放定值法: 也叫再散列法,当关键字key的哈希地址p=H(key)出现冲突时,以p为基础,产生另一个哈希地址p1,如果p1仍然冲突,再以p为基础,产生另一个哈希地址p2,…,直到找出一个不冲突 ...

  5. Java多线程的内存模型和Thread状态切换

    线程的内存模型 32位操作系统的寻址空间为2的32次方,也就是4GB的寻址空间:系统在这4GB的空间里划分出1GB的空间给系统专用,称作内核空间,具有最高权限:剩下3GB的空间为用户空间(一般JVM的 ...

  6. Linux CentOS 知识和常用命令

    1.常用热键 [Tab]它具有“命令补全”与“文件补全”的功能[Ctrl+C]中断执行中的程序组合键[Ctrl+d]键盘输入结束.也可以用来替代 exit 2.Linux 常用编辑器 vi 和 vim ...

  7. 蓝牙bluez学习(1) Stack Architecture

    Bluez支持的features Core Specification 4.2 (GAP, L2CAP, RFCOMM, SDP, GATT) Classic Bluetooth (BR/EDR) B ...

  8. 【HDU 3037】Saving Beans(卢卡斯模板)

    Problem Description Although winter is far away, squirrels have to work day and night to save beans. ...

  9. Spring拓展接口之BeanPostProcessor,我们来看看它的底层实现

    前言 开心一刻 小明:“妈,我被公司开除了”,妈:“啊,为什么呀?”, 小明:“我骂董事长是笨蛋,公司召开高层会议还要起诉我”,妈:“告你诽谤是吧?”,小明:“不是,他们说要告我泄露公司机密” Bea ...

  10. 75. Spring Boot 定制URL匹配规则【从零开始学Spring Boot】

    在之前有一篇文章说了,博客名称从原来的<从零开始学Spring Boot>更改为<Spring Boot常见异常汇总>,后来写了几篇文章之后发展,有些文章还是一些知识点,所以后 ...