如题所述
ãã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 åºçé件ï¼å®ä»¬çè¯æ³åºæ¬ç¸åæè ç¸ä¼¼ã
ãã
ãã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 åºçé件ï¼å®ä»¬çè¯æ³åºæ¬ç¸åæè ç¸ä¼¼ã
温馨提示:答案为网友推荐,仅供参考