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

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

  1. npm install react-bootstrap --save

安装bootstrap。

  1. npm install bootstrap@3.3.7 --save

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

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

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

  1. 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. 10年java过来人聊聊自己的自学、培训和工作经历

    一 . 自我介绍 我叫王涛,我是一位北漂十年的码农,2008年9月份开始自学java,三个月后,自学无果,于2008年11月份开始参加培训,培训完之后,我觉得自己还是啥也不会,只会抄抄代码,竟然连de ...

  2. :nth-child(n)

    规定属于其父元素的第二个子元素的每个 p 的背景色: p:nth-child(2) { background:#ff0000; } 1定义和用法 :nth-child(n) 选择器匹配属于其父元素的第 ...

  3. C#编写街道管理系统

    项目需求: 一.语言和环境 A.实现语言 C# B.环境要求 Visual Studio 2012 二.功能要求 现使用.NET WinForms技术为居委会开发一个街道管理软件,其中街道管理窗体界面 ...

  4. NSString拼接字符串

    NSString* string; // 结果字符串 02 NSString* string1, string2; //已存在的字符串,需要将string1和string2连接起来 03   04 / ...

  5. SQL Constraints

    每个表可以有多个 UNIQUE 约束,但是每个表只能有一个 PRIMARY KEY 约束. http://www.w3school.com.cn/sql/sql_unique.asp 另外相关:@On ...

  6. [机器学习]-[数据预处理]-中心化 缩放 KNN(二)

    上次我们使用精度评估得到的成绩是 61%,成绩并不理想,再使 recall 和 f1 看下成绩如何? 首先我们先了解一下 召回率和 f1. 真实结果 预测结果 预测结果   正例 反例 正例 TP 真 ...

  7. Angular 4+ HttpClient

    个人博客迁移至 http://www.sulishibaobei.com  处: 这篇,算是上一篇Angular 4+ Http的后续: Angular 4.3.0-rc.0 版本已经发布

  8. 一次__libc_message的排查

     信号是6,abort调用的.总体而言,当你malloc的指针为A,但是你free的指针不是A,则容易出这个错,当然假设你free的刚好是别人malloc的,则还是正常. 还有一种是你free的地址在 ...

  9. javascript函数创建

    函数声明 function add(a,b){ return a+b } 函数表达式 <!--一般函数表达式--> var add = function(){ } <!--立即声明函 ...

  10. JVM-触发Full GC的情况

    除直接调用System.gc外,触发Full GC执行的情况有如下四种: 1.老年代空间不足 老年代空间只有在新生代对象转入及创建为大对象.大数组时才会出现不足现象,当执行Full GC后空间仍然不足 ...