在使用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. libxml/HTMLparser.h file not found

    在导入asihttprequest包时出问题导入了libxml2.dylib.可是却提示libxml/HTMLparser.h file not found. 这是由于你的开发环境默认的路径无法找到这 ...

  2. Leetcode41: Remove Duplicates from Sorted List

    Given a sorted linked list, delete all duplicates such that each element appear only once. For examp ...

  3. 图片3d轮放查看效果(V2.0)：使用鼠标拖动实现图片的轮放

    上面的版本号为通过左右button实现图片轮放,这个版本号.是通过在窗体拖动鼠标.左右滑动图片. 关键点在于选择一个合适的值.使鼠标拖动时.全部图片均可显示,可是不会滑动过快或离开窗体. 不多说,直接 ...

  4. 2014MadCon厦门分享会-笔记（下）

    32 <如何与百度互动,不知道这些就不要做SEO了>百度站长平台资深产品运营师 曹丽丽(飞鸟) 33 注意百度站长平台的提醒.如果你不留电话,不留其他联系方式,出问题了,百度怎么提醒你呢? ...

  5. centos下的hadoop集群实现ssh的无密码登陆

    CentOS 下SSH无密码登录的配置 最近学习Hadoop.它要求各节点之间通过SSH无密码登录,配置SSH的时候费了一番功夫,记录下来,以备忘. 配置SSH无密码登录需要3步: 1.生成公钥和私钥 ...

  6. unix && linux

    区别和联系 Linux和UNIX的最大的区别是,前者是开发源代码的自由软件,而后者是对源代码实行知识产权保护的传统商业软件.这应该是他们最大的不同,这种不同体现在用户对前者有很高的自主权,而对后者却只 ...

  7. 依据iPhone6设计稿动态计算rem值

    rem 单位在做移动端的h5开发的时候是最常常使用的单位. 为解决自适应的问题.我们须要动态的给文档的更节点加入font-size 值.使用mediaquery 能够解决问题,可是每个文件都引用一大串 ...

  8. uboot1.1.6中启动流程

    U-Boot启动内核的过程可以分为两个阶段,两个阶段的功能如下: (1)第一阶段的功能 Ø 硬件设备初始化 Ø 加载U-Boot第二阶段代码到RAM空间 Ø 设置好栈 Ø 跳转到第二阶段代码入口 (2 ...

  9. java 常量表达式

    原文地址:http://docs.oracle.com/javase/specs/jls/se8/html/jls-15.html#jls-15.28 这是我翻译的,以备不时之用. 常量表达式是一个代 ...

  10. ARC机制之__strong具体解释

    ARC机制之__strong具体解释 __strong  解析: 默认情况下,一个指针都会使用 __strong 属性,表明这是一个强引用.这意味着,仅仅要引用存在,对象就不能被销毁.这是一种所期望的 ...