适用响应式 Web UI 框架
1. Bootstrap
Bootstrap是快速開(kāi)發(fā)Web應(yīng)用程序的前端工具包。它是一個(gè)CSS和HTML的集合,它使用了最新的瀏覽器技術(shù),給你的Web開(kāi)發(fā)提供了時(shí)尚的版式,表單,buttons,表格,網(wǎng)格系統(tǒng)等等。
官方網(wǎng)站: http://twitter.github.com/bootstrap/
github: https://github.com/twitter/bootstrap
2. Foundation
Foundation 是一個(gè)易用、強(qiáng)大而且靈活的框架,用于構(gòu)建基于任何設(shè)備上的 Web 應(yīng)用。提供多種 Web 上的 UI 組件,如表單、按鈕、Tabs 等等。
官方網(wǎng)站: http://foundation.zurb.com/
github: https://github.com/zurb/foundation
3. Skeleton
Skeleton 是一個(gè)小的 JS 和 CSS 文件的集合,可幫你快速開(kāi)發(fā)漂亮的網(wǎng)站,適合各種屏幕設(shè)備包括手機(jī)。Skeleton 基于 960 grid 開(kāi)發(fā)。它是一個(gè) UI 框架。
官方網(wǎng)站: http://www.getskeleton.com/
github: https://github.com/dhgamache/Skeleton
4. Less Framework
Less框架是一個(gè)用于設(shè)計(jì)自適應(yīng)網(wǎng)站的CSS網(wǎng)格系統(tǒng),它包含4個(gè)布局和3套預(yù)設(shè)布局,這些都以一個(gè)單一網(wǎng)格為基礎(chǔ)。Less框架的目標(biāo)是更高效地創(chuàng)建多布局網(wǎng)站,并在布局之間保持一致。
官方網(wǎng)站: http://lessframework.com/
github: https://github.com/jonikorpi/Less-Framework
5. ResponsiveAeon
ResponsiveAeon 是一個(gè)HTML5/CSS3的框架,可以非常快速的創(chuàng)建響應(yīng)的布局。它有一個(gè)網(wǎng)格系統(tǒng)是基于總1104px寬度12列,提供了3個(gè)非常容易理解的基本類(lèi)供 使用。該框架使使用@mediaqueries的,支持任何尺寸的設(shè)備。除了網(wǎng)格系統(tǒng),也有排版,列表,表格,按鈕和表格的樣式。
官方網(wǎng)站: http://www.newaeonweb.com.br/responsiveaeon/
github: https://github.com/newaeonweb/ResponsiveAeon-Cssgrid
6. Gumby
Gumby 是一個(gè)響應(yīng)式的以及 960 像素寬度的 CSS 網(wǎng)格框架,支持 PC、平板和手機(jī)屏幕顯示。類(lèi)似 Twitter 的 Bootstrap,它包括一個(gè)Web UI工具包,有好看按鈕,表格,導(dǎo)航+標(biāo)簽和一個(gè)很小的JavaScript文件。
官方網(wǎng)站: http://www.gumbyframework.com/
github: https://github.com/dsurgeons/Gumby
7. Gridpak
Gridpak 的目的是實(shí)現(xiàn)了響應(yīng)式的 Web 頁(yè)面設(shè)計(jì),提高工作流程,節(jié)省了時(shí)間。通過(guò)生成PNG圖像,CSS和JavaScript,讓 Gridpak 創(chuàng)建響應(yīng)式的簡(jiǎn)單界面。Gridpak 產(chǎn)生的CSS 兼容 IE 8+,但它使用很多實(shí)驗(yàn)性的CSS屬性,如媒體查詢,盒大小和背景剪輯屬性,所以建議結(jié)合 Modernizer 來(lái)使用,確保向后兼容性。
官方網(wǎng)站: http://gridpak.com/
8. Responsive GS
Responsive GS 是一個(gè)流體網(wǎng)格 CSS 框架,用于快速開(kāi)發(fā)響應(yīng)式的 Web 網(wǎng)站。 Responsive GS 提供三種風(fēng)格:12、16 和 24 列,使用 media queries 支持所有標(biāo)準(zhǔn)設(shè)備。
官方網(wǎng)站: http://responsive.gs/
github: https://github.com/StudioSnapsize/responsive-gs
9. Amazium
Amazium 是一個(gè)基于 960 Grid System 的響應(yīng)式 CSS 框架,使用 960px 寬度,以適應(yīng)大多數(shù) 1024*768 分辨率的屏幕。Amazium 使用 4 個(gè)主要的 media queries 來(lái)調(diào)整所適應(yīng)的分辨率大小。
官方網(wǎng)站: http://www.amazium.co.uk/
10. Golden Grid System
Golden grid system是為增強(qiáng)網(wǎng)頁(yè)兼容性設(shè)計(jì)的折疊式grid。具有四個(gè)特征:列、跨頁(yè)、底線、script。
官方網(wǎng)站: http://goldengridsystem.com/
github: https://github.com/jonikorpi/Golden-Grid-System
11. Centurion
Centurion 是一個(gè)基于 SASS 和 CSS3 構(gòu)建的響應(yīng)式 Web 框架。
官方網(wǎng)站: http://jhough10.github.com/Centurion/
github: https://github.com/jhough10/Centurion
12.inuit.css
該框架用于使用較少的代碼實(shí)現(xiàn)在較小屏幕(平板電腦、手機(jī))上運(yùn)行的項(xiàng)目,支持IE6+。
官方網(wǎng)站: http://inuitcss.com/
github: https://github.com/csswizardry/inuit.css
13. Fluid Baseline Grid
Fluid Baseline網(wǎng)格系統(tǒng)是一個(gè)HTML5 & CSS3開(kāi)發(fā)工具包,為網(wǎng)站快速設(shè)計(jì)提供了堅(jiān)實(shí)的基礎(chǔ)。
官方網(wǎng)站: http://fluidbaselinegrid.com/
github: https://github.com/thedayhascome/Fluid-Baseline-Grid
14. HTML5 Boilerplate
HTML5 Boilerplate基于HTML/CSS/JS模板,可以幫助開(kāi)發(fā)者使用HTML5技術(shù)快速開(kāi)發(fā)穩(wěn)健、功能齊全的網(wǎng)站。你可以把它當(dāng)作自己的新項(xiàng)目模板,在此基礎(chǔ)上建立自己的項(xiàng)目。
該模板包含了幫助開(kāi)發(fā)HTML5站點(diǎn)和應(yīng)用程序的組件和一些優(yōu)秀的最佳實(shí)踐,只需開(kāi)發(fā)者最少的前期工作,就能為項(xiàng)目提供一個(gè)非常穩(wěn)固的基礎(chǔ)。另外,該模板是高度可定制,可輕松刪除不需要的一些特性。
官方網(wǎng)站: http://html5boilerplate.com/
github: https://github.com/h5bp/html5-boilerplate
15.Semantic
Semantic UI是完全語(yǔ)義化的前端界面開(kāi)發(fā)框架,支持 Sass 和 LESS 動(dòng)態(tài)樣式語(yǔ)言,文檔和演示非常完善,易于學(xué)習(xí)和使用,配備網(wǎng)格布局,有一些非常實(shí)用的附加配置,例如inverted類(lèi)。
有一個(gè)非常好的按鈕實(shí)現(xiàn),情態(tài)動(dòng)詞,和進(jìn)度條。在許多功能上使用圖標(biāo)字體。
官方網(wǎng)站: http://semantic-ui.com/
github: https://github.com/semantic-org/semantic-ui/
16.Zui
ZUI繼承了Bootstrap 3中的大部分基礎(chǔ)內(nèi)容作了相應(yīng)的改進(jìn),簡(jiǎn)單美觀,易于使用,快速構(gòu)建簡(jiǎn)潔大方的現(xiàn)代web應(yīng)用。
采用HTML5且支持所有流行的移動(dòng)及桌面瀏覽器平臺(tái),一些舊的瀏覽器也能夠降級(jí)支持,輕快獨(dú)立穩(wěn)定,最佳的可用性能,最大限度的不依賴于外部組件,全平臺(tái)響應(yīng),一次編寫(xiě),響應(yīng)任何尺寸的設(shè)備。
官方網(wǎng)站: http://www.zui.sexy/
17.Amaze
Amaze UI 是一個(gè)輕量級(jí)、采用mobile first理念的前端框架,中國(guó)首個(gè)開(kāi)源 HTML5 跨屏前端框架,適配所有屏幕,可快速構(gòu)建界面出色、體驗(yàn)優(yōu)秀的跨屏頁(yè)面,可提升開(kāi)發(fā)效率,對(duì)于常用瀏覽器及App內(nèi)置瀏覽器提供更好的兼容性支持,使用 CSS3 來(lái)做動(dòng)畫(huà)交互,平滑、高效,更適合移動(dòng)設(shè)備。
官方網(wǎng)站: http://amazeui.org/
github: http://git.oschina.net/amazeui/amazeui
?
18.MUI
MUI(Mobile User Interface)是一套基于Html5的,遵循Html5+規(guī)范的,用于手機(jī)端界面開(kāi)發(fā)的一套框架,是目前最高性能和最接近原生體驗(yàn)的手機(jī)端框架,體積小不到100k,可直接使用class編寫(xiě),性能遠(yuǎn)高于data-方式,又通過(guò)代碼塊的編寫(xiě)方式降低了編碼的復(fù)雜度。
例如在HBuilder里敲m,會(huì)拉出一排控件mList、mButton等,選一個(gè)回車(chē),就會(huì)自動(dòng)產(chǎn)生div和class。
19.OniUI
OniUI是基于avalon的UI庫(kù),是一個(gè)MVVM架構(gòu)的前端框架,兼容主流瀏覽器。
官方網(wǎng)站: http://ued.qunar.com/oniui/home.htm
github: https://github.com/RubyLouvre/avalon.oniui
20.Vanilla JS
Vanilla JS 是一個(gè)快速、輕量級(jí)、跨平臺(tái)的JavaScript框架,也是瀏覽器內(nèi)置框架。
官方網(wǎng)站: http://vanilla-js.com/
21.Zepto
Zepto是專(zhuān)門(mén)為移動(dòng) WebKit 瀏覽器,如 Chrome 和 Safari 打造的。憑借其獨(dú)特的簡(jiǎn)約發(fā)展的特點(diǎn),它可以幫助開(kāi)發(fā)人員輕松地完成他們的工作。Zepto 最大的特點(diǎn)是保持事情的簡(jiǎn)單性。這個(gè)框架的目標(biāo)是精確的,便于下載和快速執(zhí)行。 ?
官方網(wǎng)站: http://zeptojs.com/
22.Framework7
Framework7 是免費(fèi)開(kāi)源的 HTML 移動(dòng)端框架,用來(lái)開(kāi)發(fā)混合移動(dòng)端應(yīng)用或者 iOS 7 的 Web 應(yīng)用,并且?guī)в?iOS 7 的原生外觀和感覺(jué)。Framework7 也是獨(dú)立的原型應(yīng)用工具。
官方網(wǎng)站: http://www.idangero.us/framework7/
github: https://github.com/nolimits4web/framework7/
25.Ionic
Ionic是一個(gè)前端的框架,幫助開(kāi)發(fā)者使用HTML5, CSS3和JavaScript做出原生應(yīng)用。js部分是基于AngularJS框架,大量使用了Css3,css生成基于Sass,構(gòu)建工具基于最新的gulp,版本升級(jí)基于bower,原生層無(wú)縫封裝了cordova。使用Ionic框架,可以有效利用AngularJs的特性,極大的提供HTML5應(yīng)用開(kāi)發(fā)效率,質(zhì)量,模塊化程度。
官方網(wǎng)站:http://ionicframework.com/
github:https://github.com/driftyco/ionic
轉(zhuǎn)載于:https://www.cnblogs.com/love-is/p/4276079.html
總結(jié)
以上是生活随笔為你收集整理的适用响应式 Web UI 框架的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 让人省心的事件委托
- 下一篇: ubuntu双系统导致进windows花