10大html5å端æ¡æ¶
1ãBootstrap
é¦å
说 Bootstrapï¼ä¼°è®¡ä½ ä¹çå°ä¼å
说æè
ä¸å®ä¼æè¿ä¸ª( åµåµäº )ï¼è¿æ¯è¯´æå®ç强大ä¹å¤ï¼æ¥ææ¡æ¶ä¸å£æ±å±±çå¿æ°ãèªå·±åå
¥éçæ¶åæ¬ç代ç ä»»ä½ä¸ä¸ªåæ¯é½å¾èªå·±æ²åºæ¥æ¡æè
åºçå³å¿ï¼æ¥è®©èªå·±æé¿ãç»æåå°å¨å´å ç§åºåçå¼è¯±å¼å§äº Bootstrap æ
ç¨ãæ¬äººè½ç¶æ¯ä¸ªè®¾è®¡+å端çä¸éæä¸ç人æï¼ä½æ¯è天åªè®©æä¼ç¨ PS ååç§è®¾è®¡å·¥å
·å´ä¸ç»æè·è®¾è®¡å¦¹åä¸æ ·ç审ç¾ï¼æ以è¿ä¹æ¯ææåéæ© Bootstrap çåå ä¹ä¸ï¼å®è®©æååºæ¥çä¸è¥¿å¥½æ¹è½å¨å¦¹åé¢åè£
个é¼ï¼ä¸è¿æ¶é´é¿äºé¾å
è§å¾ Bootstrap ç¾ç让人ç¦èºï¼ ä½å¥½å¨å®çæ¯ä¸ªçæ¬é½ä¼æå¾å¤§çæ¹åï¼ä¸ä¼è®©äººè§å¾èªå·±åçç½ç«ä¼è·å¾å¤ç½ç«æè¸ãBootstrap çç¨æ³åå
¶ç®å( è¿ä¹å¯è½å°±æ¯ Bootstrap ä½è
é
æ»å士æ æ°ï¼äºè§£ä»ä»¬ççç»æ )ï¼ä»¥è³äºæ¯ä¸ªå°å端é½å¯ä»¥å¿«éä¸æï¼å ä¹æ²¡ä»ä¹å¦ä¹ ææ¬ã
2ãAUI
第ä¸ä¸ªæ¯æè¿åèµ·æ¥çAUIï¼è½ç¶ä½è
声称æ¯ä¸ä¸ºAPICloudå¼åè
设计çä¸å¥UIæ¡æ¶ï¼ä½å®é
å®è¿æ¯è§£å³äºå¾å¤ç§»å¨å端å¼åçæ®éé®é¢ï¼æ¯ä¸» è¦é¢åæ··åå¼åç CSS æ¡æ¶ãçèµ·æ¥ä½è
æ¯è¾ççï¼åç§é«çº§ CSS3 éå°ä½¿ç¨ï¼è¿è®©æä¹ä¸å¾ä¸å»æ¥æ¥è¿äºä¸ª CSS3 çå
¼å®¹æ§ãä¸è´ä¼ææç¶éçé½æ¯å
¼å®¹ä¸éçå±æ§ï¼ååäºä¸é¡¿æ¿å¨ä»åè¾æä¸å¤§è认è¯äºå 个好ä¸è¥¿ï¼å¹¶ä¸æ¡æ¶è¿æä¾äºè天çé¢ã计æ°å表çç»ä»¶ï¼è§£å³äºå¾å¤ å¤æç让æéªå¨çå¸å±ï¼ç°å¨å¯ä»¥ç´æ¥æ¿èµ°å°±ç¨ã
3ãAmaze UI
第äºä¸ªä»ç»çæ¯å¦¹åUIï¼æå使ç¨å®æ¯å 为æ¬å°éå°äºä¸ä¸ªç±çº ç»ç»è设计士ï¼æä¸æ¬¡å¥¹è·æçåä½è¾ä¸çäºï¼ç»æä¸å¥é¡¶ä¸å¥ç BOOS 夸äºå¥¹ï¼æåªå¥½æ ¹æ®å¥¹çæ³æ³å»è§£å³ï¼ç»ææåæ¾å°äºAmaze UI æ¡æ¶( æä¸ä»æä½ å«æææ·« )ï¼æç
§å®æ¹çè¯è¯´å°±æ¯ "åºäºç¤¾åºå¼æºé¡¹ç®æ建çä¸ä¸ªè·¨å±å端æ¡æ¶ï¼ä»¥ç§»å¨ä¼å
ï¼ä»å°å±å°å¤§å±ï¼æç»å®ç°ææå±å¹éé
ï¼éåºç§»å¨äºèæ½®æµ" ãä½å
¶å®æå°±æ¯çä¸å®è½è§£å³å½å
æµè§å¨åå¨çè·¨å±éé
åå
¼å®¹æ§é®é¢ã
4ãFrozen UI
æ段æ¶é´çå° QQ ç¬é´é«å¤§ä¸äºï¼åæ¥åå¤æå¬ï¼åæ¥ QQ 客æ端ä¹ç¨äº æ··åå¼åï¼å
¶ä¸QQä¼åå端ç¨çæ¯ Frozen UIï¼å¹¶ä¸è¿å¥æ¡æ¶å¼æºï¼æ¬£åè¥çèä¸ä½å¿éçå¯å¯ç´æ¥ä¸æè¯äºä¸éï¼åä½éªæè§åºç¡æ ·å¼ææç®åè²è°æ¸
ç½ï¼æ个æ¯è¾æ´»è·ç社åºæ以ç»ä»¶ä»ä¹çä¹æ¯è¾ä¸° å¯ã
5ãFrozen UI
第ä¸ä¸ªæ¯Frozen UIï¼æ段æ¶é´çå° QQ ç¬é´é«å¤§ä¸äºï¼åæ¥åå¤æå¬ï¼åæ¥ QQ 客æ端ä¹ç¨äº HTML æ··åå¼åï¼å
¶ä¸QQä¼åå端 å°±æ¯ç¨ç Frozen UIï¼å¹¶ä¸è¿å¥æ¡æ¶å¼æºï¼æ¬£åè¥çèä¸ä½å¿éçå¯å¯ç´æ¥ä¸æä¸ä¸äºé¤äºè¯äºä¸éå°±å¼å§è¯ç¨ï¼åä½éªçå°±æ¯åºç¡æ ·å¼ææç®åè²è°æ¸
ç½ï¼æ个æ¯è¾æ´»è·ç社åºæ以ç»ä»¶ä»ä¹çä¹æ¯è¾ä¸°å¯ã
6ãWeUIi
第å个æ¯WeUIåå FrozenUIé½å±äº å·®ä¸å¤ç WeUiäºï¼ä¹æ¯ä¸ä¸ªæ¯è¾ä¸ä¸çæ¡æ¶ï¼WeUIåºè¯¥è¯´æ¯FrozenUIåè
æ´ä¸ä¸ï¼è¯ 说è¿ä¸ªå®ç½é½ä¸æï¼ææççé½å¨ gitHub Issues 解å³äºï¼è¿ä¸ªæ¡æ¶æå
¶ç®åï¼ä½ç§¯å½ç¶å°±ä¸ç¨è¯´äºï¼æ¨¡åä¹å°± 7 个左å³ï¼ä¸è¿ä½éè½ç¶å°å çå´ä¸éï¼å£ç¢ç star å°±å¤äºï¼æ¡æ¶ä» 16/1/23 åçè³ä» github star è¶
è¿ 7K,ä¸è¿ä¹ä¸æé¤ç¨æ·æ²¡å°æ¹åæ³æ以é½è· å° git ä¸æ¥ï¼ååã
7ãSUI
âSUI æ¯ä¸å¥åºäºbootstrapå¼åçå端ç»ä»¶åºï¼åæ¶å®å¥¹ä¹æ¯ä¸å¥è®¾è®¡è§èãéè¿SUIï¼å¯ä»¥é常æ¹ä¾¿ç设计åå®ç°ç²¾ç¾ç页é¢âã æç¶ è¿æ¯ç´æ¥å¼ç¨å®æ¹ç»çæ¯ç¥æ å³å¹¿åè¦èçèªå·±çèç»è( å§â¦ )ï¼å½ç¶äºå°±å广å说çï¼å¦æä½ ä¹åç¨è¿ Bootstrapï¼ é£ä¹å¯ä»¥è½»æ¾è½¬ å SUIï¼è¿å¯è½å°±æ¯æ·å®ç»å端å±ä¸ä»¬çç¦å©äºãã
8ãAUI
第å
个æ¯æè¿åèµ·æ¥çæè¿åèµ·æ¥ç AUIï¼è½ç¶ä½è
声称æ¯ä¸ä¸ºAPICloudå¼åè
设计çä¸å¥UIæ¡æ¶ï¼ä½å®é
å®è¿æ¯è§£å³äºå¾å¤ç§»å¨å端å¼åç æ®éé®é¢ï¼æ¯å®ä¸»è¦é¢åæ··åå¼åç CSS æ¡æ¶ãï¼æ以çèµ·æ¥ä½è
æ¯è¾ççï¼åç§é«çº§ CSS3 éå°ä½¿ç¨ï¼è¿ä¹ä½¿å¾æä¸å¾ä¸å»æ¥æ¥è¿äº 个 CSS3 çå
¼å®¹æ§ãä¸è´ä¼ææç¶éçé½æ¯å
¼å®¹ä¸éçå±æ§ï¼ååäºä¸é¡¿æ¿å¨ä»åè¾æä¸å¤§è认è¯äºå 个好ä¸è¥¿ï¼å¹¶ä¸æ¡æ¶è¿æä¾äºè天çé¢ã计æ°å表çç» ä»¶ï¼è§£å³äºå¾å¤å¤æç让æéªå¨çå¸å±ï¼ç°å¨å¯ä»¥ç´æ¥æ¿èµ°å°±ç¨ã
9ãMUI
æ¾ç»ä¸ç´ä½¿ç¨ Android ç³»ç»çæï¼åæ¥è§å° IOSï¼ææ移æ
å«æäºï¼ä¸ç¥é为ä»ä¹è¹ææ¯æ¬¡è°æ´ç³»ç»æé½ç¹å«å欢ï¼åæ¥ä¸æ®µæ¶é´å 为缺设计 æä¸é¨æ¨¡ä»¿ IOS ç³»ç»å UIï¼ä½å§ç»ä¸è½å¤åå°å¾å¥½ï¼æ æé´å°±åç°äº MUI è¿ä¸ªæ¡æ¶ï¼è¿ä¸ªæ¡æ¶ç»æçå¸å¼ä¹å¤å°±æ¯å®ç UI æ¯ä»¥ IOS 为 主ä½è®¾è®¡çï¼å½ç¶å®ä¹è¡¥å
äºandroidç¹æUIæ ·å¼ã并ä¸MUIå®æ¹å£°ç§°ç¨æ¥å¼åæ·±å
¥ä»¥ååç°æ¿å®å APP è¿è½å¤æé«ç¨æ·ä½¿ç¨æµç
度ï¼ç¶å便è¯ç æ´æ·±å
¥çäºè§£å使ç¨ä¸æ®µæ¶é´ã
10ãSemantic UI
åæ°ç¬¬ä¸ä¸ªæ¯ Semantic UIï¼æ¥è§¦è¿ä¸ªæ¡æ¶è¿æ¯å 为 Bootstrapï¼Semantic UI åä¸çº¿ github å°±åå°å¤§éå¼åè
çå
³æ³¨ï¼ä»¥è³äºå¾å¤äººæ¿å®ä¿©å¯¹æ¯åç§æåºåç§å¤¸ï¼æ¯å¥½æ¯åä¸è½ååå«äººä¸å¥åå¥å°±æ¬èµ·ææå¼å§èµï¼ç¨äºä»¥åæè§ UI ä¸è· Bootstrap 没太å¤çåºå«ï¼ä¸è¿ä»£ç å½åè§èä¸å´ç¸å·®ç大ï¼æ¬äººè®¤ä¸º Semantic UI æ¯ä¸æ¯å°±æ³åçä¸ä¸æ ·ï¼å®çå½åå
¨æ¯éç¨å¤åçæ¹å¼ï¼ç±»åç¹å«ç离æ£ï¼ç¨çæ¶åä½ å¾å¾å°å¿èªå·±æ©å±æè
æ°å¢ç class å½åä¸å®çç±»åå²çªã
Foundation
Foundation ç®æ¯æ¡æ¶ççå
èå¦ï¼é½è¯´æ¡æ¶å»çæ©ï¼èè¿ä¸ªæ¡æ¶ä¸ç´å°ç°å¨ä¾ç¶è¿ä¹ççé¨ï¼å¦æä½ æ¯è¾ä»æ Bootstrap å¼åæè¸çå°´å°¬äºæ
ï¼é£ä¹ä½ å¯ä»¥èèä½¿ç¨ Foundation ãå³ä½¿ä½ 使ç¨é¢å®ä¹ç UI å
ç´ , ä¹ä¸ä¼ä¸å
¶ä»ç½ç«å¤ªåï¼å°±åå®æ¹è¯´çç»å¼åè
æ´çµæ´»çæ¡æ¶ä½éªã
UiKit
UIkitæ¯YOOthemeå¢éå¼åçï¼å¨è®¸å¤WordPress主é¢ä¸é½æåºç¨(ä¹å°±æ¯å¦æä½ æ¯ä¸ª WordPress ç±å¥½è
ï¼é£ä¹è¿ä¸ªæ¡æ¶åºè¯¥æ¯è¾éå深究)ï¼å¹¶ä¸æ¡æ¶è½å¤éè¿GUIç¼è¾å¨åæå¨ç¼è¾ï¼æ以å®æä¾äºä¸ä¸ªçµæ´»ã强大çèªå®ä¹æºå¶ãæ¡æ¶åå©LESSã jQueryãnormalize.cssåFontAwesomeå¼æºé¡¹ç®çç¬æç¹ç¹ï¼æ´åæäºè¿ä¹ä¸æ¬¾è½»é级ã模ååçå端æ¡æ¶ã
Pure
ç»äºæåä¸ä¸ªäºï¼æåä½ ä¸æ ·å¥½å¼æ£® (ï½ï¿£â½ï¿£)ï½)ï¼è¿ä¸ªæ¡æ¶æ¯æå¨å管çç³»ç»æ¶æ¥è§¦çï¼éæ©ä½¿ç¨ä¹æ¯å 为æ¡æ¶å°å·§ï¼å¹¶ä¸æ¯çº¯ CSSï¼æ²¡æ太å¤ççµæ¯ï¼å¥½ç¨æ¥ä¸å
¶ä»æ¡æ¶å¿«éç»å使ç¨ã
温馨提示:答案为网友推荐,仅供参考