DiQuick Web前端框架

DiQuick Web 前端框架是一款便捷好用的编程开发工具,其具有轻量化、语义化、扩展性强的特性,包含了多种组件,在开发时候更加快捷方便,有需要的用户欢迎来IT猫扑下载~

web前端框架简介

DiQuick Web前端框架采用 HTML+CSS3+jQuery,配置有响应式布局及预定义设置,包含诸多组件：Nav、Tab、Media、Form、Table、Menu等,致力于快速开发轻量化、语义化、扩展性强的Web前端项目。

DiQuick Web 前端框架特色

响应式

响应式设计可以做到根据不同设备环境自动响应及调整,使PC、平板、手机终端都能获得良好的阅读体验

语义化

标准语义化能够提升文档的易用性,使工作人员快速理解HTML文档,并且可以有效的帮助SEO优化

预定义

预定义可以快速部署组件及CSS样式行为,在HTML文档中减少对子元素的设定,更有效的简化了文档

DiQuick Web 前端框架安装方法

安装框架css及js文件

引用框架样式

引用jQuey库及框架js（请确保jQuery库在所有js组件之前引用,建议将所有js在底部引用与编写,以确保页面的加载速度）

引用fancyBox弹窗组件

DiQuick Web 前端框架1.2.2版本使用说明

效果与兼容性

框架中的组件多数采用了CSS3来实现border-radius圆角、box-shadow阴影、transition过渡等效果,这意味着IE8及更老旧的浏览器将不能支持这些特性,CSS3让Web元素的效果制作变的更便捷,减少了图片的需求且加快了读取速率,框架文件并不会对这些效果做兼容处理。

盒模型

我们对整个框架设定了box-sizing:border-box边框盒模型,它的好处是可以简易设定元素尺寸,为元素指定的任何padding内边距和border边框的值都将在已设定的宽度和高度内进行绘制,不会导致元素总尺寸发生变化,在部分元素需要使用margin外边距来设定时,采用calc()函数来进行了相应数值的剔除。

内容的展现

在框架中,我们推崇CSS组件与展现的分离,展现由块布局、偏移、隐藏等系统来实现,元素及组件的布局将依赖于它们,只有在考虑部分组件能够通过预定义样式减少对子元素的设定时,我们才会为组件自身添加排列或布局的样式。

类名与选择器

在样式命名中,遵循了语义化的结构,也尽量缩减了类名的标识,采用了递进选取元素的方式,例如设定tab选项卡组件,我们对组件导航选用了class="nav"而不是class="tab-nav",因为在样式表中已限定了只有tab组件才能使用它,部分非装取大量内容的组件中甚至不需要你设置子元素类名,因为在css及js文件中都使用了特定选择器来控制元素,并且保证了其他元素插入时不会受到影响。

更新日志

新版本升级内容：

修订表单样式

修订按钮样式

修订遮罩层插件

修订表格样式

修订侧边栏导航插件