成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

14款響應(yīng)式布局的前端開發(fā)框架

2024-04-05    分類: 網(wǎng)站建設(shè)

前端開發(fā)并不是一個(gè)容易的工作,不僅需要掌握HTML、CSS和JavaScript,針對(duì)不同的瀏覽器版本和平臺(tái),還需要了解如何設(shè)計(jì)出跨平臺(tái)的網(wǎng)站。如今隨著響應(yīng)式設(shè)計(jì)的流行,前端開發(fā)變得越來(lái)越困難,且花費(fèi)的時(shí)間更長(zhǎng)。

本文收集了14個(gè)響應(yīng)式前端開發(fā)框架,可以幫助前端開發(fā)人員大大簡(jiǎn)化開發(fā)過(guò)程。針對(duì)每個(gè)框架,文中均指出了它所包含的UI組件及JavaScript插件。幾乎所有的框架都采用了響應(yīng)式網(wǎng)格系統(tǒng)。

使用這些前端框架,有如下好處:

跨瀏覽器。這一點(diǎn)已被證實(shí)。

一致性。UI組件,如導(dǎo)航、按鈕、標(biāo)簽、表單、下拉框、表格……,在設(shè)計(jì)上保持風(fēng)格一致。

快速開發(fā)。你可以快速、容易地構(gòu)建布局。這些框架都配有詳細(xì)的說(shuō)明文檔。

響應(yīng)式。所有CSS組件及JavaScript插件可以很好地從桌面過(guò)渡到移動(dòng)設(shè)備上。

Ink為一個(gè)界面工具包,用于快速開發(fā)Web界面,具有易于使用、易于擴(kuò)展特點(diǎn)。它可以為構(gòu)建布局提供解決方案,可以展示普通的界面元素,可以實(shí)現(xiàn)以內(nèi)容為中心、對(duì)用戶友好的交互方式。

HTML&CSS:布局、導(dǎo)航、排版、圖標(biāo)、表單、提示框、表格

JS:Gallery、表格、樹視圖、排序列表、日期選擇插件、制表符、表單驗(yàn)證及一些行為(??俊⒄郫B、關(guān)閉)

其他:Sass Mixins

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

HTML&CSS:網(wǎng)格、布局、排版、按鍵、標(biāo)題、表單、圖標(biāo)、社交圖標(biāo)、響應(yīng)式文本、對(duì)話框、工具提示

JS:導(dǎo)航、制表符(Tab)、提示框、Cycle2

其他:Sass Mixins

這是一個(gè)靈活、強(qiáng)大的響應(yīng)式Web框架,使Web開發(fā)更快速、更簡(jiǎn)單。

HTML&CSS:網(wǎng)格、排版、表單、按鈕、提示框、頁(yè)碼、面包屑導(dǎo)航(breadcrumb)、列表、表格

JS:提示框、制表符(Tab)、切換開關(guān)(Toggle switch)、折疊

Foundation由ZURB公司設(shè)計(jì),ZURB是一家產(chǎn)品設(shè)計(jì)公司,位于加州坎貝爾。Foundation為最先進(jìn)的響應(yīng)式前端開發(fā)框架,它擁有很多布局模板、CSS樣式表及自己開發(fā)的優(yōu)秀JavaScript插件。

HTML&CSS:網(wǎng)格、布局模板、圖標(biāo)字體、響應(yīng)式表格、SVG格式的社交圖標(biāo)、頁(yè)碼、面包屑導(dǎo)航(breadcrumbs)、側(cè)導(dǎo)航、按鍵、排版、標(biāo)簽、提示框、面板、價(jià)格表、進(jìn)度欄、表格、縮略圖

JS:下拉按鈕、拆分按鈕、轉(zhuǎn)換開關(guān)、Flex視頻、燈箱、下拉、響應(yīng)式布局(通過(guò)轉(zhuǎn)換圖片大小來(lái)實(shí)現(xiàn))、旅游導(dǎo)航、麥哲倫全局導(dǎo)航(Magellan Sticky Nav)、Orbit圖片滑動(dòng)幻燈片插件等

其他:可定制皮膚表單(Custom Skinned Forms)、SCSS Mixin

Gumby 2基于Sass開發(fā)。Sass為功能強(qiáng)大的CSS預(yù)處理器,利用它可以快速開發(fā)Gumby。

HTML&CSS:網(wǎng)格、表單、按鈕、導(dǎo)航、標(biāo)簽、Entypo圖標(biāo)

JS:下拉、浮窗、制表符(Tab)、開關(guān)與轉(zhuǎn)換(Toggles & Switches)

其他:可定制皮膚表單(Custom Skinned Forms)、SASS和Compass

該框架集合了HTML5、CSS和JavaScript,幫助開發(fā)人員快速開發(fā)Web產(chǎn)品。它覆蓋了所有UI組件,同時(shí)也包含一些有用的JavaScript插件。

HTML&CSS:網(wǎng)格、排版按鈕、列表、表格、圖標(biāo)、面包屑導(dǎo)航、圖片、表單

JS:菜單、代碼高亮插件、制表符(Tab)、幻燈片播放、表單驗(yàn)證

其他:CSS幫助文檔

Maxmertkit擁有完整的文檔,包含大量實(shí)例,并且提供了拖拽生成代碼的功能。

HTML&CSS:網(wǎng)格、布局、徽章、按鈕、表單、圖標(biāo)、標(biāo)簽、菜單、進(jìn)度欄、表格、下拉、工具提示

