DiQuick Web 前端框架 V1.1 發布正式發布,小編帶來了DiQuick Web 前端框架 V1.1版本,DiQuick適合開發輕量化、語義化、擴展性強的Web前端項目,需要的朋友可以來下載!
DiQuick Web 前端框架特色
語義化
標準語義化能夠提升文檔的易用性,使工作人員快速理解HTML文檔,并且可以有效的幫助SEO優化
響應式
響應式設計可以做到根據不同設備環境自動響應及調整,使PC、平板、手機終端都能獲得良好的閱讀體驗
預定義
預定義可以快速部署組件及CSS樣式行為,在HTML文檔中減少對子元素的設定,更有效的簡化了文檔
DiQuick Web 前端框架安裝方法
安裝框架css及js文件
引用框架樣式
引用jQuey庫及框架js(請確保jQuery庫在所有js組件之前引用,建議將所有js在底部引用與編寫,以確保頁面的加載速度)
引用fancyBox彈窗組件
DiQuick Web 前端框架1.1版本使用說明
效果與兼容性
框架中的組件多數采用了CSS3來實現border-radius圓角、box-shadow陰影、transition過渡等效果,這意味著IE8及更老舊的瀏覽器將不能支持這些特性,CSS3讓Web元素的效果制作變的更便捷,減少了圖片的需求且加快了讀取速率,框架文件并不會對這些效果做兼容處理。
內容的展現
在框架中,我們推崇CSS組件與展現的分離,展現由塊布局、偏移、隱藏等系統來實現,元素及組件的布局將依賴于它們,只有在考慮部分組件能夠通過預定義樣式減少對子元素的設定時,我們才會為組件自身添加排列或布局的樣式。
盒模型
我們對整個框架設定了box-sizing:border-box邊框盒模型,它的好處是可以簡易設定元素尺寸,為元素指定的任何padding內邊距和border邊框的值都將在已設定的寬度和高度內進行繪制,不會導致元素總尺寸發生變化,在部分元素需要使用margin外邊距來設定時,采用calc()函數來進行了相應數值的剔除。
類名與選擇器
在樣式命名中,遵循了語義化的結構,也盡量縮減了類名的標識,采用了遞進選取元素的方式,例如設定tab選項卡組件,我們對組件導航選用了class="nav"而不是class="tab-nav",因為在樣式表中已限定了只有tab組件才能使用它,部分非裝取大量內容的組件中甚至不需要你設置子元素類名,因為在css及js文件中都使用了特定選擇器來控制元素,并且保證了其他元素插入時不會受到影響。
- PC官方版
- 安卓官方手機版
- IOS官方手機版