web常用的布局框架

#web常用的布局框架| 来源: 网络整理| 查看: 265

web常用的 UI布局框架 1.boostrap

框架官方网址：www.bootcss.com/

不多说，大多数人都在用这个框架来开发，官方文档的API完整可靠，还有各种Bootstrap相关优质项目推荐，前端开发首选框架

简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。

响应式

2.amaze UI（妹子UI)

官方网址：amazeui.org/

Amaze UI 以移动优先（Mobile first）为理念，从小屏逐步扩展到大屏，最终实现所有屏幕适配，适应移动互联潮流。

响应式

3.Layui

官方网址：www.layui.com/

Layui是一款采用自身模块规范编写的国产前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用。从核心代码到API的每一处细节都经过精心雕琢，非常适合界面的快速开发。，从核心代码到API的每一处细节都经过精心雕琢，非常适合界面的快速开发。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

4.MUI(*)

官方网址：dev.dcloud.net.cn/mui/

最接近原生APP体验的高性能前端框架, 之前的很多前端框架（特别是响应式布局的框架），UI控件看起来太像网页，没有原生感觉，因此追求原生UI感觉也是我们的重要目标MUI以iOS平台UI为基础，补充部分Android平台特有的UI控件

最接近原生APP体验、高性能前端框架

乐淘首页 - 商品区域

1-整体布局，头部、底部固定定位

2- 主体触屏滑动效果

3-文字溢出处理：

mui-ellipsis：单行溢出

mui-ellipsis-2 ： 2行溢出

mui-ellipsis-3： 3行溢出

分类页分类页左侧分类页右侧

分类页的渲染动态

1-渲染左侧一级导航

2-渲染一级导航对应的二级导航

3-点击一级导航渲染对应的二级导航

搜索页搜索页 - 静态页面完成 localStorage的使用方法 api基本使用对于复杂类型的存储搜索页 - 历史记录读取 - 列表渲染

将来下面三句话, 可以放在控制台执行, 进行假数据初始化

var arr = [ "耐克", "李宁", "新百伦", "耐克王", "阿迪王" ]; var jsonStr = JSON.stringify( arr ); localStorage.setItem( "search_list", jsonStr ); 复制代码

功能1: 历史记录渲染功能

(1) 读取本地历史, 得到 jsonStr (2) 将 jsonStr 转换成数组 (3) 通过数组, 进行页面渲染(模板引擎) 搜索页 -- 完成清空功能

功能2: 清空历史记录功能

(1) 通过事件委托给清空记录绑定点击事件 (2) 清空, 将本地的搜索历史移除, removeItme(key); (3) 重新渲染页面 // mui确认框 // 参数1: 提示文本 // 参数2: 标题 // 参数3: 提示框按钮按钮, 要求是一个数组 // 参数4: 点击按钮后的回调函数 mui.confirm( "你确定要清空历史记录嘛?", "温馨提示", ["取消", "确认"], function( e ) {} 复制代码搜索页 - 删除功能

功能3: 删除单条历史记录

(1) 事件委托绑定点击事件 (2) 将下标存在删除按钮中, 点击后获取下标 (3) 读取本地存储, 拿到数组 (4) 根据下标, 从数组中将该下标的项移除, splice (5) 将数组转换成 jsonStr (6) 存到本地存储中 (7) 重新渲染

搜索页 - 使用mui的消息确认框

搜索页 - 添加功能

功能4: 点击搜索按钮, 添加搜索记录

(1) 给搜索按钮注册点击事件

(2) 获取搜索框的内容，判断数据是否为空

(3) 读取本地存储, 拿到数组

(4) 将搜索框的内容, unshift 到数组的最前面

(5) 将数组转成jsonStr, 存到本地存储中

(6) 重新渲染

(7) 跳转到对应的页面

注：非空判断，不能有重复项，长度不能大于10

搜索页 - 链接跳转

地址栏传值

./searchList.html?key=运动鞋

【本文地址】

公司简介

联系我们

web常用的 布局框架

web常用的布局框架