出去打工和儿子租房
  • 前端常用的框架有哪些?

    2020-11-27 10:54發布

    89條回答
    年年
    2樓 · 2020-11-27 14:07

    常用的前端框架有Bootstrap框架、React框架、Vue框架、Angular框架、Foundation框架等等

    想當熊貓
    3樓 · 2020-11-27 14:08

    目前前端行業最流行的三大框架是Vue、react和angular

    熟練掌握其中一至兩種對求職和升職加薪有非常大的幫助

    我想吃肉
    4樓 · 2020-11-27 14:08

    1. Twitter BootStrap (Apache v2.0;響應式)

    時髦、直觀并且強大的前端框架,讓Web開發變得更加容易。


    2. Foundation (MIT;響應式)

    最先進的響應式前端框架。

    3. 960gs(GPL&MIT;響應式)

    960gs提供了一個簡單的網格系統,適合快速開發。

    4. Skeleton(MIT;響應式)

    非常漂亮的Web模板,適合響應式、移動友好的開發。

    5. 99lime HTML KickStart(Free)

    適合網站快速開發的極簡HTML構建模塊。

    6. Kube(Free;響應式)

    面向專業人員的CSS框架。

    7. Less Framework(MIT;響應式)

    自適應的CSS網格系統。

    8. Flameinwork(Free)

    適合懶人開發者的前端微框架。

    9. G5 Framework(Free)

    (x)HTML5、CSS、PHP前端開發框架。

    10. Easy Framework(Free)

    Easy Framework是一個一體化前端解決方案,分structural、 presentational、interactive三層。

    11. Blueprint(Free)

    一個旨在減少開發時間的前端框架。

    12. YAML(Creative Commons)

    (x)HTML+CSS框架,適合開發現代化浮動布局。

    13. BlueTrip(Free)

    一個功能全面、并且美麗的CSS框架,適合于Blueprint搭配使用。

    14. YUI3:Grids CSS(BSD)

    YUI Grids CSS是最著名的CSS框架之一,是由Yahoo開發小組開發而成。 YUI Grids CSS為開發者提供了預先設置的四種不同頁面寬度,六種不同的模板。

    15. 52framework(Creative Commons)

    對HTML5支持非常好,簡單易用。

    16. elastiCSS(MIT)

    一個基于Web接口和印刷布局的簡單CSS框架。

    17. Emastic(Free)

    一個與眾不同的CSS框架。

    18. Fluid 960 Gride System(GPL/MIT)


    Fluid 960 Grid System的模版是根據Nathan Smith之前的作品而創建的。即960 Grid System:傳承了MooTools和jQuery JavaScript libraries的效果。

    19. xCSS(MIT)

    一個面向對象的CSS框架,能讓你的工作流更加簡潔。xCSS基于CSS,可以在開發復雜樣式時,提供面向對象的工作流。

    20. EM CSS Framework(MIT/GPL)

    EM CSS Framework提供了一個960px寬 + 12 列網格系統 + CSS的通用樣式。


    哆啦公
    5樓 · 2020-11-27 14:09

    目前企業比較常用的有 vue,react,typescript等

    愛吃地瓜的劉小美
    6樓 · 2020-11-27 14:12

    目前比較流行的前端三大框架是Angular、React、Vue,三者各有所長。

    1、Angular

    Angular是一個JavaScript框架,最為核心的是:MVC(Model–view–controller)、模塊化、自動化雙向數據綁定、語義化標簽、依賴注入等等。Angular通過指令擴展了HTML,以一個 JavaScript文件形式發布,通過script標簽添加到網頁中。Angular的優勢在于:零配置、深度整合設計模式、約定才是框架的本質。不過對于JavaScript工程師來說,少有工程化的經驗,學習起來會比較痛苦。

    2、React

    React是一個Facebook和Instagram用來創建用戶界面的JavaScript庫,用于構建頁面、Javascript庫。主要功能是對DOM操作,聲明式設計,更快的開發出Web應用系統。借助React,你可以非常輕松地創建用戶交互界面,為你應用的每一個狀態設計簡潔的視圖。在數據改變時,React也可以高效地更新渲染界面。

    3、Vue

    Vue是用于構建交互式的Web界面的庫,它提供了MVVM數據綁定和一個可組合的組件系統,具有簡單、靈活的 API。從技術上講,Vue集中在MVVM模式上的視圖模型層,并通過雙向數據綁定連接視圖和模型。實際的DOM操作和輸出格式被抽象出來成指令和過濾器,相比其它的MVVM框架,Vue更容易上手。


    小橘子
    7樓 · 2020-11-27 14:27

    如果是純移動端的話,zepto加frozenui加seajs挺好的。感覺bootstrap的響應式不適合純移動端開發,因為太重了,對移動端載入速度影響很大,純移動端還是小快靈比較好。

    如果是做H5那種活動頁,推薦用motion.js,挺好用的,效果贊贊的。

    PC端的話,jq+bootstrap是個挺好的組合,或者用backbone也是挺普遍的,但是如果是開發企業管理系統那種的web頁面可以考慮extjs,現在改名叫sencha了,組件多。相反,個人感覺react就不是很適合用來開發企業管理系統。

    react現在很火,發展也很快,可以先學習學習,不過react只是View這一層,是個庫,并不是一個完整的框架。而Angular可以說是個大而全的框架,但是載入速度相對比較慢,還有就是Angular 2.0和1.0有很大不同,幾乎是個推翻重做的感覺,所以現在如果用1.x的話,感覺會比較尷尬。

    另外,模塊化的話,用seajs的也挺多。

    還有就是可以多關注一下打包工具,grunt,gulp和百度開發的FIS。


    vue.js?- 小巧精致,漸進式JavaScript 框架

    Material-UI?-?一組反應元件,實現谷歌的材料設計

    Angular?- Google開發的前端技術框架

    React,js 中文網?- 用于構建用戶界面的Javascript庫

    Foundation?- 高級響應式前端框架

    jQuery?- 一個快速、簡潔的JavaScript框架

    Sass?-?世界級強大的專業CSS擴展語言

    Pure?-?輕型響應式CSS框架




    flame
    9樓 · 2020-11-27 14:39

    一個前端開發框架其實就是一系列產品化的HTML/CSS/JavaScript組件的集合,我們可以在設計中使用它們。前端開發框架有很多,其中有一些寫得很棒。為了大家的使用便利,下文列舉了目前最強大應用最廣泛的幾款前端開發框架。記住,這些框架并不僅僅是CSS 柵格之類的一些東西,它們包括的是整套的前端開發框架。

    1. Bootstrap

    Boostrap絕對是目前最流行用得最廣泛的一款框架。它是一套優美,直觀并且給力的web設計工具包,可以用來開發跨瀏覽器兼容并且美觀大氣的頁面。它提供了很多流行的樣式簡潔的UI組件,柵格系統以及一些常用的JavaScript插件。

    Bootstrap是用動態語言LESS寫的,主要包括四部分的內容:

    腳手架——全局樣式,響應式的12列柵格布局系統。記住Bootstrap在默認情況下并不包括響應式布局的功能。因此,如果你的設計需要實現響應式布局,那么你需要手動開啟這項功能。

    基礎CSS——包括基礎的HTML頁面要素,比如表格(table),表單(form),按鈕(button),以及圖片(image),基礎CSS為這些要素提供了優雅,一致的多種樣式。

    組件——收集了大量可以重用的組件,如下拉菜單(dropdowns),按鈕組(button groups),導航面板(navigation control)——包括:tabs,pills,lists標簽,面包屑導航(breadcrumbs)以及頁碼(pagination),縮略圖(thumbnails),進度條(progress bars),媒體對象(media objects)等等。

    JavaScript——包括一系列jQuery的插件,這些插件可以實現組件的動態頁面效果。插件主要包括模態窗口(modals),提示效果(tool tips),“泡芙”效果(popovers),滾動監控(scrollspy),旋轉木馬(carousel),輸入提示(typeahead),等等。

    Bootstrap已經足夠強大,能夠實現各種形式的 Web 界面。為了更加方便地利用Bootstrap進行開發,很多工具和資源可以用來配合使用,下面列舉了其中的一部分工具和資源。

    jQuery UI Bootstrap —— 對于jQuery和Bootstrap愛好者來說這是個非常好的資源,能夠把 Bootstrap的清爽界面組件引入到jQuery UI中。

    jQuery Mobile Bootstrap Theme —— 和上面提到的jQuery UI主題類似,這是一個為jQuery Mobile建立的主題。如果你想讓用Bootstrap開發的網站在手機端也可以優雅訪問,那么這個資源對你來說很方便易用。

    Fuel UX —— 它為Bootstrap添加了一些輕量的JavaScript控件。Fuel UI 安裝,修改,更新以及優化都很簡單方便。

    StyleBootstrap.info —— Bootstrap提供了自己的幾種界面風格,StyleBootstrap提供了更多的配色選項,并且你可以給每個組件都應用不同的配色。

    BootSwatchr —— 利用這個工具你可以立刻查看主題修改后的效果。對于每一次變動的效果,這個應用都會生成一個唯一的URL方便你與他人分享,你也可以在任意時刻修改你的主題。

    Bootswatch —— 提供大量免費的Bootstrap主題。

    Bootsnipp —— 在線前端框架交互組件制作工具,是一個供給設計師和開發者的基于Bootstrap HTML/CSS/JavaScript 架構的免費元素。

    LayoutIt —— 通過界面拖放生成器簡便快捷地創建基于Bootstrap的前端代碼。通過拖放動作將Bootstrap風格的組件加入到你的個人設計里并且可以方便地修改他們的屬性,簡單便捷。

    2. Fbootstrapp

    Fbootstrapp基于Bootstrap并且提供了跟Facebook iframe apps和設計相同的功能。包含用于所有標準組件的基本的CSS和HTML,包括排版、表單、按鈕、表格、柵格、導航等等,風格與Facebook類似。

    3. BootMetro

    BootMetro框架的靈感來自于Metro UI CSS,基于Bootstrap 框架構建,用于創建Windows 8 的Metro風格的網站。它包括所有Bootstrap的功能,并添加了幾個額外的功能,比如頁面平鋪,應用程序欄等等。

    4. Kickstrap

    Kickstrap是Bootstrap的一個變體。它基于Bootstrap,并在它的基礎上添加了許多app,主題以及附加功能。這使得這個框架可以單獨地用于構建網站,而不需要額外安裝什么。你需要做的僅僅是把它放到你的網站上,然后用就可以了。

    App 是一些頁面加載完成之后加載運行的JavaScript和CSS打包文件。默認加載的app有Knockout.js, Retina.js, Firebug Lite, and Updater,你也可以自行添加更多的app。

    選擇不同的主題可以讓你的網站在眾多Bootstrap構建的類似網站中顯得與眾不同。

    附加功能是一些用來擴展Bootstrap UI 庫的附件,它們的語法基本相同或者相似。

    5. Foundation

    Foundation 是一款強大的,功能豐富的并且支持響應式布局的前端開發框架,你可以通過Foundation快速創建原型,利用它所包含的大量布局框架,元素以及最優范例快速創建在各種設備上可以正常運行的網站以及app。Foundation在構建的時候秉承移動優先的策略,它擁有大量實用的語義化功能,并且使用Zepto類庫來取代jQuery,這樣可以帶來更好的用戶體驗,并且提高運行的速度。

    Foundation擁有一套12列的靈活可嵌套的網格系統,你可以用它快速創建適應多種瀏覽設備的布局。它有很多的功能。它定義了很多的樣式,比如字體排版,按鈕,表單,以及多種多樣的導航控件。它也提供了很多的CSS組件,例如操作面板(panels),價格表(price tables),進度條(progress bars),表格(tables)以及可以適應不同設備的可伸縮視頻(flex video)。與此同時,Foundation還包括了很多的JavaScript插件,如下拉菜單(dropdowns),joyride(網站功能引導插件),magellan(網站固定導航插件),orbit(支持觸摸的響應式圖片輪播插件),reveal(彈出框插件),sections(強大的tab插件)以及tooltips(工具提示)等。

    Foundation框架還提供了很多有用的擴展。

    模板(Stencils)——Foundation框架中的所有UI元素都有Omnigraffle stencils以及矢量PDF兩種格式的下載,你可以用它們來方便快捷的繪制線框圖和原型圖。

    HTML模板 —— HTML模板可以方便地用來快速創建頁面布局。你所要做的僅僅是復制得到模板代碼,然后丟到頁面的標簽之間就好了。

    圖標字體(Icon Fonts) —— 包含自定義圖標的一種網頁字體。

    SVG 社交網絡圖標(Social Icons)—— 一組不依賴分辨率的社交網絡圖標(可縮放矢量圖標)。

    響應式表格——Foundation框架中響應式表格的實現機制是固定表格的左邊第一列,然后表格的其他列可以通過滾動條拖拉進行訪問。

    關閉帆布布局(Off-Canvas Layouts)—— 這些布局可以允許一些網頁內容或者導航控件在移動端設備上默認隱藏,當瀏覽屏幕變大或者用戶進行相應操作的時候這些內容再出現。當用戶進行相關操作的時候,網頁內容或者導航控件將會滑動出現。

    如你所見,對于web開發者以及設計師來說,Foundation就像是一個巨大的寶藏。在下載框架的時候,你可以自定義下載框架的內容。

    6. GroundworkCSS

    GroundworkCSS 是前端框架家族里面新添的一款小清新框架。它是基于Sass和Compass的一個高級響應式的HTML5,CSS以及JavaScript工具包,可以用于快速創建原型并且建立在各種瀏覽設備上可以正常工作的網站和app。

    GroundworkCSS擁有一個靈活,可嵌套的流式網格系統,方便你創建任何布局。這個框架有很多讓人印象深刻的功能,比如在平板以及移動端上的網格系統,當屏幕的寬度小于768或者480像素時,頁面中原本并列排版的表格列(grid column)會自動變為獨立的行,而不是折疊在一起。另一個很酷的功能是jQuery的響應式文本(ResponsiveText)插件,這個插件可以動態調整頁面文字的大小以適應瀏覽設備的屏幕大小。這個插件對于可伸縮的標題以及創建響應式表格的時候特別有用。

    GroundworkCSS包含了大量的UI組件,如tabs、響應式數據表格導航、按鈕、表單、響應式導航控件、tiles(一套替代radio按鈕以及其他默認表單元素的優雅組件)、工具提示、對話框、Cycle2(一款強大的,響應式的內容滑塊)以及其他很多的有用組件。它還提供了很多矢量社交網絡圖標以及圖標字體。

    你可以通過切換頁面上方的導航按鈕選擇不同的瀏覽設備要來查看這款框架的效果。通過這種方式,你可以測試在不同的瀏覽設備上各種組件的響應式布局情況。

    GroundworkCSS的文檔寫的非常好,并且包含著很多的示例,為了讓你更快的上手,他還提供了多種響應式的模板。對于這款框架,唯一我可以想到的缺點就是不能自定義要下載的框架內容。

    7. Gumby

    Gumby 是一款基于Sass和Compass的簡單靈活并且穩定的前端開發框架。

    它的流式-固定布局(fluid-fixed layout)可以根據桌面端以及移動設備的分辨率自動優化要呈現的網頁內容。它支持多種網格布局,包括多列混雜的嵌套模式。Gumby提供兩套PSD的模板,方便你在12列和16列的網格系統上進行設計。

    Gumby提供了一個功能豐富的UI工具包,包括按鈕,表單,移動端導航,tabs,跳轉鏈接(skip links),撥動開關(toggles and switches,可以方便快捷地切換元素的class,而不需要進行額外的js操作),抽屜功能(drawers),響應式圖片以及retina圖片等等。為了緊跟最近的設計潮流,Gumby的UI元素中還包括了Metro風格的扁平化設計,你也可以用Pretty風格的漸變設計,或者按照你的想法糅合兩種設計風格。該框架還提供了一套出眾的響應式,擁有獨立分辨率的Entypo圖標,你可以在自己的web項目中盡情使用。

    Gumby有一個很好自定義下載選擇器,你可以自行配置各個組件的顏色,并且按自己的需求方便地下載。

    8. HTML KickStart

    HTML Kickstart 是一款可以用來方便創建任何布局的集合HTML5,CSS和jQuery的工具包。它提供了干凈,符合標準以及跨瀏覽器兼容的代碼。

    這款框架提供了多種樣式表,包括網格,排版,表單,按鈕,表格,列表以及一些跨瀏覽器兼容的web組件比如JavaScript的幻燈片功能,tabs,面包屑導航,包含子菜單的菜單以及工具提示等等。

    你可以使用99Lime UIKIT提供的UI組件來搭建你的產品線框圖。

    9. IVORY

    IVORY 是一款輕量,簡單但是強大的前端框架,可以用于320到1200像素寬度的響應式布局。它基于12列的響應式網格布局,包含表格,按鈕,表格,分頁,撥動開關,工具提示,手風琴,選項卡等網站中常用的組件和樣式。

    當你需要一款輕量靈活,不需要額外的其他功能,并且適應不同瀏覽設備的框架時,IVORY是你最好的選擇。

    10.Kube

    最后,如果你的新項目需要一款實在的,不需要復雜的額外功能組件的,足夠簡單的框架,那么 Kube 將會是你正確的選擇。Kube是一款最小化的,支持響應式的前端框架,它沒有強加的樣式設計,因此給了你充分的自由來開發自己的樣式表。它提供了一些web元素的基本樣式,比如網格,表單,排版,表格,按鈕,導航,鏈接以及圖片等等。

    Kube框架包括一個簡潔的CSS文件用于方便地創建響應式布局,還包括了兩個JS文件來完成tab以及頁面的按鈕操作。如果你希望得到Kube最大化的靈活性以及個性化定制,那么你可以下載開發者版本(developer version),這個版本包括了LESS文件(包括各種變量,mixins以及模塊)。


    相關問題推薦

    • 抓包是什么意思?2020-04-01 17:36
      回答 7
      已采納

      抓包(packet capture)就是將網絡傳輸發送與接收的數據包進行截獲、重發、編輯、轉存等操作,也用來檢查網絡安全。抓包也經常被用來進行數據截取等。抓包可以通過抓包工具來查看網絡數據包內容。通過對抓獲的數據包進行分析,可以得到有用的信息。目前流行的...

    • 回答 120

      相對前幾年來說,要高上不少了,畢竟入行的人也是越來越多了,基礎的工作對應想要參與的人群基數越來越大,但是對于高端人才的需求還是很多,人才還是相對稀缺性的。所以,想要學web或者其他技術也一樣,別等,別觀望。web前端就業方向特別多包括web前端開發...

    • SSR 是什么意思?2020-03-20 18:56
      回答 6

      SSR就是一臺服務器,可以利用 SSR 在遠程的服務器上配置 SSR,使其能夠成為 SSR 節點,這樣本地電腦或者其它設備利用 SSR 節點實現 VPN 或者遠程上網及游戲加速等方面。ShadowsocksR(簡稱 SSR)是 Shadowsocks 分支,在 Shadowsocks 的基礎上增加了一些數據...

    • 回答 25

      相對定位就是讓元素在原有位置上向某方向偏移,即相對于原來的位置進行定位絕對定位是讓元素脫離原始的文檔流,通過上下左右四個方向的便宜控制元素的位置,其他元素會對其"視而不見"...

    • 回答 65
      已采納

      前端是目的就業前景非常不錯的一個計算機技術,但是自學的話還是有一定難度的,網絡上自學是碎片化的,同時互聯網技術跟新換代快,自己的話比較吃力也學習不到最新的技術。

    • 回答 52
      已采納

      計算機培訓方向比較多,建議找適合自己的方向選擇培訓編程類:JAVA、WEB、Python、C/C++、C#等測試類:軟件測試運維類:云計算、網絡安全設計類:UI設計、3D建模等

    • 回答 11

      1、代碼判斷xAxis: {type: 'time',splitLine: {show: false},interval: 3600, // 設置x軸時間間隔axisLabel: {formatter: function(value, index) {return liangTools.unix2hm(value)}}},首先要把xAxis 顯示類型設置成time,然后設置對應X軸......

    • 回答 8

      HTML5 + CSS + JavaScript 開發 跨平臺重用代碼?

    • 回答 4

      采用rem單位自動響應,并提供獨有柵格化系統快速定義寬高、邊距節省css代碼量,同時總結各大型移動端網頁,提供一套ui顏色搭配規范,尺寸規范,字體規范等。

    • 回答 10

      iView UI、ioni、SUI

    • 回答 6

      ?jQTouch?

    • 回答 4

      如果只是普通的移動端用vue react 或者dva 如果是要編譯成小程序什么的或者混生 就用uni-app(對應vue語法)taro(對應react) 或者純原生 這個沒有限制的,自己怎么舒服怎么來

    • 回答 4

      因為可以運用在網頁和小程序的開飯中,而且開源,用著便宜,企業都很喜歡

    • 回答 10

      一、Visual Studio Code下載地址:https://code.visualstudio.com/微軟在2015年4月30日Build 開發者大會上正式宣布了 Visual Studio Code 項目:一個運行于 Mac OS X、Windows和 Linux 之上的,針對于編寫現代 Web 和云應用的跨平臺源代碼編輯器。Visual Stud...

    • 回答 9

      jQuery自帶淡入淡出效果 https://www.w3school.com.cn/jquery/jquery_fade.asp 看看這個?

    沒有解決我的問題,去提問
    出去打工和儿子租房