在使用create-react-app 创建的项目中使用 bootstrap; 安装react-bootstrap;

npm install react-bootstrap --save
npm install bootstrap@3 -D

2018-12-20

然后在index.js中引入

import './bootstrap/dist/css/bootstrap.css';

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

在需要使用bootstrap 的组件中，引入所需要的组件；

import { Navbar, Nav, NavItem } from 'react-bootstrap'; // 导航组件

npm start 就可以使用了　！

在 React项目中使用 bootstrap的更多相关文章

  1. react 项目中 引入 bootstrap

    react-bootstrap是一个非常受欢迎的针对react封装过的bootstrap,它本身不包含css,所以也是需要使用bootstrap原生库. 在create-react-app建的项目目录 ...

  2. 如何在非 React 项目中使用 Redux

    本文作者:胡子大哈 原文链接:https://scriptoj.com/topic/178/如何在非-react-项目中使用-redux 转载请注明出处,保留原文链接和作者信息. 目录 1.前言 2. ...

  3. 如何优雅地在React项目中使用Redux

    前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...

  4. react项目中实现元素的拖动和缩放实例

    在react项目中实现此功能可借助 react-rnd 库,文档地址:https://github.com/bokuweb/react-rnd#Screenshot .下面是实例运用: import ...

  5. React项目中实现右键自定义菜单

    最近在react项目中需要实现一个,右键自定义菜单功能.找了找发现纯react项目里没有什么工具可以实现这样的功能,所以在网上搜了搜相关资料.下面我会附上完整的组件代码. (注:以下代码非本人原创,具 ...

  6. React项目中使用Mobx状态管理（二）

    并上一节使用的是普通的数据状态管理,不过官方推荐使用装饰器模式,而在默认的react项目中是不支持装饰器的,需要手动启用. 官方参考 一.添加配置 官方提供了四种方法, 方法一.使用TypeScrip ...

  7. vue-cli+webpack在生成的项目中使用bootstrap方法（二）

    vue-cli+webpack在生成的项目中使用bootstrap方法(一)中,是通过手动下载bootstrap库,然后手动添加到src/assets中,显然是过程太多. 当然是可以更省力些,可以通过 ...

  8. 在react项目中使用ECharts

    这里我们要在自己搭建的react项目中使用ECharts,我们可以在ECharts官网上看到有一种方式是在 webpack 中使用 ECharts,我们需要的就是这种方法. 我们在使用ECharts之 ...

  9. 优雅的在React项目中使用Redux

    概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在 ...

随机推荐

  1. mybatis一对多

    mapper.xml <mapper namespace="com.oracle.dao.one2manyDao"> <resultMap type=" ...

  2. 凝视转换（c转换为c++）

    C语言凝视->C++凝视即/*xxxxx*/->//xxxxx 在转换凝视前我们先了解一个概念:什么是有限状态机? 有限状态机FSM是软件上经常使用的一种处理方法,它把复杂的控制逻辑分解成 ...

  3. ArcGIS教程：分水岭

    摘要 确定栅格中一组像元之上的汇流区域. 使用方法 · 各个分水岭的值将取自输入栅格中源的值或者要素倾泻点数据.假设倾泻点为栅格数据集,则使用像元值.假设倾泻点为点要素数据集,则从指定的字段中获取值. ...

  4. php利用cookie防止重复提交解决办法

    原理:如果数据通过了上边的两次验证,说明数据是合法有效的数据,这时候我们把提交的数据串接为一个字符串,并用MD5加密后得到一个MD5的值. 接着我们把这个值通过Cookie放进客户端,当用户下一次提交 ...

  5. OpenGL之路（五）制作旋转飞机模型

    #include <gl/glut.h> #include <gl/GLU.h> #include <gl/GL.h> #pragma comment(lib, & ...

  6. Quartz深入浅出(二)

    Hello Quartz / 本文通过一个简单的样例让大家高速了解Quartz,上手.并了解Quartz内的一些关键对象 如 Scheduler.Job.Trigger.JobExecutionCon ...

  7. LeetCode(26)题解:Remove Duplicates from Sorted Array

    https://leetcode.com/problems/remove-duplicates-from-sorted-array/ Given a sorted array, remove the ...

  8. Linux搭建lnmp环境

    在CentOS 6上使用yum安装lnmp服务,原文链接http://www.qiansw.com/yum-lnmp.html

  9. p1694猴子 并查集

    有n只猴子,第一只尾巴挂在树上,剩下的n-1只,要么被其他的猴子抓住,要么抓住了其他的猴子,要么两者均有. 当然一只猴子最多抓两只另外的猴子,因为只有两只猴爪子嘛.现在给出这n只猴子抓与被抓的信息,并 ...

  10. POJ 3750 小孩报数问题 （线性表思想 约瑟夫问题 数组模拟运算的 没用循环链表，控制好下标的指向就很容易了）

    小孩报数问题 Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10423   Accepted: 4824 Descripti ...