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

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

2018-12-20

然后在index.js中引入

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

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

  1. 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. Access 执行查询时，抛出“标准表达式中数据类型不匹配”的错误

    Access根据时间查询时应在查询条件前后加# SELECT COUNT(*) FROM [User] WHERE [CreateTime] > #{0}#

  2. poj2406--Power Strings(kmp:求循环串的次数)

    Power Strings Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 33163   Accepted: 13784 D ...

  3. npm ERR! code EINTEGRITY npm ERR! sha1- 报错解决办法

    npm ERR! code EINTEGRITY npm ERR! sha1- 报错日志 npm ERR! code EINTEGRITY npm ERR! sha1-OGchPo3Xm/Ho8jAM ...

  4. python day - 8 文件

    文件的相关操作 1.文件的两种路径 绝对路径:需要从根目录下一层一层往下去找,文件或者程序所在的地方,中间所经过的所有的路径到你要找的文件或程序,就是绝对路径. 相对路径:只需要将要找的文件或者程序, ...

  5. 使用NetBeans生成jar包，并在jar包中添加资源

    在NetBeans中,执行Clean and Build便可得到jar文件 若要在jar中添加资源,先用压缩软件打开jar,然后将资源拖进当前归档文件即可 使用Class.getResource(St ...

  6. node-orm2

    最近应老大要求,对orm2进行再一步封装,所以记录下封装和使用心得(文中数据库:mysql). 数据库连接 var orm = require("orm"); orm.connec ...

  7. QT实现FTP服务器（一）

    QListenSocket类的实现: #include "QListenSocket.h" #include <QTcpSocket> #include <QDe ...

  8. POJ 1861 Network (Kruskal算法+输出的最小生成树里最长的边==最后加入生成树的边权 *【模板】)

    Network Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 14021   Accepted: 5484   Specia ...

  9. ap和路由器有什么区别 ap和路由器的区别介绍【图文】

    现在能够摆脱网线限制能够自由方便上网的WiFi和无线网络也来越流行,很多酒店.饭店.宾馆.办公楼等地方都会提供无线网络.而能够提供无线网络的设备有很多,现在我们介绍的是无线ap和无线路由器.那么,ap ...

  10. sql server中like无法匹配下划线问题解决方案

    在sql server的like中下划线类似于通配符%,所以无法使用like '%_%'来匹配下划线,可以通过以下两种办法实现匹配下划线 1.使用转义字符escape like '%\_%' esca ...