在使用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. Linux系统调用(syscall)原理（转）

    引言:分析Android源码的过程中,要想从上至下完全明白一行代码,往往涉及app.framework.native一直到kernel,可能迷失到代码世界,明白了系统调用原理,或许能帮你峰回路转,找到 ...

  2. 通达OA 一些工作流调整后带来的后果及应对措施

    近期单位有个工作流须要改动,原因是最早设计时控件的字段设计不规范,控件直接使用了人员的名字来命名了.这不使用手机訪问时就出问题了,名字会直接显示出来,如今就须要进行调整. 调整初步有两个方案: 一是全 ...

  3. Android Studio 一些方便使用的设置

    相信非常多使用Eclipse的朋友,開始用Android Studio都是认为不是特别方便, a:比方怎样使鼠标放到方法上面,就有提示用法; b:怎样设置字体大小,和背景色; c:还有怎么查看Outl ...

  4. cocoaPods 安装和应用

    一.安装 下载安装CocoaPods需要Ruby环境 1. 检测gem版本 $ gem -v 如果gem版本小于2.6.x,则需要更新gem 2. 更新gem(gem版本高于2.6.x可跳过此步) 检 ...

  5. HDU 3039 Go Home

    今天本来解决的很好,本来可以不聊那么结束,但是我想更完美一点,多聊几句,谁知道就聊了很长时间,很傻逼.耽误了时间! /***************************************** ...

  6. 王立平--Unity破解

    1.下载破解工具.关闭Unity,打开破解工具 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzQyNTUyNw==/font/5a6L5L2T/ ...

  7. spark0.9.1集群模式执行graphx測试程序（LiveJournalPageRank,新增Connected Components）

    spark最新版公布了.之前的版本号就已经集成了graphx,这个版本号还改了一些bug. 我做了简单測试,只是网上关于集群模式执行spark资料太少了,仅仅有关于EC2(见參考资料1)的.可是还非常 ...

  8. Axure Base 09 带遮罩层的弹出框

    示例原型下载:小楼Axure原创元件-带遮罩层的弹出框 实现目标: 1.   点击按钮弹出带遮罩层的对话框: 2.   页面上下左右滚动时,弹出的对话框水平和垂直始终居中. 实现步骤如下: 1. 拖入 ...

  9. hibernate面试点

    1.谈谈你对hibernate的认识和理解 01.全自动的ORM框架 02.子项目 03.面向对象的思想来解决操作数据库 01.hibernate是一个开放源代码的对象关系映射(ORM)框架,它对JD ...

  10. var和let的区别(详解)

    1. 作用域 通过var定义的变量,作用域是整个封闭函数,是全域的 . 通过let定义的变量,作用域是在块级或是子块中. function varTest() { var x = 1; if (tru ...