栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

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

安装

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

然后需要我们手动引用css




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

$ npm install bootstrap

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

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

好,我们动手来使用一下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 = (
  
    
      
 react-bootstrap
      
    
  
);
// 然后我们渲染到body里
ReactDOM.render(navbarInstance,document.body);

html页面上:




  es2105的写法
  
  




  
  

效果如下:

 

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

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

总结

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

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/82046.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号