在使用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. 基于jquery 全选、反选、各行换色、单击行选中事件实现代码

    <script language="javascript"> $(document).ready(function(){ //各行换色 $('table tr:odd' ...

  2. 【手记】走近科学之为什么JObject不能调用LINQ扩展方法

    Json.NET的JObject明明实现了IEnumerable<T>,具体来说是IEnumerable<KeyValuePair<string, JToken>> ...

  3. HTML制作练习

  4. PHP生成excel(1)

    先到PHPExcel官网下载PHPExcel类 http://phpexcel.codeplex.com/ 把excel类包含进来,然后直接使用 <?php require "./PH ...

  5. AdaBoost算法原理简介

    AdaBoost算法原理 AdaBoost算法针对不同的训练集训练同一个基本分类器(弱分类器),然后把这些在不同训练集上得到的分类器集合起来,构成一个更强的最终的分类器(强分类器).理论证明,只要每个 ...

  6. Eclipse搭建Web Service服务

    1.建立动态Web工程(Dynamic Web Project),工程名为Server.编写类HelloWorld. package com.mysever; public class HelloWo ...

  7. sanic官方文档解析之Exception和Middleware,Listeners

    1,异常 异常是从处理请求内部抛出来的,并且通过Sanic自动的被处理异常,,异常用第一个参数携带异常信息,还可以接受在HTTP响应中要传递回的状态代码.引发异常 1.1引发异常 自动触发异常,,简单 ...

  8. Release Candidate

    RC_百度百科 https://baike.baidu.com/item/RC/7311964?fr=aladdin RC=Release Candidate,含义是"发布候选版" ...

  9. 编译spark源码 Maven 、SBT 2种方式编译

    由于实际环境较为复杂,从Spark官方下载二进制安装包可能不具有相关功能或不支持指定的软件版本,这就需要我们根据实际情况编译Spark源代码,生成所需要的部署包. Spark可以通过Maven和SBT ...

  10. Android开发环境搭建时遇到问题的解决方法

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/linux_loajie/article/details/33823637 Android开发环境搭建 ...