17 款常用響應式 Web UI 框架
1. Bootstrap
Bootstrap是快速開發Web應用程序的前端工具包。它是一個CSS和HTML的集合,它使用了最新的瀏覽器技術,給你的Web開發提供了時尚的版式,表單,buttons,表格,網格系統等等。
官方網站: http://推ter.github.com/bootstrap/
github: https://github.com/推ter/bootstrap
2. Foundation
Foundation 是一個易用、強大而且靈活的框架,用于構建基于任何設備上的 Web 應用。提供多種 Web 上的 UI 組件,如表單、按鈕、Tabs 等等。
官方網站: http://foundation.zurb.com/
github: https://github.com/zurb/foundation
3. Skeleton
Skeleton 是一個小的 JS 和 CSS 文件的集合,可幫你快速開發漂亮的網站,適合各種屏幕設備包括手機。Skeleton 基于 960 grid 開發。它是一個 UI 框架。
官方網站: http://www.getskeleton.com/
github: https://github.com/dhgamache/Skeleton
4. Less Framework
Less框架是一個用于設計自適應網站的CSS網格系統,它包含4個布局和3套預設布局,這些都以一個單一網格為基礎。Less框架的目標是更高效地創建多布局網站,并在布局之間保持一致。
官方網站: http://lessframework.com/
github: https://github.com/jonikorpi/Less-Framework
5. ResponsiveAeon
ResponsiveAeon 是一個HTML5/CSS3的框架,可以非常快速的創建響應的布局。它有一個網格系統是基于總1104px寬度12列,提供了3個非常容易理解的基本類供 使用。該框架使使用@mediaqueries的,支持任何尺寸的設備。除了網格系統,也有排版,列表,表格,按鈕和表格的樣式。
官方網站: http://www.newaeonweb.com.br/responsiveaeon/
github: https://github.com/newaeonweb/ResponsiveAeon-Cssgrid
6. Gumby
Gumby 是一個響應式的以及 960 像素寬度的 CSS 網格框架,支持 PC、平板和手機屏幕顯示。類似 推ter 的 Bootstrap,它包括一個Web UI工具包,有好看按鈕,表格,導航+標簽和一個很小的JavaScript文件。
官方網站: http://www.gumbyframework.com/
github: https://github.com/dsurgeons/Gumby
7. Gridpak
Gridpak 的目的是實現了響應式的 Web 頁面設計,提高您的工作流程,節省了時間。通過生成PNG圖像,CSS和JavaScript,,讓 Gridpak 創建響應式的簡單界面。Gridpak 產生的CSS 兼容 IE 8+,但它使用很多實驗性的CSS屬性,如媒體查詢,盒大小和背景剪輯屬性,所以我們建議您結合 Modernizer 來使用,確保向后兼容性。
官方網站: http://gridpak.com/
8. Responsive GS
Responsive GS 是一個流體網格 CSS 框架,用于快速開發響應式的 Web 網站。 Responsive GS 提供三種風格:12、16 和 24 列,使用 media queries 支持所有標準設備。
官方網站: http://responsive.gs/
github: https://github.com/StudioSnapsize/responsive-gs
9. Amazium
Amazium 是一個基于 960 Grid System 的響應式 CSS 框架,使用 960px 寬度,以適應大多數 1024*768 分辨率的屏幕。Amazium 使用 4 個主要的 media queries 來調整所適應的分辨率大小。
官方網站: http://www.amazium.co.uk/
10. Golden Grid System
Golden grid system是為增強網頁兼容性設計的折疊式grid。具有四個特征:列、跨頁、底線、script。
官方網站: http://goldengridsystem.com/
github: https://github.com/jonikorpi/Golden-Grid-System
11. Centurion
Centurion 是一個基于 SASS 和 CSS3 構建的響應式 Web 框架。
官方網站: http://jhough10.github.com/Centurion/
github: https://github.com/jhough10/Centurion
12. The 1140 CSS Grid
1140網格可以完美適應1280分辨率顯示器。在較小的顯示器上,它可以根據瀏覽器的寬度變成流體形式,并自適應瀏覽窗口。
官方網站: http://cssgrid.net/
github: https://github.com/andytlr/cssgrid/
13. Frameless Grid
Frameless 和Golden Grid System類似,是通過逐列(column by column)形式來自適應頁面布局,而不是通過逐像素(pixel by pixel)形式。Frameless不是一個框架,因為它不包含任何代碼,它只是一個特定類型的自適應網格的想法,你可以將它作為設計工作的一個很好的 出發點。
官方網站: http://framelessgrid.com/
github: https://github.com/jonikorpi/Frameless
14. inuit.css
該框架用于使用較少的代碼實現在較小屏幕(平板電腦、手機)上運行的項目,支持IE6+。
官方網站: http://inuitcss.com/
github: https://github.com/csswizardry/inuit.css
15. Fluid Baseline Grid
Fluid Baseline網格系統是一個HTML5 & CSS3開發工具包,為網站快速設計提供了堅實的基礎。
官方網站: http://fluidbaselinegrid.com/
github: https://github.com/thedayhascome/Fluid-Baseline-Grid
16. HTML5 Boilerplate
HTML5 Boilerplate基于HTML/CSS/JS模板,可以幫助開發者使用HTML5技術快速開發穩健、功能齊全的網站。你可以把它當作自己的新項目模板,在此基礎上建立自己的項目。
該模板包含了幫助開發HTML5站點和應用程序的組件和一些優秀的最佳實踐,只需開發者最少的前期工作,就能為項目提供一個非常穩固的基礎。另外,該模板是高度可定制,可輕松刪除不需要的一些特性。
官方網站: http://html5boilerplate.com/
github: https://github.com/h5bp/html5-boilerplate
17. 320 and Up
320 and Up使用一個小型屏幕樣式表,以防止移動設備加載桌面資源。其中樣式表中包含了一些顏色、排版布局等設置屬性。
官方網站: http://stuffandnonsense.co.uk/projects/320andup/
github: https://github.com/malarkey/320andup/
以上就是17款常用的的響應式web UI框架,排名不分先后,適合自己的才是最好的。