当前位置: 首页 > news >正文

react 项目中 引入 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

转载于:https://www.cnblogs.com/crazycode2/p/8397731.html

相关文章:

  • “Usage of API documented as @since 1.8+”报错的解决办法
  • 【Spring系列】spring mvc整合任务调度
  • 【BZOJ2301】Problem B
  • linux 全部卸载python yum 重新安装
  • 【进阶4-4期】Lodash是如何实现深拷贝的
  • 提问的艺术
  • git学习(一) 如何将项目上传到github
  • HTML和CSS第一篇
  • git的基本使用
  • Linux基础命令---显示路由表route
  • TCP的三次握手和四次挥手
  • 富文本
  • 记一次monolog的RotatingFileHandler使用
  • pandas中的iloc和loc的区别
  • iOS-多个UIScrollView滑动嵌套(仿微博、抖音、网易云个人详情页)
  • 【RocksDB】TransactionDB源码分析
  • Codepen 每日精选(2018-3-25)
  • FineReport中如何实现自动滚屏效果
  • happypack两次报错的问题
  • HTTP--网络协议分层,http历史(二)
  • Java IO学习笔记一
  • js作用域和this的理解
  • linux安装openssl、swoole等扩展的具体步骤
  • SpringBoot几种定时任务的实现方式
  • SpriteKit 技巧之添加背景图片
  • text-decoration与color属性
  • Vue全家桶实现一个Web App
  • 从重复到重用
  • 大型网站性能监测、分析与优化常见问题QA
  • 开源SQL-on-Hadoop系统一览
  • 每天10道Java面试题,跟我走,offer有!
  • 前端技术周刊 2019-02-11 Serverless
  • 一、python与pycharm的安装
  • #android不同版本废弃api,新api。
  • ( 用例图)定义了系统的功能需求,它是从系统的外部看系统功能,并不描述系统内部对功能的具体实现
  • (1/2)敏捷实践指南 Agile Practice Guide ([美] Project Management institute 著)
  • (附源码)ssm高校升本考试管理系统 毕业设计 201631
  • (附源码)小程序 交通违法举报系统 毕业设计 242045
  • (入门自用)--C++--抽象类--多态原理--虚表--1020
  • (一)Neo4j下载安装以及初次使用
  • (原)Matlab的svmtrain和svmclassify
  • (转载)在C#用WM_COPYDATA消息来实现两个进程之间传递数据
  • ***检测工具之RKHunter AIDE
  • .NET/C# 阻止屏幕关闭,阻止系统进入睡眠状态
  • .NET/MSBuild 中的发布路径在哪里呢?如何在扩展编译的时候修改发布路径中的文件呢?
  • @JoinTable会自动删除关联表的数据
  • [ CTF ] WriteUp- 2022年第三届“网鼎杯”网络安全大赛(白虎组)
  • [acwing周赛复盘] 第 69 场周赛20220917
  • [Android Studio 权威教程]断点调试和高级调试
  • [Android Studio] 开发Java 程序
  • [AX]AX2012 R2 出差申请和支出报告
  • [c语言]小课堂 day2
  • [Django 0-1] Core.Email 模块
  • [github配置] 远程访问仓库以及问题解决
  • [HCTF 2018]WarmUp (代码审计)