react-bootstrap是一个非常受欢迎的针对react封装过的bootstrap,它本身不包含css,所以也是需要使用bootstrap原生库。

在create-react-app建的项目目录中安装react-bootstrap。

npm install react-bootstrap --save

安装bootstrap。

npm install bootstrap@3.3.7 --save

在index.js文件中增加css引用。

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

在需要用到bootstrap组件的代码中,引入所需组件。

import { Navbar, Jumbotron, Button } from 'react-bootstrap';

react-bootstrap参考:

https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-bootstrap

https://react-bootstrap.github.io/getting-started.html

End

create-react-app搭建的项目中添加bootstrap的更多相关文章

  1. 在 .NET Core 5 中集成 Create React app

    翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...

  2. 深入 Create React App 核心概念

    本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...

  3. 在vue-cli搭建的项目中在后台mock接口中支持req.body和req.cookies

    在<vue-cli搭建的项目中增加后台mock接口>中实现了后台mock,但是前端post的t数据都要在mock的后台接口中使用req的接收数据事件获取http协议body中的数据. re ...

  4. Cordova app 检查更新 ----创建项目、添加插件、修改插件(一)

    原文:Cordova app 检查更新 ----创建项目.添加插件.修改插件(一) 使用Cordova 进行跨平台应用程序的开发 1.创建Cordova项目 $ cordova create hell ...

  5. 如何扩展 Create React App 的 Webpack 配置

    如何扩展 Create React App 的 Webpack 配置  原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...

  6. 关于如何正确地在android项目中添加第三方jar包

    在android项目中添加第三方jar包虽然不是一个很复杂的问题,但是确实给很多开发者带来了不小的困扰.我自己就曾经碰到过calss not found exception.error inflati ...

  7. 在vue-cli搭建的项目中增加后台mock接口

    用vue-cli搭建一个前端开发环境确实是极其方便,在写前端代码肯定也是少不了需要调用后台提供的业务接口进行前后端交互,特别在敏捷开发中,前后端都要提前确定业务接口并进行打桩,在开发过程中基本是没有现 ...

  8. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

  9. VS2015 项目中 添加windows服务

    1. 在项目中添加winows服务 今天刚刚为自己的项目添加了windows服务,以服务的形式运行后台系统,为前端提供接口服务,下面说一下具体怎么为vs项目添加windows服务 2. 添加Windo ...

随机推荐

  1. Ceph部署(一)集群搭建

    背景 Ceph简介 Ceph是一个分布式存储,可以提供对象存储.块存储和文件存储,其中对象存储和块存储可以很好地和各大云平台集成.一个Ceph集群中有Monitor节点.MDS节点(可选,用于文件存储 ...

  2. Use LiveCD to acquire images from a VM

    Forensic examiners usually acquire images from suspect's PC or Laptop. What if the target computer i ...

  3. No input file specified的解决方法apache伪静态

    http://jingyan.baidu.com/article/dca1fa6f8d623ff1a44052e8.html (一)IIS Noinput file specified 方法一:改PH ...

  4. [拾 得]pipe和xargs的恩怨情仇

    Photo by Joshua Sortino on Unsplash   坚持知识分享,该文章由Alopex编著, 转载请注明源地址: http://www.cnblogs.com/alopex/  ...

  5. java开发常用jar包

    mail.jar与activation.jar 里面包含了activation.jar和mail.jar两个包.通过里面的类的调用便可以达到发送电子邮件的目的 commons-beanutils.ja ...

  6. eclipse中git解决冲突

    摘录自http://blog.csdn.net/rosten/article/details/17068285 1. 工程->Team->同步 2.从远程pull至本地,就会出现如下内容 ...

  7. Oracle问题之ORA-12560TNS:协议适配器错误

    Oracle问题之ORA-12560TNS:协议适配器错误 一.造成ORA-12560: TNS: 协议适配器错误的问题的原因有三个: 1.监听服务没有起起来.windows平台个一如下操作:开始-- ...

  8. Java中实例方法、类方法和构造方法

    类方法,有static修饰符,典型的主函数public static void main(String[] args){}实例方法,就是一般的方法构造方法,没有返回值(就是连void都没有),方法名与 ...

  9. 记一些安卓app反编译修改的记录

    2017-12-2209:00:40 好几天没有写过博客了,因为马上要期末考试,只能暂且放下我的小玩物,专心复习我的期末考试. 今天突然想设置一个安卓的栏目,记录下自己从高中就爱玩的一些东西,像刷机呀 ...

  10. AI_深度学习为何兴起?

    深度学习和神经网络,在此技术背后的理念,已经发展了好几十年了,为何现在流行起来了? 最直接因素: 将帮助你在自己的组织中,发现好机会,来应用这些东西 为什么深度学习这么厉害? x轴表示完成任务的数据数 ...