JS:按鈕、旋轉(zhuǎn)木馬、通知、彈出框、滾動(dòng)條、制表符(Tab)

其他: Sass、Coffee腳本語(yǔ)言

大家對(duì)Twitter Bootstrap已十分熟悉了。憑借全面的UI組件、易用的網(wǎng)格和組件,Bootstrap已成為眾多設(shè)計(jì)者和開發(fā)者最喜歡的快速開發(fā)工具?,F(xiàn)在已經(jīng)有很多第三方Bootstrap程序和JavaScript插件可供使用。

HTML&CSS:網(wǎng)格、布局、排版、編碼、表格、表單、按鍵、圖片、圖標(biāo)、按鈕組、導(dǎo)航、面包屑導(dǎo)航、頁(yè)碼、標(biāo)簽、徽章、縮略圖、提示框、進(jìn)度欄

JS:模態(tài)窗口(Modals)、提示效果(Tool Tips)、“泡芙”效果(Popovers)、滾動(dòng)監(jiān)控(Scrollspy)、旋轉(zhuǎn)木馬(Carousel)、輸入提示(Typeahead)等等。

其他:定制器(Customizer)、LESS CSS

Skeleton 是一個(gè)小的JS和CSS文件集合,可幫你快速開發(fā)漂亮的網(wǎng)站,適合各種屏幕設(shè)備,包括手機(jī)。Skeleton基于960 Grid開發(fā),是一個(gè)UI框架。

HTML&CSS:GRid、排版、按鈕、表單、媒體查詢(Media Queries)

Kube是一款最小化的,支持響應(yīng)式的前端框架,包括一個(gè)簡(jiǎn)潔的CSS文件,用于方便地創(chuàng)建響應(yīng)式布局,包括了兩個(gè)JS文件來(lái)完成Tab以及頁(yè)面的按鈕操作。

HTML&CSS:排版、網(wǎng)格、表單、表格、按鈕、導(dǎo)航、圖標(biāo)

JS:按鈕、制表符(Tab)

其他: LESS CSS

Helium是一個(gè)前端響應(yīng)式Web框架,使用HTML5、CSS3快速制作原型以及開發(fā)產(chǎn)品。Helium很像Twitter Bootstrap和ZURB Foundation,事實(shí)上,Helium使用了兩者不少的代碼。但與這兩個(gè)框架不同的是,Helium設(shè)計(jì)更加輕量級(jí),而且更容易修改。Helium 只有30KB左右,而Bootstrap有100KB,ZURB有200多KB。

HTML&CSS:網(wǎng)格、按鈕、排版、表單

JS:下拉、表單驗(yàn)證

其他:Sass、Compass

Markup是一套集布局、小組件、UI組件和字體排版樣式為一體的框架。它可以作為你設(shè)計(jì)自己網(wǎng)站的起點(diǎn)。

HTML&CSS:布局、網(wǎng)格、排版、表單、按鈕、面包屑導(dǎo)航、導(dǎo)航列表、導(dǎo)航菜單

JS:沒(méi)有JavaScripts,只有單純的CSS

TopCoat是一套免費(fèi)的開源UI元素類庫(kù),整套類庫(kù)不使用任何JavaScript,而是使用CSS和HTML來(lái)生成。

HTML&CSS:圖標(biāo)、字體、按鍵、面包屑導(dǎo)航、表單、下拉、滑動(dòng)開關(guān)、選擇、滾動(dòng)條、切換按鈕

JS:沒(méi)有JavaScripts,只有單純的CSS

Pure是一個(gè)相當(dāng)小的框架,壓縮及最小化后僅有5.7KB。它沒(méi)有使用任何JavaScript,只是HTML和CSS。該CSS框架為響應(yīng)式布局,采用模塊化結(jié)構(gòu),每個(gè)模塊的樣式可以單獨(dú)使用。

HTML&CSS:網(wǎng)格、排版、表單、按鍵、表格、菜單

JS:沒(méi)有JavaScripts,只有單純的CSS

其他:程序皮膚制作工具(Skin Builder)、YU 庫(kù)。

結(jié)論

根據(jù)你的需要,選擇可以與設(shè)計(jì)相匹配的框架。我們不應(yīng)該根據(jù)框架來(lái)構(gòu)建網(wǎng)站,因?yàn)樗鼤?huì)很大程度上限制設(shè)計(jì)者的思維。

如果前端設(shè)計(jì)/布局不是那么重要,那么我們可以選擇使用某一框架。

本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司!

標(biāo)題名稱:14款響應(yīng)式布局的前端開發(fā)框架
文章來(lái)源:http://jinyejixie.com/news27/322377.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供、GoogleChatGPT、網(wǎng)站排名網(wǎng)站維護(hù)、搜索引擎優(yōu)化

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

成都seo排名網(wǎng)站優(yōu)化
蒲城县| 扎鲁特旗| 武义县| 曲麻莱县| 江阴市| 望谟县| 黎平县| 新蔡县| 南阳市| 钟祥市| 凤台县| 伊通| 桃园市| 驻马店市| 盱眙县| 嘉黎县| 黄梅县| 改则县| 安徽省| 巴南区| 石河子市| 壤塘县| 偏关县| 望江县| 册亨县| 宜君县| 隆德县| 宜兴市| 常山县| 肃宁县| 淳安县| 嵊州市| 左权县| 大兴区| 韩城市| 东乡| 马关县| 理塘县| 于都县| 麻城市| 昔阳县|