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 相关文章推荐
javascript里的条件判断
Feb 27 Javascript
表单提交时自动复制内容到剪贴板的js代码
Mar 16 Javascript
jQuery与ExtJS之选择实例分析
Aug 19 Javascript
循环 vs 递归浅谈
Feb 28 Javascript
jquery实现输入框动态增减的实例代码
Jul 14 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
Nov 26 Javascript
js实现页面跳转重定向的几种方式
May 29 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
Sep 01 Javascript
微信小程序 页面传参实例详解
Nov 16 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
Mar 28 Javascript
vue-cli的eslint相关用法
Sep 29 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
Sep 14 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
批量获取memcache值并按key的顺序返回的实现代码
2011/06/14 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
xtree.js 代码
2007/03/13 Javascript
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
2013/04/24 Javascript
js用正则表达式来验证表单(比较齐全的资源)
2013/11/17 Javascript
Javascript中3种实现继承的方法和代码实例
2014/08/12 Javascript
jQuery中$.each使用详解
2015/01/29 Javascript
JS动态创建DOM元素的方法
2015/06/09 Javascript
用js编写的简单的计算器代码程序
2015/08/04 Javascript
JavaScript入门教程之引用类型
2016/05/04 Javascript
jQuery easyui刷新当前tabs的方法
2016/09/23 Javascript
详解AngularJS中的表单验证(推荐)
2016/11/17 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
javascript实现遮罩层动态效果实例
2019/05/14 Javascript
微信小程序前端promise封装代码实例
2019/08/24 Javascript
vue实现随机验证码功能(完整代码)
2019/12/10 Javascript
使用pkg打包ThinkJS项目的方法步骤
2019/12/30 Javascript
利用Fn.py库在Python中进行函数式编程
2015/04/22 Python
Python 编码Basic Auth使用方法简单实例
2017/05/25 Python
Python格式化输出%s和%d
2018/05/07 Python
python 自定义异常和异常捕捉的方法
2018/10/18 Python
利用Python如何实现一个小说网站雏形
2018/11/23 Python
修改python plot折线图的坐标轴刻度方法
2018/12/13 Python
在Python中使用filter去除列表中值为假及空字符串的例子
2019/11/18 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
sklearn的predict_proba使用说明
2020/06/28 Python
python基本算法之实现归并排序(Merge sort)
2020/09/01 Python
Hotter Shoes英国官网:英伦风格,舒适的鞋子
2017/12/28 全球购物
轻松制作精彩视频:Animoto
2018/09/19 全球购物
什么是Linux虚拟文件系统VFS
2015/08/25 面试题
论文指导教师评语
2014/04/28 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
毕业实习计划书
2015/01/16 职场文书
golang 语言中错误处理机制
2021/08/30 Golang