在使用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. Yii框架中安装srbac扩展方法

    首先,下载srbac_1.3beta.zip文件和对应的blog-srbac_1.2_r228.zip 问什么要下载第二个文件,后面就知道了. 按照手册进行配置: 解压缩srbac_1.3beta.z ...

  2. iOS Webview 与 app交互

    有时候我们在内嵌的webview中希望点击一个链接之后,触发iOS原生事件,而不是webview内页面跳转(因为webview的跳转很生硬,而ajax+js模拟则不如原生segue平滑). 有时候我们 ...

  3. 利用python暴力破解ssh

    # -*- coding:utf-8 -*- #python 2.7 import optparse,sys,threading import pexpect PROMPT = ['#','>' ...

  4. SGU 194 Reactor Cooling 无源汇带上下界可行流

    Reactor Cooling time limit per test: 0.5 sec. memory limit per test: 65536 KB input: standard output ...

  5. openwrt procd 运行的一些log

    void procd_inittab(void) { #define LINE_LEN 128 FILE *fp = fopen(tab, "r"); struct init_ac ...

  6. linux led子系统（二）

    对于led子系统中,有那么多得trigger,下面就来简单了解下. 1.default-on static void defon_trig_activate(struct led_classdev * ...

  7. 梳理caffe代码common(八)

    因为想梳理data_layer的过程.整理一半发现有几个很重要的头文件就是题目列出的这几个: 追本溯源,先从根基開始学起.这里面都是些什么鬼呢? common类 命名空间的使用:google.cv.c ...

  8. 2016/05/25 PHP mysql_insert_id() 函数 返回上一步 INSERT 操作产生的 ID

    定义和用法 mysql_insert_id() 函数返回上一步 INSERT 操作产生的 ID. 如果上一查询没有产生 AUTO_INCREMENT 的 ID,则 mysql_insert_id() ...

  9. MRUnit测试

    新建一个专门的测试类,代码如下: wordcount的map函数输入string line,      输出<单词 , 1> 右键-> run as junit 出错了,因为输出不是 ...

  10. 使用jsoncpp解析生成json

    在此站点下载jsoncpp(https://sourceforge.net/projects/jsoncpp/这个站点的版本较旧) 在电脑上安装Python,运行amalgamate.py,生成的di ...