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之软键盘实现(js源码)
Jan 30 Javascript
js 页面关闭前的出现提示的实现代码
May 25 Javascript
实现图片预加载的三大方法及优缺点分析
Nov 19 Javascript
js光标定位文本框回车表单提交问题的解决方法
May 11 Javascript
jQuery ajax MD5实现用户注册即时验证功能
Oct 11 Javascript
js中获取 table节点各tr及td的内容简单实例
Oct 14 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
Dec 18 Javascript
写jQuery插件时的注意点
Feb 20 Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 Javascript
JavaScript 性能提升之路(推荐)
Apr 10 Javascript
js+html5 canvas实现ps钢笔抠图
Apr 28 Javascript
Openlayers实现点闪烁扩散效果
Sep 24 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
php生成酷炫的四个字符验证码
2016/04/22 PHP
ThinkPHP框架实现的微信支付接口开发完整示例
2019/04/10 PHP
使用JavaScript构建JSON格式字符串实现步骤
2013/03/22 Javascript
Js 时间函数getYear()的使用问题探讨
2013/04/01 Javascript
jQuery输入城市查看地图使用介绍
2013/05/08 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
2013/12/10 Javascript
javascript基础语法——全面理解变量和标识符
2016/06/02 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
原生JS实现的放大镜效果实例代码
2016/10/15 Javascript
Bootstrap 网站实例之单页营销网站
2016/10/20 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
2016/12/03 Javascript
微信小程序调用PHP后台接口 解析纯html文本
2017/06/13 Javascript
Vuex的初探与实战小结
2018/11/26 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
JavaScript 判断数据类型的4种方法
2020/09/11 Javascript
[05:48]DOTA2英雄梦之声vol21 屠夫
2014/06/20 DOTA
python持久性管理pickle模块详细介绍
2015/02/18 Python
django静态文件加载的方法
2018/05/20 Python
pandas使用get_dummies进行one-hot编码的方法
2018/07/10 Python
Python netmiko模块的使用
2020/02/14 Python
Python 实现自动登录+点击+滑动验证功能
2020/06/10 Python
Python使用for生成列表实现过程解析
2020/09/22 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
摩托车和ATV零件、配件和服装的首选在线零售商:MotoSport
2017/12/22 全球购物
MaBelle玛贝尔香港官网:香港钻饰连锁店
2019/09/09 全球购物
婚礼主持结束词
2014/03/13 职场文书
高中生国庆节演讲稿范文2014
2014/09/21 职场文书
副总经理岗位职责范本
2015/04/08 职场文书
2015年公司国庆放假通知
2015/07/30 职场文书
迎国庆主题班会
2015/08/17 职场文书
2016中秋节问候语
2015/11/11 职场文书
投资入股协议书
2016/03/22 职场文书
导游词幽默开场白
2019/06/26 职场文书
《三国志》赏析
2019/08/27 职场文书
js Proxy的原理详解
2021/05/25 Javascript