web響應(yīng)式前端框架總匯

時間：2023-05-09 19:18:01 | 來源：網(wǎng)站運營

時間：2023-05-09 19:18:01 來源：網(wǎng)站運營

web響應(yīng)式前端框架總匯：Bootstrap

來自 Twitter，是目前最受歡迎的前端框架，Bootstrap 是基于 html、css、JavaScript 的，它簡潔靈活，使得開發(fā)"Web響應(yīng)式網(wǎng)站"更加快捷。它支持 Sass 變量和 mixin、響應(yīng)式柵格系統(tǒng)、自帶大量組件和眾多強大的 JavaScript 插件。




Amaze UI

Amaze UI 以移動優(yōu)先（Mobile first）為理念，從小屏逐步擴展到大屏，最終實現(xiàn)所有屏幕適配，適應(yīng)移動互聯(lián)潮流。它含近 20 個 CSS 組件、20 余 JS 組件，更有多個包含不同主題的 Web 組件，可快速構(gòu)建界面出色、體驗優(yōu)秀的跨屏頁面，大幅提升開發(fā)效率。

相比國外框架，Amaze UI 關(guān)注中文排版，根據(jù)用戶代理調(diào)整字體，實現(xiàn)更好的中文排版效果；兼顧國內(nèi)主流瀏覽器及 App 內(nèi)置瀏覽器兼容支持。Amaze UI 面向 html5 開發(fā)，使用 CSS3 來做動畫交互，平滑、高效，更適合移動設(shè)備，讓 Web 應(yīng)用更快速載入。




Foundation

Foundation 用于開發(fā)響應(yīng)式的 HTML, CSS and JavaScript 框架。它是一個易用、強大而且靈活的框架,用于構(gòu)建基于任何設(shè)備上的 Web 應(yīng)用，是一個以移動優(yōu)先的流行框架。
它可以讓你輕松設(shè)計出漂亮的響應(yīng)式網(wǎng)站、應(yīng)用程序和電子郵件，在任何設(shè)備上看起來都非常漂亮。Foundation 已使用在 Facebook, eBay, Samsung, Amazon, Disney等。


Groundwork CSS

GroundworkCSS 是一個基于 Sass 預(yù)處理器的開源項目 ，主要用于快速構(gòu)建響應(yīng)式 Web 應(yīng)用程序。擁有一個靈活的、可嵌套的網(wǎng)格系統(tǒng)，可以創(chuàng)建適應(yīng)多種瀏覽設(shè)備的布局。 Groundwork 還提供多種 UI 組件，如導(dǎo)航、按鈕、圖標(biāo)、表單、Tabs、對話框、工具提示等等。


MUELLER Grid System

基于Compass打造的MUELLER是一套模塊化的網(wǎng)格系統(tǒng)，支持響應(yīng)式或非響應(yīng)式的布局，讓你對列寬、基線網(wǎng)格和media queries擁有全面的控制權(quán)。



Cool Kitten

Cool Kitten框架是一套輕量級的HTML/CSS/JS工具集，涉及技術(shù)包括Normalize.css、Stellar.js和jQuery Easing插件，可以幫你創(chuàng)建具有時差滾動效果的響應(yīng)式頁面。



Profound Grid

使用SCSS構(gòu)建的Profound Grid是一個彈性化(可以液態(tài)也可以固定寬度)的響應(yīng)式網(wǎng)格系統(tǒng)，你可以根據(jù)需求添加預(yù)置媒體文件的布局結(jié)構(gòu)(通過調(diào)整列的寬度或增減列)。與其他的網(wǎng)格系統(tǒng)不同，Profound Grid使用負(fù)邊距(Negative Margins)來計算列，所以液態(tài)布局在任何瀏覽器當(dāng)中看上去都能保持一致。



Centurion

利用SASS和CSS3 media queries構(gòu)建，Centurion是一套非常易用的響應(yīng)式Web框架。它的解決方案中提供了可以方便進行定制化的導(dǎo)航、表格、標(biāo)簽(使用CoffeeScript構(gòu)建)等元素。即使是CSS樣式表也是通過Sass創(chuàng)建的，使其能夠在代碼中的任何地方根據(jù)需求包含或排除特定的樣式定義。



34 Responsive Grid System

34Grid基于“等量分布式縱列(equally distributed columns)”布局構(gòu)建。與其他各類優(yōu)秀的網(wǎng)格系統(tǒng)相比，34Grid能夠為每一行內(nèi)容都提供等量分布的縱列。它是完全可定制的，允許你根據(jù)自己的需求(最大縱列數(shù)量、縱列邊距、行間距等)下載代碼包。



One% CSS Grid

One% CSS Grid是一款基于百分比的12列液態(tài)CSS網(wǎng)格系統(tǒng)，專門針對想要快速構(gòu)建響應(yīng)式網(wǎng)頁的用戶而設(shè)計。你可以選擇兩種方式上手，一種適用于1280px寬的界面，另一種適用于1024px的規(guī)格。



RWD Grid

RWD Grid是一款基于流行的960.gs網(wǎng)格系統(tǒng)打造的響應(yīng)式框架。它的命名規(guī)則與960.gs相仿；為了增加代碼的可讀性，所有的下劃線都被替換為連字符。



Sassaparilla

Sassaparilla并非一套樣板化和主題化的框架，它能通過SCSS和Compass來創(chuàng)建出可重用的彈性化樣式表。



Base

Base是一款12列的960px響應(yīng)式CSS框架，它能提供你快速創(chuàng)建響應(yīng)式Web項目所需要的一切。Base內(nèi)置一套最小化的HTML5模板(包含jQuery)，一套基本樣式表，一個默認(rèn)的JS文件，一個用于定制樣式表的LESS文件。



Bourbon Neat

Neat是一款基于Sass和Bourbon構(gòu)建的語義化網(wǎng)格框架。它簡潔而強大，可以幫你快速構(gòu)建響應(yīng)式布局結(jié)構(gòu)。通過使用breakpoint() mixin，你可以為每種media query調(diào)整縱列的數(shù)量，并將這些設(shè)置存儲在項目全局的變量當(dāng)中。



Extra Strength Responsive Grids

Extra Strength可以創(chuàng)建適應(yīng)性很強的基于百分比的液態(tài)響應(yīng)式網(wǎng)格。對齊的方式很容易，你可以對網(wǎng)格進行嵌套，它的class命名方式也很容易記憶，并且適用SASS。



Blok Grid System

Block網(wǎng)格系統(tǒng)是一款移動優(yōu)先的框架，可以幫助開發(fā)者充分控制頁面在手機、平板和桌面設(shè)備上的表現(xiàn)。它基于12列的網(wǎng)格構(gòu)建，你可以為每個div及斷點選擇不同的縱列數(shù)。



Gumby

Gumby是一款基于SASS構(gòu)建的免費開源響應(yīng)式框架。它的特色是隨需隨用，默認(rèn)提供了960網(wǎng)格布局，其代碼庫中包含了Google Webfonts、Entypo圖標(biāo)、模塊化的排版以及全定制化的UI工具集。