create-react-app搭建的项目中添加bootstrap
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的更多相关文章
- 在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...
- 深入 Create React App 核心概念
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
- 在vue-cli搭建的项目中在后台mock接口中支持req.body和req.cookies
在<vue-cli搭建的项目中增加后台mock接口>中实现了后台mock,但是前端post的t数据都要在mock的后台接口中使用req的接收数据事件获取http协议body中的数据. re ...
- Cordova app 检查更新 ----创建项目、添加插件、修改插件(一)
原文:Cordova app 检查更新 ----创建项目.添加插件.修改插件(一) 使用Cordova 进行跨平台应用程序的开发 1.创建Cordova项目 $ cordova create hell ...
- 如何扩展 Create React App 的 Webpack 配置
如何扩展 Create React App 的 Webpack 配置 原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...
- 关于如何正确地在android项目中添加第三方jar包
在android项目中添加第三方jar包虽然不是一个很复杂的问题,但是确实给很多开发者带来了不小的困扰.我自己就曾经碰到过calss not found exception.error inflati ...
- 在vue-cli搭建的项目中增加后台mock接口
用vue-cli搭建一个前端开发环境确实是极其方便,在写前端代码肯定也是少不了需要调用后台提供的业务接口进行前后端交互,特别在敏捷开发中,前后端都要提前确定业务接口并进行打桩,在开发过程中基本是没有现 ...
- 如何在VUE项目中添加ESLint
如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...
- VS2015 项目中 添加windows服务
1. 在项目中添加winows服务 今天刚刚为自己的项目添加了windows服务,以服务的形式运行后台系统,为前端提供接口服务,下面说一下具体怎么为vs项目添加windows服务 2. 添加Windo ...
随机推荐
- Git分支管理及常见操作
众所周知,使用Git分支,我们可以从开发主线上分离开来,然后在不影响主线的同时继续工作. 既然要使用Git分支,这里就涉及到Git分支的管理及常见操作,如列出分支,分支的创建,分支的删除,分支的合并等 ...
- 使用nginx作为websocket的proxy server
blog.csdn.net/zhx6044/article/details/50278765 WebSocket WebSocket协议为创建客户端和服务器端需要实时双向通讯的webapp提供了一个选 ...
- windows下安装redis3.2.100单机和集群详解
下载redis 下载地址:https://github.com/MicrosoftArchive/redis/releases 我下载的是3.2.100版本的Redis-x64-3.2.100.zip ...
- Jquery实现两级联动
最后结果如下: 关键代码如下: <select name="customerCondition['credibilityBegin']" id="credibili ...
- 1.(python)__new__与__init__
1.来比较一下__new__与__init__: (1)__new__在初始化实例前调用,__init__在初始化实例之后调用,用来初始化实例的一些属性或者做一些初始操作 # -*- coding: ...
- 前端之CSS介绍--选择器
一.CSS简介 介绍 css我们称呼层叠样式表(英文全称:Cascading Style Sheets).它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等 ...
- cpuimage 开源之
前年学习opengl做的一个小东西. 原本计划将gpuimage 的算法一个一个转写成cpu版本 c,c++ 版本. gpuimage 项目参考: https://github.com/BradLar ...
- ASP.net core 2.0.0 中 asp.net identity 2.0.0 的基本使用(四)—用户注册
修改用户注册 1.修改用户名注册规则. 打开Controllers目录下的AccountController.cs. 在控制器中找到 public async Task<IActionResul ...
- Android开发模板代码(一)——简单打开图库选择照片
首先,先贴上样本代码 //检查权限 public void checkPermission() { if (ContextCompat.checkSelfPermission(this, Manife ...
- scp简单使用
从10.48.113.11获取目录/home/test 到本地/home目录下 scp -r root@10.48.113.11:/home/test /home 将本地/h ...