React BootStrap用户体验框架快速上手


Posted in Javascript onMarch 06, 2018

官方文档http://react-bootstrap.github.io/getting-started.html

安装

在终端cd到你的项目目录下执行:$ npm install react-bootstrap

然后需要我们手动引用css

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">

但是我们在学习的时候使用外部的URL,太慢了。因此我们索引把bootstrap安装到本地。

$ npm install bootstrap

然后你会发现在你的node_modules目录下多了bootstrap。

这样页面上就可以引用本地的css了

<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" >

好,我们动手来使用一下React-BootStrap框架吧

http://react-bootstrap.github.io/components.html

我们这里演示使用它的导航条组件

在index.js里:

const React = require("react");
const ReactDOM = require("react-dom");
import {Navbar} from "react-bootstrap";
const navbarInstance = (
  <Navbar>
    <Navbar.Header>
      <Navbar.Brand>
        <a href="#" rel="external nofollow" >react-bootstrap</a>
      </Navbar.Brand>
    </Navbar.Header>
  </Navbar>
);
// 然后我们渲染到body里
ReactDOM.render(navbarInstance,document.body);

html页面上:

<!DOCTYPE html>
<html>
<head>
  <title>es2105的写法</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" >
</head>
<body>
<div id="abc"></div>
</body>
  <script src="webpack-dev-server.js"></script>
  <script src="index-webpack.js"></script>
</html>

效果如下:

React BootStrap用户体验框架快速上手 

主要看浏览器地址,这是我们前面配置的”热启动”。

执行命令 $ npm start 就开启了服务

总结

以上所述是小编给大家介绍的React BootStrap用户体验框架快速上手,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js判断变量是否空值的代码
Oct 26 Javascript
JQuery autocomplete 使用手册
Apr 01 Javascript
浅析Javascript使用include/require
Nov 13 Javascript
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 Javascript
jQuery判断是否存在滚动条的简单方法
Sep 17 Javascript
ztree简介_动力节点Java学院整理
Jul 19 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
Oct 21 Javascript
基于Node.js实现压缩和解压缩的方法
Feb 13 Javascript
微信小程序实现团购或秒杀批量倒计时
Nov 01 Javascript
小程序绑定用户方案优化小结
May 15 Javascript
Vue使用预渲染代替SSR的方法
Jul 02 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
Aug 31 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
Mar 06 #Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
Mar 06 #Javascript
解决vue+webpack打包路径的问题
Mar 06 #Javascript
解决Vue打包之后文件路径出错的问题
Mar 06 #Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
Mar 06 #Javascript
在vue中,v-for的索引index在html中的使用方法
Mar 06 #Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
Mar 06 #Javascript
You might like
百度站点地图(百度sitemap)生成方法分享
2014/01/09 PHP
Thinkphp框架中D方法与M方法的区别
2016/12/23 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
js判断变量是否空值的代码
2008/10/26 Javascript
动态创建样式表在各浏览器中的差异测试代码
2011/09/13 Javascript
浏览器兼容console对象的简要解决方案分享
2013/10/24 Javascript
JS获取农历日期具体实例
2013/11/14 Javascript
什么是cookie?js手动创建和存储cookie
2014/05/27 Javascript
jQuery中$.each使用详解
2015/01/29 Javascript
js实现九宫格图片半透明渐显特效的方法
2015/02/16 Javascript
JavaScript实现99乘法表及隔行变色实例代码
2016/02/24 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
2016/05/09 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
NodeJS实现客户端js加密
2017/01/09 NodeJs
原生js轮播(仿慕课网)
2017/02/15 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
EL表达式截取字符串的函数说明
2017/09/22 Javascript
vue的常用组件操作方法应用分析
2018/04/13 Javascript
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
2020/03/03 Javascript
VUE实时监听元素距离顶部高度的操作
2020/07/29 Javascript
[02:38]DOTA2亚洲邀请赛 IG战队巡礼
2015/02/03 DOTA
Python系统监控模块psutil功能与经典用法分析
2018/05/24 Python
在python中实现调用可执行文件.exe的3种方法
2019/07/07 Python
python中tkinter窗口位置\坐标\大小等实现示例
2020/07/09 Python
scrapy利用selenium爬取豆瓣阅读的全步骤
2020/09/20 Python
详解CSS3 用border写 空心三角箭头 (两种写法)
2017/09/29 HTML / CSS
土耳其家居建材网站:Koçtaş
2016/11/22 全球购物
DNA测试:Orig3n
2019/03/01 全球购物
房屋买卖协议样本
2014/11/16 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书
2015年幼师个人工作总结
2015/10/15 职场文书
2016年第十四个公民道德宣传日活动总
2016/04/01 职场文书
logback 实现给变量指定默认值
2021/08/30 Java/Android
Win11绿屏怎么办?Win11绿屏死机的解决方法
2021/11/21 数码科技