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将string类型转换int类型
Dec 09 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
Apr 22 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
Sep 01 Javascript
jQuery中attr()方法用法实例
Jan 05 Javascript
javascript中Array数组的迭代方法实例分析
Feb 04 Javascript
JQuery遍历元素的后代和同胞实现方法
Sep 18 Javascript
vue中的模态对话框组件实现过程
May 01 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
微信小程序当前时间时段选择器插件使用方法详解
Dec 28 Javascript
vue 取出v-for循环中的index值实例
Nov 09 Javascript
详解ES6 扩展运算符的使用与注意事项
Nov 12 Javascript
SSM VUE Axios详解
Oct 05 Vue.js
基于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生成略缩图代码
2012/07/16 PHP
深入Apache与Nginx的优缺点比较详解
2013/06/17 PHP
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
2015/12/21 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
JavaScript面向对象之静态与非静态类
2010/02/03 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
2013/11/12 Javascript
JavaScript函数获取事件源的小例子
2014/05/14 Javascript
使用canvas实现仿新浪微博头像截取上传功能
2015/09/02 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
2015/12/06 Javascript
JavaScript操作HTML DOM节点的基础教程
2016/03/11 Javascript
JS修改地址栏参数实例代码
2016/06/14 Javascript
原生js实现打字动画游戏
2017/02/04 Javascript
zTree树形插件异步加载方法详解
2017/06/14 Javascript
vue强制刷新组件的方法示例
2019/02/28 Javascript
详解vue中$nextTick和$forceUpdate的用法
2019/12/11 Javascript
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
python 获取url中的参数列表实例
2018/12/18 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
Python使用百度翻译开发平台实现英文翻译为中文功能示例
2019/08/08 Python
python中dict()的高级用法实现
2019/11/13 Python
Pycharm小白级简单使用教程
2020/01/08 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
解决pycharm 格式报错tabs和space不一致问题
2021/02/26 Python
深入浅析css3 中display box使用方法
2015/11/25 HTML / CSS
YSL圣罗兰美妆英国官网:Yves Saint Laurent Beauty UK
2019/08/03 全球购物
乌克兰巴士票购买网站:inBus
2021/03/12 全球购物
J2EE包括哪些技术
2016/11/25 面试题
观看《周恩来的四个昼夜》思想汇报
2014/09/12 职场文书
学校副校长四风对照检查材料整改措施
2014/09/25 职场文书
股东出资证明书范例
2014/10/04 职场文书
公务员年度个人总结
2015/02/12 职场文书
学校实习推荐信
2015/03/27 职场文书
2015年信息宣传工作总结
2015/05/26 职场文书
python如何读取.mtx文件
2021/04/22 Python
Go语言grpc和protobuf
2022/04/13 Golang