编程 Javascript

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用户体验框架快速上手，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

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

- Author -

学习笔记666

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Javascript 自定义类型方法小结

Mar 02 Javascript

利用js实现遮罩以及弹出可移动登录窗口

Jul 08 Javascript

js星星评分效果

Jul 24 Javascript

Javascript 实现图片无缝滚动

Dec 19 Javascript

jQuery实现的左右移动焦点图效果

Jan 14 Javascript

使用jquery.qrcode.min.js实现中文转化二维码

Mar 11 Javascript

利用vscode调试编译后的js代码详解

May 14 Javascript

vue定义全局变量和全局方法的方法示例

Aug 01 Javascript

vue中子组件的methods中获取到props中的值方法

Aug 27 Javascript

JQuery Ajax执行跨域请求数据的解决方案

Dec 10 jQuery

vue+iview动态渲染表格详解

Mar 19 Javascript

原生js实现二级联动菜单

Nov 27 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