吴彦祖

您现在的位置是: 网站首页 >  个人博客 >  心情日记 > 

个人博客

打算自己开发一个前端区块组件,笔记记录一下

2020-10-30 11:06:52 个人博客 5
mutuo UI是一款基于Bootstrap4+Jquery开发的前端组件框架,上手即用,直接复制CSS、HTML、JS相应代码进去,即可使用!Bootstrap4只采用了该框架的栅格式布局和图标代码。文件小至10kb。单个页面大小,不包含图片在内,在200kb左右。

mutuo组件品牌名                                                       视频(一分钟了解mutuoUI怎么使用)

mutuo UI是一款基于Bootstrap4+Jquery开发的前端组件框架,上手即用,直接复制CSS、HTML、JS相应代码进去,即可使用!Bootstrap4只采用了该框架的栅格式布局和图标代码。文件小至10kb。单个页面大小,不包含图片在内,在200kb左右。很好的保证了网站体积小,打开速度快的特点。

注意:统一不支持IE兼容。


引入:

您可以采用CDN的方式引入。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js">


您可以采用本地的方法引入。

<link rel="stylesheet" href="css/bootstrap.min.css">

<script src="js/bootstrap.min.js">


组件


全局组件

-网站头部

-网站底部

-轮播组件

-面包屑

-栏目页导航

-侧边导航

-参数筛选

-搜索组件


网站首页

-产品组件

-新闻组件

-案列组件

-下载组件

-简介组件

-服务组件

-联系组件

-通知组件

-广告组件

-视频组件

-留言组件


公司简介

-自由编辑

-固定模板


产品组件

-产品列表页

-产品详情页


新闻组件

-新闻列表页

-产品列表页


案列组件

-案列列表页

-案列详情页


下载组件

-下载列表页

-下载详情页


招聘组件

-招聘列表页

-招聘详情页


留言组件

-留言反馈


搜索组件

-高级搜索


TAG组件

-TAG聚合页



-------------命名规则-----------------------

区块名+页面名+区块编号(区块编号统一为mutuo开头+数字,如mutuo-11-1)

如:首页产品命名为 product-index mutuo-11-1

区块内命名规范:

-titlebox标题区块

-title区块标题

-desc区块描述

-contbox内容区块

-list列表


加载动画采用scrollReveal.js。压缩后文件小至5.6KB