这次给大家带来BootStrap超高用户体验框架详解,使用BootStrap框架的注意事项有哪些,下面就是实战案例,一起来看一下。
【相关视频推荐:Bootstrap教程】
安装
在终端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 就开启了服务
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
乐彼多用户商城系统,采用ASP.NET分层技术和AJAX技术,运营于高速稳定的微软.NET+MSSQL 2005平台;完全具备搭建超大型网络购物多用户网上商城的整体技术框架和应用层次LBMall 秉承乐彼软件优秀品质,后台人性化设计,管理窗口识别客户端分辨率自动调整,独立配置的菜单操作锁,使管理操作简单便捷。待办事项1、新订单、支付、付款、短信提醒2、每5分钟自动读取3、新事项声音提醒 店铺管理1









