濂斤紝鎴戞槸鍧氭寔鍒嗕韓騫茶揣鐨?EarlGrey錛岀炕璇戝嚭鐗堣繃銆奝ython緙栫▼鏃犲笀鑷€氥€嬨€併€奝ython騫惰璁$畻鎵嬪唽銆嬬瓑鎶€鏈功綾嶃€?/p>
濡傛灉鎴戠殑鍒嗕韓瀵逛綘鏈夊府鍔╋紝璇?/span>鍏蟲敞鎴?/strong>錛屼竴璧峰悜涓婅繘鍑匯€?/span>
鍒涗綔涓嶆槗錛屽笇鏈涘ぇ瀹剁粰涓€鐐歸紦鍔憋紝鎶婂叕浼楀彿璁劇疆涓?/span>鈥滄槦鏍団€?/strong>錛岀粰鏂囩珷鐐逛釜鈥滆禐鈥?/strong>鍜?/span>鈥滃湪鐪嬧€?/strong>錛岃阿璋㈠ぇ瀹跺暒~
Web 寮€鍙戞鏋跺濡傜墰姣涳紝鏈枃浠呴€夋嫨浜嗗嚑涓富瑕佹祦琛岀殑妗嗘灦榪涜浜嗕粙緇嶏紝鍚庣畫鎴戜細(xì)鍐嶅垎浜叾浠栧ソ鐢ㄣ€侀珮鏁堢殑 Web 妗嗘灦銆傛榪庡叧娉ㄣ€?/p>
鏈枃浣滆€呬負(fù) Onix-Systems錛屽師鏂囧彂甯冧簬 dev.to銆?/span>
鍦ㄨ繘琛?Web 寮€鍙戞椂錛岄€夋嫨鍚堥€傜殑妗嗘灦鏄竴涓叧閿殑鍐沖畾錛屼細(xì)瀵歸」鐩殑鎴愬姛浜х敓閲嶅ぇ褰卞搷銆傞潰瀵逛紬澶氱殑閫夋嫨錛屽紑鍙戜漢鍛樺線寰€浼?xì)绾牼l撲簬鍝妗嗘灦鏈€閫傚悎鑷繁鐨勯渶姹傘€?/p>
鍦ㄦ湰鏂囦腑錛屾垜浠皢姣旇緝涓€浜涙祦琛岀殑 Web 寮€鍙戞鏋訛紝閲嶇偣浠嬬粛瀹冧滑鐨勪富瑕佸姛鑳姐€佷紭鍔垮拰娼滃湪鐢ㄤ緥銆?/p>
Angular 鐢?Google 寮€鍙戝拰緇存姢錛屾槸涓€嬈懼姛鑳藉己澶т笖涓板瘜鐨勫墠绔鏋躲€傚畠閲囩敤浜?JavaScript 鐨勮秴闆?TypeScript錛屼嬌鍏舵垚涓烘瀯寤哄ぇ瑙勬ā鍜孾鍙淮鎶ゅ簲鐢ㄧ▼搴廬鐨勫己澶ч€夋嫨銆俔(https://onix-systems.com/blog/how-to-design-a-mobile-app-ui)
Angular 鐨勪竴浜涗富瑕佸姛鑳藉寘鎷細(xì)
鍙屽悜鏁版嵁緇戝畾錛?/strong> Angular鐨勫弻鍚戞暟鎹粦瀹氱畝鍖栦簡妯″瀷鍜岃鍥句箣闂寸殑鍚屾錛屽噺灝戜簡瀵規(guī)ā鏉夸唬鐮佺殑闇€姹傘€?/p> 妯″潡鍖栵細(xì) Angular榧撳姳閲囩敤妯″潡鍖栫粨鏋勶紝浣跨粍緇囧拰鎵╁睍搴旂敤紼嬪簭鍙樺緱鏇村鏄撱€傜粍浠躲€佹湇鍔″拰妯″潡鏈夊姪浜庢竻鏅板湴鍒嗙鍏蟲敞鐐廣€?/p> 渚濊禆娉ㄥ叆錛?/strong> Angular鐨勪緷璧栨敞鍏ョ郴緇熶績榪涗簡鏉炬暎鑰﹀悎鍜屽彲嫻嬭瘯浠g爜鐨勫紑鍙戙€?/p> Angular 閫傚悎浼佷笟綰с€佸崟欏甸潰搴旂敤紼嬪簭錛圫PA錛変互鍙?qiáng)闇€瑕侀珮搴︾粍緇囧寲鍜屾湁涓昏鐨勬鏋剁殑欏圭洰銆?/p> React](https://onix-systems.com/blog/react-native-is-the-go-to-framework-for-hybrid-app-development) 鐢?Facebook 寮€鍙戝拰緇存姢錛屽洜鍏跺湪鏋勫緩鐢ㄦ埛鐣岄潰鏂歸潰鐨勭伒媧繪€у拰鎬ц兘鑰屽ぇ鍙楁榪庛€俁eact 鏄竴涓簱錛岃€屼笉鏄竴涓垚鐔熺殑妗嗘灦錛屼富瑕佷晶閲嶄簬瑙嗗浘灞傘€?/p> 涓昏鍔熻兘鍖呮嫭錛?/p> 铏氭嫙 DOM錛?/strong> React 鐨勮櫄鎷?DOM 鍙瀹為檯 DOM 涓彂鐢熷彉鍖栫殑閮ㄥ垎榪涜鏈夋晥鏇存柊錛屼粠鑰屾彁楂樹簡鎬ц兘銆?/p> 鍙噸鐢ㄧ粍浠訛細(xì) React 鎻愬€″垱寤哄彲閲嶇敤鐨勭敤鎴風(fēng)晫闈㈢粍浠訛紝淇冭繘鍩轟簬緇勪歡鐨勬灦鏋勩€?/p> 鍗曞悜鏁版嵁嫻侊細(xì) React 涓殑鍗曞悜鏁版嵁緇戝畾綆€鍖栦簡瀵規(guī)暟鎹彉鍖栫殑璺熻釜錛屽茍澧炲己浜嗗彲棰勬祴鎬с€?/p> React 鏄瀯寤虹幇浠g敤鎴風(fēng)晫闈㈢殑緇濅匠閫夋嫨錛屽挨鍏舵槸瑕佺‘淇濆揩閫熷紑鍙戝拰鏋舵瀯鐏墊椿鐨勬儏鍐典笅銆?/p> Vue.js 鏄竴涓笎榪涘紡 JavaScript 妗嗘灦錛岀敱 Evan You 寮€鍙戯紝浠ョ畝媧佸拰鏄撲簬闆嗘垚鑰岃憲縐般€?/p> 涓昏鍔熻兘鍖呮嫭錛?/p> 澹版槑寮忔覆鏌擄細(xì) Vue.js 浣跨敤澹版槑寮忔柟娉曞畾涔夌敤鎴風(fēng)晫闈紝浣夸唬鐮佹洿鐩磋銆佹洿鏄撲簬鐞嗚В銆?/p> 鍩轟簬緇勪歡鐨勬灦鏋勶細(xì) 涓?React 涓€鏍鳳紝Vue.js 涔熸彁鍊″熀浜庣粍浠剁殑緇撴瀯錛屼互鏋勫緩鍙墿灞曠殑妯″潡鍖栧簲鐢ㄧ▼搴忋€?/p> 鐏墊椿鎬э細(xì) Vue.js 鍙互閫愭寮曞叆鐜版湁欏圭洰錛屽洜姝ら€傜敤浜庡皬瑙勬ā欏圭洰鍜屾洿閲嶈鐨勫簲鐢ㄧ▼搴忋€?/p> Vue.js 鏄偅浜涘笇鏈涘湪綆€鍗曟€у拰鍔熻兘鎬т箣闂村彇寰楀鉤琛$殑寮€鍙戜漢鍛樼殑鐞嗘兂閫夋嫨錛屽洜姝ゅ浜庡垵鍒涘叕鍙稿拰澶嶆潅紼嬪害鍚勫紓鐨勯」鐩潵璇達(dá)紝瀹冩槸涓€涓粷浣崇殑閫夋嫨銆?/p> 鍦ㄦ湇鍔″櫒绔紝Django 鏄竴涓伒寰ā鍨?瑙嗗浘-鎺у埗鍣紙MVC錛夋灦鏋勬ā寮忕殑楂樼駭 Python 緗戠粶妗嗘灦銆侱jango 鐢?Django 杞歡鍩洪噾浼?xì)寮€鍙戯紝浠ュ己璋冨彲閲嶇敤鎬у拰蹇€熷紑鍙戣€岃憲縐般€備富瑕佸姛鑳藉寘鎷細(xì) 瀵硅薄鍏崇郴鏄犲皠錛圤RM錛夛細(xì) Django 鐨?ORM 綆€鍖栦簡鏁版嵁搴撴搷浣滐紝鍏佽寮€鍙戜漢鍛樹嬌鐢?Python 浠g爜涓庢暟鎹簱浜や簰銆?/p> 綆$悊鐣岄潰錛?/strong> Django 鎻愪緵浜嗗悗绔鐞嗙晫闈紝鍑忓皯浜嗙鐞嗗簲鐢ㄧ▼搴忔暟鎹墍闇€鐨勫伐浣滈噺銆?/p> 鍔熻兘鍐呯疆鐞嗗康 錛?/strong> Django 鏈夎澶氬唴緗姛鑳斤紝濡傝韓浠介獙璇併€乁RL 璺敱鍜屾ā鏉匡紝浠庤€屽噺灝戜簡瀵圭涓夋柟搴撶殑闇€姹傘€?/p> 瀵逛簬浠庝簨 Python 欏圭洰鐨勫紑鍙戜漢鍛樻潵璇達(dá)紝Django 鏄竴涓笉閿欑殑閫夋嫨錛屽挨鍏舵槸閭d簺娑夊強(qiáng)鍐呭綆$悊緋葷粺銆佺數(shù)瀛愬晢鍔″鉤鍙版垨鏁版嵁椹卞姩鍨嬪簲鐢ㄧ▼搴忕殑寮€鍙戜漢鍛樸€?/p> 瀵逛簬閭d簺鍠滄綆€綰︾伒媧葷殑 Node.js 鏈嶅姟鍣ㄧ妗嗘灦鐨勪漢鏉ヨ錛孍xpress.js 鏄竴涓緢鍙楁榪庣殑閫夋嫨銆侲xpress.js 綆€鍖栦簡緗戠粶搴旂敤紼嬪簭鍜?API 鐨勫垱寤猴紝鎻愪緵浜嗕竴涓交閲忕駭浣嗗姛鑳藉己澶х殑鍩虹銆?/p> 涓昏鍔熻兘鍖呮嫭錛?/p> 涓棿浠舵敮鎸侊細(xì) Express.js 鍏佽涓棿浠跺鐞嗚姹?鍝嶅簲鍛ㄦ湡鐨勫悇涓柟闈紝濡傝韓浠介獙璇佸拰鏃ュ織璁板綍銆?/p> 璺敱錛?/strong> Express.js涓殑璺敱緋葷粺渚夸簬瀹氫箟澶勭悊涓嶅悓HTTP璇鋒眰鐨勮礬鐢便€?/p> 鍙墿灞曟€э細(xì) 寮€鍙戜漢鍛樺彲浠ユ牴鎹」鐩渶姹傦紝杞繪澗闆嗘垚鍏朵粬搴撴潵鎵╁睍 Express.js 鐨勫姛鑳姐€?/p> Express.js 閫傜敤浜庢瀯寤哄彲鎵╁睍鐨勩€佸揩閫熺殑鏈嶅姟鍣ㄧ搴旂敤紼嬪簭鍜?API錛屽洜姝ゆ垚涓?Node.js 寮€鍙戜漢鍛樼殑棣栭€夈€?/p> 閫夋嫨鍚堥€傜殑 Web 寮€鍙戞鏋跺彇鍐充簬鍚勭鍥犵礌錛屽欏圭洰瑕佹眰銆佸紑鍙戝洟闃熺殑涓撲笟鐭ヨ瘑鍜屽彲鎵╁睍鎬ч渶姹傘€?/p> Angular銆丷eact銆乂ue.js銆丏jango 鍜?Express.js 鍚勬湁浼樺娍鍜岀敤渚嬨€傚紑鍙戜漢鍛樺簲鏍規(guī)嵁欏圭洰闇€姹備粩緇嗚瘎浼拌繖浜涙鏋訛紝浠ョ‘淇濆紑鍙戣繃紼嬫垚鍔熼珮鏁堛€?/p> 鏃犺鏄崟欏甸潰搴旂敤紼嬪簭銆佹笎榪涘紡緗戠粶搴旂敤紼嬪簭榪樻槸鏁版嵁椹卞姩騫沖彴錛屽悎閫傜殑妗嗘灦閮借兘鏋佸ぇ鍦頒績榪涢」鐩殑鎴愬姛銆?/p> 鍘熸枃錛歨ttps://dev.to/onix-systems/web-development-frameworks-a-comparative-analysis-pjcReact
Vue.js
Django
Express.js
緇撹
- EOF -
鏂囩珷宸茬粡鐪嬪埌榪欎簡錛?strong>鍒繕浜嗗湪鍙充笅瑙掔偣涓€滆禐鈥濆拰鈥滃湪鐪嬧€濋紦鍔卞摝~
鍛婅瘔浣犳洿澶氱粏鑺傚共璐?/span>
嬈㈣繋鍥磋鎴戠殑鏈嬪弸鍦?/span>
馃憜姣忓ぉ鏇存柊鎵€鎯蟲墍鎮(zhèn)?/span>
鑰?| 鍙欏笣鍒?/p>
閾炬帴 | www.cnblogs.com/nzbin/p/7073601.html
鍓嶈█
榪欑瘒鏂囩珷鎴戝凡緇忛厺閰夸簡鍗婂勾涔嬩箙錛屾垨鑰呰鎷栨矒浜嗚繖涔堜箙鍚с€傛兂璇寸殑涓滆タ寰堝錛屽嵈鍙堟棤浠庤璧楓€傚浠婅交閲忕駭妗嗘灦濡傞洦鍚庢槬絎嬶紝灞傚嚭涓嶇┓銆傛垜鎯蟲瘡涓漢閮藉簲璇ュ綊綰蟲€葷粨宸ヤ綔涓殑甯歌闇€姹傦紝緙栧啓涓€濂楅€傚悎鑷繁鐨?CSS 妗嗘灦銆?/p>
鍦ㄤ箣鍓嶇殑鏂囩珷涓紝鎴戞彁鍒頒簡闈㈠悜瀵硅薄鐨?CSS錛堟瘮濡?BEM銆丱OCSS銆丼MACSS錛岃瑙?http://vanseodesign.com/css/dry-principles/錛夈€傝繖鏄竴縐嶆€濇兂錛屽茍涓嶆秹鍙?qiáng)鍏蜂綋鐨?CSS 闂錛屼富瑕佹槸綾誨懡鍚嶇殑絳栫暐錛佺幇鍦ㄤ粛鐒舵湁寰堝浜哄浜庡墠绔鏋剁殑璁よ瘑榪樺仠鐣欏湪琛ㄩ潰錛岃涓?Bootstrap 鏄悗绔漢鍛樹笓鐢紝鍓嶇娌″繀瑕佺瓑絳夈€?/p>
鎴戜笉鐭ラ亾榪欑璇存硶浠庝綍鑰屾潵錛屾垜鏈€寮€濮嬩篃涓嶅枩嬈嬌鐢ㄦ鏋訛紝鎴栬鍜屽緢澶氫漢鐨勬兂娉曚竴鏍鳳紝鐣忔儳鏂扮煡璇嗐€佸鎬曢毦浠ラ┚椹€侀亣鍒伴棶棰樼殑鏃跺€欐棤娉曡В鍐崇瓑絳夈€傛渶鍏抽敭鐨勪竴鐐規(guī)槸寰堝浜鴻涓烘鏋剁殑鏍峰紡鏄浐瀹氱殑錛屼慨鏀硅搗鏉ュお楹葷儲錛岃繕涓嶅鑷繁鏍規(guī)嵁璁捐鍥懼啓璧鋒潵鏂逛究銆?/p>
涓轟粈涔堜嬌鐢ㄦ鏋訛紵絳旀鏄捐€屾槗瑙侊紝鏁堢巼銆傞櫎姝や箣澶栵紝浣跨敤妗嗘灦鎴栬€呯爺絀舵鏋剁殑鎰忎箟榪樻湁寰堝錛屾瘮濡傞潰鍚戝璞℃€濇兂鐨勫叿浣撳疄鐜般€傚湪涓婁竴瀹跺叕鍙稿伐浣滅殑鏃跺€欙紝寮€濮嬬殑鍑犱釜欏圭洰鎴戜篃鏄敤鏈€鍘熷鐨勬柟娉曚功鍐?CSS 銆傞」鐩箣涓渶璁╂垜澶寸柤鐨勫氨鏄被鐨勫懡鍚嶃€傛垜鎯沖ぇ澶氭暟浜洪兘鏄牴鎹姛鑳藉幓鍛藉悕錛岃繖灝遍€犳垚浜嗗緢澶氱殑鍐椾綑錛岀浉鍚岀殑緇勪歡鍙兘鍐欏緢澶氭銆傜畝鍗曚婦涓€涓緥瀛愶紝濡備笅鍥撅紝涓漢涓績鐨勭櫥褰曠晫闈€?/p>
寰堝浜哄寘鎷垜鍒氬紑濮嬬殑鏃跺€欏彲鑳戒細(xì)閫夋嫨涓嬮潰鐨勭被鍛藉悕鍙?qiáng)甯冨眬鏂瑰紡錛屽叾閫氱敤鎬ч潪甯稿樊錛?/p>
<div class="login-area">
<div class="login-img">
<img src="..." />
</div>
<div class="login-text">
<a href="...">璇風(fēng)偣鍑葷櫥褰?lt;/a>
</div>
</div>
鐒惰€屼簡瑙?Bootstrap 鐨勪漢搴旇涓€鐪煎氨鍙戠幇涓婂浘灝辨槸涓€涓?media 瀵硅薄錛屾棤闈炰竴浜涘皬緇嗚妭闇€瑕佽皟鏁翠竴涓嬶細(xì)
<div class="media">
<div class="media-left">
<img src="..." />
</div>
<div class="media-body media-middle">
<a href="...">璇風(fēng)偣鍑葷櫥褰?lt;/a>
</div>
</div>
涓轟簡璁╂枃瀛椾笌鍥劇墖灞呬腑瀵歸綈錛屾垜浠彲浠ヤ嬌鐢?Bootstrap 鐨?code>.media-middle鐨勮緟鍔╃被銆傚鏋滃湪宸ヤ綔涓繕瑕佹牴鎹渶姹傝嚜瀹氫箟涓€浜涜緟鍔╃被璋冩暣緇嗚妭錛屽綋鐒惰繖鏄竴涓Щ鍔ㄧ鐨勪緥瀛愶紝鍙互閫夋嫨縐誨姩绔鏋剁浉鍏崇殑 media 瀵硅薄銆?/p>
鍙﹀錛屽湪欏圭洰鏀圭増鐨勬椂鍊欙紝鍘熷鐨勬柟娉曠殑淇敼鏇存槸鎯ㄤ笉蹇嶇澒錛屽彲浠ヨ鏄櫓姊︼紝鍐楅暱鐨?CSS 鏂囦歡銆佹販涔辯殑鍔熻兘鍒掑垎銆佺被鍚嶃€佽壊鍊肩瓑絳夈€傛渶鍚庝篃鍙兘紜潃澶寸毊涓€鐐逛竴鐐逛慨鏀廣€傞偅涓€鍒繪垜鎵嶄綋浼?xì)鍒版鏋剁殑鎰忎箟浠ュ強(qiáng)鍓嶇宸ュ咃L(fēng)殑閲嶈鎬с€傛垜浠庡伐浣滀腑鎬葷粨鍑猴紝瑕佷箞浣犲彲浠ョ啛緇冪殑浣跨敤鏌愪竴涓鏋訛紝瑕佷箞灝辮嚜宸卞疄鐜頒竴涓鏋?/strong>銆?/p> 鐩墠甯傞潰涓婂墠绔鏋朵富瑕佸垎閲嶉噺綰т笌杞婚噺綰с€傞噸閲忕駭涓昏鏈?Bootstrap銆丼emantic銆乁Ikit銆丗oundation 絳夛紝杞婚噺綰ф湁 Pure銆丼keleton銆丮iligram 絳夈€傜粡甯?i class="chrome-extension-mutihighlight chrome-extension-mutihighlight-style-6">鍏蟲敞鍓嶇鍔ㄦ€佺殑宸ョ▼甯堜細(xì)鍙戠幇杞婚噺綰ф鏋舵瘡騫撮兘灞傚嚭涓嶇┓銆傚湪鎴戜笂闈㈡彁鍒扮殑涓繪祦杞婚噺綰ф鏋朵箣澶栬繕鏈夊緢澶氱被浼肩殑妗嗘灦銆?/p> 鎴戜竴鐩撮棶鑷繁錛屼負(fù)浠€涔堣閲嶅閫犺疆瀛愩€傜粡榪囩爺絀訛紝鎴戝彂鐜拌繖浜涜交閲忕駭妗嗘灦鍏跺疄澶у閮戒笉鑳借儨浠誨伐浣滈渶姹傦紝鑰屼笖妯′豢鐨勭棔榪瑰緢閲嶏紝鍩烘湰涓婇兘鎴栧鎴栧皯鐨勬湁 Bootstrap 鐨勫獎瀛愩€傞偅涔堣繖浜涜交閲忕駭妗嗘灦鏈夋病鏈夋剰涔夊憿錛熷綋鐒舵湁銆備絾鏄氨鎴戜釜浜鴻鐐癸紝閫夋嫨杞婚噺綰ф鏋跺弽鍊掍笉濡傝嚜宸卞疄鐜頒竴涓鏋躲€傚洜涓哄ぇ澶氳交閲忕駭妗嗘灦灝卞儚鏄伐浣滄€葷粨錛屾槸鏍規(guī)嵁鑷繁鐨勪笟鍔¢渶姹傚疄鐜扮殑銆傛墍浠ュぇ澶氫笉鍏鋒湁閫氱敤鎬с€?/p> 鍓嶇妗嗘灦鐨勫姣斾富瑕佷互 Bootstrap銆丼emantic銆乁Ikit 涓轟富錛屽洜涓烘垜涓漢鎰熻榪欎笁涓渶鍏鋒湁浠h〃鎬э紝鑰屼笖璁捐椋庢牸鍚勬湁鐗硅壊銆侳oundation 涔熸湁寰堝澶у叕鍙稿湪鐢紝浣嗕互鎴戜釜浜鴻鐐癸紝鏃犺鏄鏋剁殑鏄撶敤鎬ц繕鏄璁¢鏍鹼紝鐩告瘮鍏跺畠鍑犱釜妗嗘灦紼嶉€婁竴絳廣€?/p> 鍏朵腑 Bootstrap 鍜?Semantic 鏄潰鍚戝璞$殑鏈€濂戒綋鐜般€?/strong> 鎴戝厛璇翠竴涓?Bootstrap 鐨勪紭鍔匡紝涓嶆槸璁捐椋庢牸錛屼笉鏄ā鍧楋紝涓嶆槸鐗規(guī)晥錛岃€屾槸鏍呮牸錛屽搷搴斿紡鏍呮牸銆侭ootstrap 鐨勬爡鏍煎湪涓庡叾瀹冩鏋跺姣斾腑鍗犳湁緇濆浼樺娍錛屾棤璁烘槸鏍呮牸鐨勫垝鍒嗚繕鏄被鍚嶇殑椋庢牸閮藉牚縐扮粡鍏搞€傚鏋滆鑰呮湁蹇冪湅涓€涓?Bootstrap 鐨?Less 婧愭枃浠訛紝灝變細(xì)鎰熷彈鍒?Bootstrap 瀵逛簬鍝嶅簲寮忔爡鏍肩殑鐙叿鍖犲績銆傚叾瀹炲湪 Bootstrap 涔嬪墠涔熸湁寰堝鏍呮牸鏂規(guī)錛屼絾鏄粰浜虹殑鎰熻灝辨槸涓嶅鍒╃儲錛岀被鍚嶇箒鐞愪笉濂借銆傝€屽悗鏉ョ殑寰堝妗嗘灦錛屽挨鍏惰交閲忕駭鐨勬鏋跺ぇ澶氶兘鏈?Bootstrap 鐨勫獎瀛愩€?/p> 涓嬮潰鎴戜滑閫氳繃瀵規(guī)瘮鍑犱釜妗嗘灦鐨勬爡鏍煎拰鎸夐挳鏉ョ湅涓€涓嬬被鍛藉悕鐨勭瓥鐣ャ€?/p> Bootstrap Semantic Foundation UIkit Pure 閫氳繃涓婇潰鐨勫姣旓紝澶у搴旇宸茬粡鍙戠幇浜嗚繖浜涙鏋剁殑鍛藉悕絳栫暐鐨勪笉鍚屻€備笉鍙惁璁わ紝Bootstrap 鐨勫懡鍚嶆渶緇忓吀銆?/p> 涔嬪墠鍦ㄧ綉涓婄湅鍒版湁浜鴻璁哄叧浜庢鏋剁殑鏄撶敤鎬э紝鏈変漢璇?Bootstrap 鐨勭被鍚嶅お闀匡紝鐒惰€岄€氳繃涓婇潰鍑犱釜妗嗘灦鐨勫姣旓紝Bootstrap 鐨勭被騫朵笉綣佺悙錛岃€屼笖鐢ㄩ澶勭悊鍣ㄧ紪鍐欐鏋舵椂宓屽浼?xì)姣旇緝鐏祴z匯€?/p> Semantic 鐨勭被鍚嶆渶綆€媧侊紝閫氳繃澶氫釜瀹氳鐨勪慨楗扮粍鎴愪竴鍙ヨ瘽錛岀‘瀹炲緢鏈夋剰鎬濄€備絾鏄繃澶氱殑淇グ綾誨湪緙栧啓妗嗘灦鏃朵細(xì)紼嶆樉鍑屼貢錛屾湁鍒╂湁寮婏紝鍥犱漢鑰屽紓鍚с€?/p> Foundation 鐨勬爡鏍煎簲璇ユ槸鏈€涓板瘜鐨勶紝絳栫暐涓婄被浼?Bootstrap錛屽彧鏄鍏叡灞炴€ц繘琛屼簡鎷嗗垎錛屽ぇ瀹朵篃鍙互鐪嬬湅鍏朵腑鐨勫叿浣撶粏鑺傘€?/p> UIkit 鍜?Pure 鐨勭瓥鐣ョ浉鍚岋紝閮藉姞浜嗗墠緙€浠ュ尯鍒嗗叾瀹冩鏋訛紝浣嗘槸寰堟樉鐒剁被鍚嶈繃浜庡啑闀夸簡銆傛垜鍦ㄧ紪鍐欐鏋舵椂涔熻繖鏍鋒兂榪囷紝浣嗘槸鏈€緇堟斁寮冧簡榪欑鏂瑰紡銆?/p> CSS 棰勫鐞嗗櫒鏃╁凡涓嶆槸浠€涔堟柊椴滀簨錛屼絾鏄湡姝h兘澶熷湪宸ヤ綔涓繍鐢ㄧ殑浜烘湁澶氬皯鍛紵鐔熺粌浣跨敤棰勫鐞嗗櫒鐗規(guī)€х殑浜哄張鏈夊灝戝憿錛?/p> 鎴戜箣鍓嶅伐浣滅殑鏃跺€欎篃娌℃湁鐢ㄩ澶勭悊鍣紝鍥犱負(fù)涓嶇敤錛屾墍浠ヤ篃鎰忚瘑涓嶅埌棰勫鐞嗗櫒鐨勫ソ澶勩€備富瑕佹槸瑙夊緱楹葷儲錛屽洜涓鴻浣跨敤緙栬瘧鍣ㄧ紪璇戜竴涓嬶紝榪樹笉濡傜洿鎺ュ啓 CSS 鏂逛究銆備絾鏄湪欏圭洰緇存姢鐨勬椂鍊欏氨鎰忚瘑鍒伴澶勭悊鍣ㄧ殑濂藉銆?/p> 鍚庢潵鍦ㄥ嚑涓」鐩腑灝濊瘯浜嗛澶勭悊鍣紝浣嗘槸瀵逛簬妯″潡鍖栫殑鍐欐硶涓嶅お鏄庣‘銆傞澶勭悊鍣ㄤ綔涓哄伐鍏鳳紝鍙互瀹炵幇妯″潡鍖栫紪鍐?CSS錛岄偅涔堝簲璇ュ浣曞垝鍒嗘ā鍧楋紵鍙﹀錛岄澶勭悊鍣ㄦ湁寰堝鐗規(guī)€э紝浣嗘槸澶у鏁頒漢鍒氬紑濮嬪彧鐢ㄥ埌鍙橀噺鍜屽祵濂楋紝鍏跺畠鐨勭壒鎬у嚑涔庡緢灝戠敤鍒般€傛垜鐩鎬俊鍦ㄨ嚜宸卞姩鎵嬪疄鐜頒竴涓交閲忕駭妗嗘灦鐨勮繃紼嬩腑錛屾垜浠彲浠ュ棰勫鐞嗗櫒鏈変竴涓叏闈㈢殑浜嗚В銆?/p> 鐩墠嫻佽鐨勯澶勭悊鍣ㄦ湁 Less錛孲ass錛孲tylus 涓変釜錛岄€夋嫨鍝釜瀹屽叏鏄湅鑷繁鐨勪範(fàn)鎯€傛垜鏈€寮€濮嬪洜涓?Bootstrap 浜嗚В鐨?Less錛屼絾鏄洜涓轟範(fàn)鎯€夋嫨浜?Sass錛屽叾嬈?Sass 鐨勫姛鑳借鏇村叏闈竴浜涖€?/p> 鏃犺鏄伐浣滆繕鏄嚜宸卞啓欏圭洰錛岄兘瑕佹惌寤轟竴涓」鐩幆澧冿紝涔熷氨鏄畨瑁呬竴緋誨垪鐨?npm 鍖呫€傜浉姣斿垁鑰曠伀縐嶇殑寮€鍙戞柟寮忥紝浣跨敤宸ュ叿寮€鍙戠殑鍓嶆湡鍑嗗榪囩▼紼嶆樉楹葷儲錛岀劧鑰屼竴鏃︾幆澧冨緩濂斤紝鍚庢湡鐨勫紑鍙戝皢浼?xì)娓稿垉鏈変綑銆?/p> Miligram 榪欎釜杞婚噺綰ф鏋跺湪 Github 涓婃湁寰堥珮浜烘皵錛屼絾鏄瀹炶瘽錛岀敤澶勫茍涓嶅ぇ銆備笉榪囪繖涓鏋剁殑鏋勫緩鏂瑰紡闈炲父鍊煎緱瀛︿範(fàn)銆傝櫧鐒?CSS 瀵逛簬寰堝浜烘潵璇村緢綆€鍗曪紝浣嗘槸鐪熻鍘誨啓涓€涓鏋訛紝榪樻槸闈炲父媯樻墜錛岃繖鏃跺€欏氨闇€瑕佸€熼壌涓€浜涗紭縐€鐨勬鏋躲€?/p> 緙栧啓妗嗘灦澶ц嚧浼?xì)鐢ㄥ埌鐨?npm 濡備笅錛?/p> 鍏跺疄鏈€涓昏鐨勫氨鏄竴涓?node-sass錛屽叾瀹冪殑閮芥槸杈呭姪 CSS 鏂囦歡鐨勭敓鎴愪慨鏀癸紝澶у鎰熷叴瓚g殑璇濆彲浠ュ幓 npm 瀹樼綉鎼滅儲榪欎簺鎻掍歡錛屼簡瑙e叿浣撶敤娉曪紝濡傛湁涓嶆噦鍙互緇欐垜鐣欒█錛屾垜灝變笉鍟板棪浜嗐€?/p> 緇堜簬鍒頒簡鏈瘒鏂囩珷鐨勯噸澶存垙銆?/p> 綆€鍗曚粙緇嶄竴涓嬶紝鎴戠粰鑷繁緙栧啓鐨勬鏋跺彇鍚?Snack錛屽師鎰忊€滃揩槨愨€濓紝涓昏琛ㄨ揪綆€鍗曚箣鎰忋€傝櫧鐒舵槸杞婚噺綰ф鏋訛紝浣嗘垜騫朵笉鎯蟲嬁杞婚噺綰у仛涓哄櫛澶達(dá)紝姣曠珶浣撻噺杞繪剰鍛崇潃鏌愪簺鍔熻兘鐨勭己澶變互鍙?qiáng)鐤忔紡銆傝繖涓鏋剁殑鎰忎箟鏇村鐨勬槸浜ゆ祦瀛︿範(fàn)錛屾垜璇曞浘鍊熼壌鍏跺畠妗嗘灦鐨勪紭縐€涔嬪錛屽敖閲忕畝鍖栫被鍚嶏紝浠ュ強(qiáng)灝濊瘯鎺㈢儲涓€浜涙洿閫氱敤鐨勭粍浠躲€?/p> 澶у鏁扮殑杞婚噺綰ф鏋跺彧鏄?CSS 妗嗘灦錛屼笉娑夊強(qiáng) JS 閮ㄥ垎錛屼富瑕佺敤浜庣綉欏電殑甯冨眬銆傛垜涔嬫墍浠ユ墦綆楄嚜宸辯紪鍐欐鏋訛紝鏄洜涓哄伐浣滀腑閲嶅鐨勪笢瑗垮お澶氾紝閫氳繃妗嗘灦鍙互寰堝ソ鐨勫皢榪欎簺闆舵暎緇勪歡鏁村悎鍒頒竴璧楓€傚彟涓€鏂歸潰錛屽啓涓皬欏圭洰錛屽鐐規(guī)柊鐭ヨ瘑鏄竴浠惰叮浜嬨€?/p> 緙栧啓妗嗘灦鏄幓騫存兂鍋氱殑浜嬫儏錛屼絾鍥犱負(fù)鏃墮棿鍘熷洜錛屾嫋浜嗗緢涔呫€傚啓妗嗘灦涔嬪垵鎴戞浘闄峰叆涓€涓鍖猴紝鎴戞墦綆楄璁′竴浜涙瘮杈冨墠鍗殑鏍峰紡錛岀珛浣撶殑鎸夐挳銆佹誕鍔ㄧ殑闈㈡澘絳夛紝姣斿涓嬪浘涓殑椋庢牸銆?/p> https://dribbble.com/shots/524593-Soft-Interface-Black 浣嗘槸鍦ㄦ柇鏂畫緇紪鍐欐鏋剁殑榪囩▼涓紝鎴戦€愭笎鎵懼埌浜嗘柟鍚戯紝涓婂浘鐨勬牱寮忓彧鏄竴縐嶇毊鑲わ紝緙栧啓妗嗘灦涔嬪垵涓嶅簲璇ユ妸閲嶇偣鏀懼湪榪欎笂闈€傚綋鐒訛紝濂界殑 UI 璁捐涔熸槸妗嗘灦鎴愬姛鐨勪竴閮ㄥ垎銆?/p> 緙栧啓妗嗘灦鐨勭涓€姝ュ氨鏄紜畾妗嗘灦搴旇鍖呭惈鍝簺妯″潡銆傚洜涓烘槸杞婚噺綰ф鏋訛紝鎵€浠ユā鍧楄偗瀹氭病鏈夐噸閲忕駭妗嗘灦閭d箞鍏ㄩ潰錛屽彧鏈夋牳蹇冪殑涓€浜涚粍浠躲€傞€氳繃姣旇緝涓€浜涜交閲忕駭妗嗘灦浠ュ強(qiáng)宸ヤ綔鎬葷粨錛屽ぇ鑷村父鐢ㄧ殑妯″潡鍖呮嫭鏍呮牸銆佸獟浣撱€佹寜閽€佹帓鐗堛€佽〃鍗曘€佽〃鏍箋€侀潰鏉夸互鍙?qiáng)杈呭姪宸ュ厳鱻?/p> 鍦ㄥ父鐢ㄧ殑榪欏嚑涓粍浠朵腑錛岄渶瑕侀噸鐐?i class="chrome-extension-mutihighlight chrome-extension-mutihighlight-style-6">鍏蟲敞鐨勬槸鏍呮牸銆佽〃鍗曞強(qiáng)闈㈡澘錛屽獟浣撶粍浠朵篃寰堥噸瑕侊紝浣嗘槸鑷敱鍙戞尌鐨勭┖闂翠笉澶э紝鎴戠洿鎺ョ敤浜?Bootstrap 鐨勫獟浣撶粍浠躲€?/p> 棣栧厛鏄被鍛藉悕鐨勫眰嬈′笌緇撴瀯銆傜被鍛藉悕涓€鐩存槸鎴戞瘮杈冪籂緇撶殑鍦版柟錛屽垰寮€濮嬪伐浣滅殑鏃跺€欎負(fù)浜嗚搗涓€涓鍚嶇煡鎰忓張綆€媧佺殑綾誨悕鎬繪槸鎶撹€蟲尃鑵€傛垜鍦ㄧ紪鍐欐鏋舵椂灝介噺閬垮厤涓?Bootstrap 鐨勭被鍚嶉噸鍙狅紝浣嗕篃涓嶈兘瀹屽叏閬垮厤銆傚姣斿叾浠栨鏋朵細(xì)鍙戠幇錛岃繖縐嶆儏鍐典笉鍙伩鍏嶇殑浼?xì)鍑虹帋图屾瘯绔熅c誨悕浼?xì)鏈変竴瀹氱殑瑙勫緥鎬т互鍙?qiáng)灞倠啤鎬с€傚湪榪欎竴鐐逛笂鎴戞瘮杈冨枩嬈?Bootstrap 鐨勯鏍箋€備笅闈㈠拰 Bootstrap 鐨勮〃鍗曞仛涓€涓姣斻€?/p> Bootstrap 鐨勮〃鍗曠粨鏋勫強(qiáng)綾誨悕 Snack 鐨勮〃鍗曠粨鏋勫強(qiáng)綾誨悕 榪欎釜琛ㄥ崟緇撴瀯鏁翠綋鑰岃█榪樼畻涓嶉敊錛屽彧鏄釜鍒湴鏂歸渶瑕佷慨鏀廣€傛湁涓€浜涙鏋朵笉緇?code>input絳夊厓绱犺搗綾誨悕錛岃€屾槸緇欑埗鍏冪礌涓€涓被鍚嶏紝涓漢瀵硅繖縐嶅仛娉曡〃紺虹枒闂紝涓嶈搗綾誨悕浼?xì)闄嶄綆妗嗘灦缂栧啓鍙?qiáng)浣跨敤鐨勭伒媧繪€с€?/p> 絎簩涓瓥鐣ユ槸緇勪歡鐨勪慨楗幫紝姣斿鎸夐挳鍙?qiáng)闈㈡潐K兘瀛樺湪澶氫釜璇錛堥鑹層€佸ぇ灝忕瓑錛夛紝鍦ㄨ繖涓€鐐逛笂鎴戠紪鍐欐鏋舵椂鍋氫簡涓€浜涚畝鍖栵紝椋庢牸涓婃湁浜?Semantic 鐨勫獎瀛愩€?/p> 鍏充簬淇グ綾葷殑絳栫暐鏄竴涓粊鑰呰浠佹櫤鑰呰鏅虹殑闂錛岃嚦浜庡摢縐嶆柟娉曟洿濂斤紝榪橀渶瑕佸湪緙栧啓妗嗘灦鐨勮繃紼嬩腑鎽哥儲銆?/p> 婕旂ず紺轟緥: https://nzbin.github.io/snack/#grid 浠諱綍妗嗘灦蹇呴』寤虹珛鍦ㄦ爡鏍肩殑鍩虹涓婃墠鑳界伒媧誨竷灞€銆傛垜鍦ㄥ墠闈㈡彁鍒頒簡 Bootstrap 鐨勭簿鍗庡氨鏄爡鏍肩郴緇熴€傛爡鏍肩郴緇熺殑緙栧啓闇€瑕佷嬌鐢ㄩ澶勭悊鍣ㄧ殑寰幆鍔熻兘錛屽惁鍒欏氨瑕佸仛鏃犺皳鐨勯噸澶嶅姵鍔ㄤ簡銆傛垜閬囧埌榪囦竴浜涜交閲忕駭妗嗘灦鏄敤 Less 緙栧啓鐨勶紝鍏舵爡鏍肩郴緇熷氨娌℃湁鐢ㄥ驚鐜紝榪欐牱鐨勬簮鐮佺◢鏄懼?jǐn)惤H侊紝鍙兘鏄綔鑰呭 Less 鐨勫驚鐜姛鑳戒笉鐔燂紝褰撶劧 Less 鏈韓鐨勫驚鐜瘮杈冨急錛岀敤璧鋒潵鏈変簺鍒壄銆?/p> 鍏充簬棰勫鐞嗗櫒鐨勫驚鐜紝鍙互鍙傜収鎴戜箣鍓嶇炕璇戠殑 銆奀SS 棰勫鐞嗗櫒涓殑寰幆銆嬶紝姣旇緝璇︾粏鍦板姣斾簡涓夌嫻佽棰勫鐞嗗櫒鐨勫驚鐜姛鑳姐€傜畝鍗曡涓€涓嬶紝Less 娌℃湁寰幆錛屼絾鍙互鐢ㄩ€掑綊瀹炵幇錛岃€?Sass 鍜?Stylus 鏈夌湡寰幆銆?/p> 鎴戠紪鍐欑殑鏍呮牸緋葷粺涔熸槸榛樿 12 鍒楋紝浣嗘槸鍚庢潵鍙戠幇 12 鍒楃殑鏍呮牸緙哄皯鏈€甯哥敤鐨勫垪瀹斤紙姣斿 10%銆?0%銆?i class="chrome-extension-mutihighlight chrome-extension-mutihighlight-style-4">30%絳夛級錛屾瘮濡備笅闈?CodePen 灞曠ず鐨勪緥瀛愮敤 12 鍒楁爡鏍兼槸鏃犳硶瀹屾垚鐨勶紝鎵€浠ユ垜鍙堟坊鍔犱簡 10 鍒楁爡鏍鹼紝浣嗕粛鐒舵棤娉曢潰闈勘鍒幫紝涓嶈繃宸茬粡寰堢伒媧諱簡銆?/p> 鏍呮牸鐨勪嬌鐢ㄥ拰 Bootstrap 鏄竴鏍風(fēng)殑錛岄櫎浜?12 鍒楁爡鏍煎錛?0 鍒楁爡鏍間互鍙?qiáng)鍧囧垎鏍呮牸閮借娣诲?code>.cols-綾?/p> 榪欎釜鏍呮牸騫舵病鏈夊搷搴斿紡錛屽彧鏈変竴涓柇鐐癸紝灝忓睆鎵嬫満涓婄殑璇濇墍鏈夋爡鏍奸兘浼?xì)鍗曡鏄窘C恒€備竴鏂歸潰錛岃繖鏍風(fēng)殑璁捐絎﹀悎澶у鏁拌交閲忕駭妗嗘灦鐨勫垵琛鳳紱鍙︿竴鏂歸潰錛屾垜鎵撶畻鍐嶅啓涓€涓拡瀵圭Щ鍔ㄧ鐨勬鏋訛紝姣曠珶 Web 绔拰縐誨姩绔殑椋庢牸宸窛杈冨ぇ錛屾寜鐓т笟鍔¢渶姹傚垎寮€浼?xì)鏇村ソ銆備笉榪囨渶榪戞垜鏇存敼浜嗘簮鏂囦歡錛屼負(fù)鍝嶅簲寮忛鐣欎簡鎵╁睍鏂瑰紡銆?/p> 婕旂ず紺轟緥: https://nzbin.github.io/snack/#forms 鍦ㄤ笂闈㈢殑鍛藉悕絳栫暐涓凡緇忓睍紺轟簡 Snack 琛ㄥ崟鐨勫熀鏈粨鏋勶紝鍩烘湰琛ㄥ崟闄や簡緇撴瀯涔嬪錛屾牱寮忎笂騫舵病鏈夊お澶氬彲浠ヨ璁虹殑鍦版柟銆傚湪姝よ涓€涓嬭〃鍗曚腑 浠ヤ笂涓ょ緇撴瀯涓嶈兘鏈夊亸宸紝紼嶆湁鍋忓樊鏍峰紡灝變細(xì)閿欎貢錛岀伒媧繪€ц緝宸€傚叾嬈℃垜鍦ㄦ兂涓ょ緇撴瀯鑳戒笉鑳芥暣鍚堝湪涓€璧鳳紝澧炲己鐏墊椿鎬с€傛兂浜嗗緢涔咃紝鎵懼埌浜嗘柟娉曪紝Snack 緇撴瀯濡備笅錛?/p> 涔熷彲浠ュ皢鏍峰紡鐩存帴鍔犲埌 榪欑緇撴瀯鏈変竴涓ソ澶勶紝灝辨槸鍙互鑷畾涔?code>input鏍峰紡錛岃瑙佷笅闈㈢殑 CodePen 鐨?code>scss鏂囦歡銆?code>radio鐨勮緗拰 杈呭姪綾繪槸涓€緋誨垪綾葷殑緇勫悎錛屾瘮濡傚瓧鍙峰ぇ灝忋€侀鑹插€箋€乸adding銆乵argin 浠ュ強(qiáng)宸﹀彸嫻姩絳夈€傚湪涓€浜?Bootstrap 鎼緩鐨勫悗鍙扮鐞嗙郴緇熶腑灝や負(fù)甯歌錛岃繖鏍峰竷灞€璧鋒潵灝變細(xì)姣旇緝鐏墊椿銆備互涓嬫槸涓€涓竟妗嗙殑杈呭姪綾匯€?/p> 鍏充簬鍔╃被鐨勬洿澶氬唴瀹瑰彲浠?i class="chrome-extension-mutihighlight chrome-extension-mutihighlight-style-4">鎼滅儲闃呰榪欑瘒鏂囩珷銆婂浣曠紪鍐欓€氱敤鐨?Helper Class銆?/p> 婕旂ず紺轟緥: https://nzbin.github.io/snack/#boxes 鐩掔粍浠舵槸鎴戞暣涓鏋朵腑姣旇緝婊℃剰鐨勪竴涓ā鍧椼€備箣鎵€浠ヨ鍋氳繖涓粍浠朵富瑕佹槸瑙夊緱 Bootstrap 鐨?list 緇勪歡鍜?panel 緇勪歡鍙互鏁村悎鍒頒竴璧楓€傚綋鐒訛紝榪欐牱鐨勫仛娉曟湁鍒╂湁寮娿€傜洅緇勪歡鍦ㄥ悗鍙扮鐞嗙郴緇熺殑甯冨眬涓〃鐜扮殑灝や負(fù)紿佸嚭銆?/p> 鍏跺懡鍚嶄篃鏄縐嶅鏍鳳紝姣斿 panel銆亀idget銆乸ortlet銆乮box銆乧ard絳夛紝姣忎釜鍚庡彴綆$悊緋葷粺妗嗘灦閮戒細(xì)瀵硅繖涓粍浠惰繘琛屾繁搴﹀紑鍙戯紝鍙鍏跺湪甯冨眬涓婄殑閲嶈鎬с€傜粰涓€涓粍浠惰搗涓€涓悎閫傜殑綾誨悕涔熷緢鍏抽敭錛屾兂浜嗗緢涔咃紝鏈€鍚庣敤浜?code>box鐨勭被鍚嶏紝褰撶劧涓€鑸儏鍐典笅灝介噺涓嶈鐢?code>box錛屽洜涓鴻繖涓被鍚嶆瘮杈冨娉涖€備笅闈㈢殑 CodePen 妯℃嫙浜?Bootstrap 鐨?list 鍙?panel 緇勪歡銆?/p> 緇欐鏋舵坊鍔犱富棰樻槸涓€浠舵湁瓚g殑浜嬫儏銆係nack 鐨勯粯璁や富棰樻槸鐧借壊錛屽洜涓哄枩嬈㈤粦鑹詫紝鏈€鍚庢坊鍔犱簡鏆楀涓婚錛岀紪鍐欎富棰樺彧闇€鏀瑰彉緇勪歡鐨勯鑹層€傛紨紺烘枃妗?鐨勯〉闈㈢敤浜嗘殫澶滀富棰橈紝鐐瑰嚮涓婃柟鐨勭孩鑹叉寜閽彲浠ュ垏鎹富棰樸€?/p> 濡傛灉澶у闂垜閭d釜妗嗘灦鏇村ソ錛屾垜浼?xì)姣笉鐘硅鲍鐨勯€夋嫨 Bootstrap銆傚湪宸ヤ綔涓彲浠ユ牴鎹渶姹傜殑闅炬槗榪涜妗嗘灦閫夋嫨錛屽鏋滀笟鍔℃瘮杈冮噸錛屾渶濂芥牴鎹?Bootstrap 榪涜浜屾寮€鍙戯紱鍙嶄箣錛屽彲浠ラ€夋嫨涓€浜涜交閲忕駭妗嗘灦錛屾渶濂借繕鏄牴鎹嚜宸辯殑闇€姹傞€犺疆瀛愶紝濡傛灉澶у鎰挎剰閫夋嫨鎴栨槸鍊熼壌鎴戠殑妗嗘灦錛岄偅浼?xì)鏄垜鐨勮崳骞搞€?/p> Github: https://github.com/nzbin/snack Docs: https://nzbin.github.io/snack 鑷繁鍋氫釜緗戠珯錛屼笉浼?xì)鍓嶇锛屼笉浼?xì)CSS錛屾€庝箞鍔烇紵灝辯畻浼?xì)PHP鍜孞ava絳変笘鐣屾渶濂界殑璇█錛屽鏋滀笉浼?xì)鍓嶇鍜宑ss錛屼篃寰堥毦鍋氬嚭婕備寒鐨勭綉绔欐潵銆?/p> 浠婂ぉ錛屽唹闆蜂負(fù)澶у鎼滈泦浜嗗嚑嬈懼熀浜嶮aterial Design璁捐鐨刄I緇勪歡搴撴垨妗嗘灦錛屽彲浠ュ緢濂界殑瑙e喅涓婅堪闂銆?/p> Google I/O 2014 鍙戝竷鐨?Material Design 娓愭笎鎴愪負(fù)緇熶竴 Android Mobile銆丄ndroid Table銆丏esktop Chrome 絳夊叏騫沖彴璁捐璇█瑙勮寖錛屽浠庝笟浜哄憳鎰忎箟閲嶅ぇ銆?/p> 涓€嬈懼熀浜?Material Design 鐨勭幇浠e搷搴斿紡鍓嶇妗嗘灦銆?/p> MUI鏄竴涓交閲忕駭鐨凜SS妗嗘灦錛岄伒寰狦oogle鐨凪aterial Design璁捐鏂歸拡銆?/p> MDUI 鏄竴濂楃敤浜庡紑鍙?Material Design 緗戦〉鐨勫墠绔鏋躲€傜壒鐐瑰涓嬶細(xì) 澶氫富棰?/p> 杞婚噺綰?/p> 鍝嶅簲寮?/p> 鏃犱緷璧?/p> 楂樻€ц兘 妯″潡鍖?/p> 鏈湴鍖?/p> 緇勪歡涓板瘜 浣庡涔?fàn)鎴愭?/p> 涓€涓熀浜嶨oogle鈥檚 Material Design鐨剅eact緇勫緩妗嗘灦銆傚枩嬈aterial design錛屽張鍠滄鐢╮eact鐨勶紝閫傚悎鎶樿吘榪欎釜妗嗘灦浜嗐€?/p> Material Design Lite 涓嶄緷璧栦換浣昷s妗嗘灦錛岃浣犺交鏉懼皢緗戠珯鏍峰紡鍒囨崲鍒癿d璁捐銆?/p> 鍚屾椂鍩轟簬Foundation UI鍜宮aterial design璁捐鐞嗗康鐨勬鏋躲€?/p> 鍩轟簬angular妗嗘灦鐨刴aterial design妗嗘灦錛岀壒鐐瑰涓嬶細(xì) 杞繪澗浠?鍒板畬鎴恆pp寮€鍙?/p> 鎬ц兘浼樺紓 鍗曠嫭涓篴ngular浼樺寲 鍩轟簬Bootstrap 4鐨刴aterial design璁捐妗嗘灦銆?/p> 璇ユ鏋朵嬌鐢ㄤ簡AngularJS鍜宻ass寮€鍙戙€?/p> 鏄疢aterial Design鐨刅ue.js 鐗堟湰銆?/p> 欏懼悕鎬濅箟錛屽張涓€涓狹aterial Design鐨刡ootstrap鐗堟湰銆?/p>鍓嶇妗嗘灦瀵規(guī)瘮
<div class="row">
<div class="col-md-8"></div>
<div class="col-md-4"></div>
</div>
<button class="btn btn-primary" type="submit">Button</button>
<div class="ui grid">
<div class="ten wide column"></div>
<div class="six wide column"></div>
</div>
<button class="ui primary basic button">Primary</button>
<div class="row">
<div class="small-3 columns"></div>
<div class="small-9 columns"></div>
</div>
<button type="button" class="primary button">Primary</button>
<div class="uk-grid">
<div class="uk-width-1-2"></div>
<div class="uk-width-1-2"></div>
</div>
<button class="uk-button uk-button-primary" type="button">Primary</button>
<div class="pure-g">
<div class="pure-u-1-2"></div>
<div class="pure-u-1-2"></div>
</div>
<button class="pure-button pure-button-primary">A Primary Button</button>
鍏充簬 CSS 棰勫鐞嗗櫒
--autoprefixer
--node-sass
--npm-run-all
--rimraf
--onchange
緙栧啓杞婚噺綰ф鏋?/h2>
妯″潡鍒掑垎
鍛藉悕絳栫暐
--div.form-horizontal
--div.form-group
--label.control-label
--input.form-control
--div.form-row
--div.form-item
--label.form-label
--input.form-field
<button class="btn primary">primary</button>
<table class="table bordered striped">...</table>
<div class="boxes primary">...</div>
鏍呮牸緋葷粺
<!-- 榛樿 12 鍒楁爡鏍鹼紝鎵€浠ョ渷鐣?cols-12 -->
<div class="row">
<div class="col-5"></div>
<div class="col-7"></div>
</div>
<!-- 10 鍒楁爡鏍?-->
<div class="row cols-10">
<div class="col-3"></div>
<div class="col-7"></div>
</div>
琛ㄥ崟
checkbox
鐨勭粨鏋勮皟鏁達(dá)紝鍏堢湅涓€涓?Bootstrap 鐨?code>checkbox緇撴瀯銆?/p><!-- checkbox -->
<div class="checkbox">
<label>
<input type="checkbox" value=""> checkbox
</label>
</div>
<!-- checkbox-inline -->
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> checkbox
</label>
<!-- checkbox -->
<div class="checkbox">
<label>
<input type="checkbox" value=""> checkbox
</label>
</div>
<!-- checkbox-inline -->
<div class="checkbox inline">
<label>
<input type="checkbox" value=""> checkbox
</label>
</div>
label
鏍囩涓娿€傚彟澶栵紝濡傛灉灝?code>input縐誨埌label
鏍囩澶栦篃鏄病鏈夐棶棰樼殑錛屽涓嬶細(xì)<!-- checkbox -->
<div class="checkbox">
<input type="checkbox" id="checkbox1" value="">
<label for="checkbox1">checkbox</label>
</div>
<!-- checkbox-inline -->
<div class="checkbox inline">
<input type="checkbox" id="inlineCheckbox1" value="">
<label for="inlineCheckbox1">checkbox</label>
</div>
checkBox
鏄竴鏍風(fēng)殑銆?/p>杈呭姪綾?/h3>
.border-left-right {
border-left: 1px solid #eee;
border-right: 1px solid #eee;
}
.border-top-bottom {
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.border-left {
border-left: 1px solid #eee;
}
.border-right {
border-right: 1px solid #eee;
}
.border-top {
border-top: 1px solid #eee;
}
.border-bottom {
border-bottom: 1px solid #eee;
}
鐩掔粍浠?/h3>
涓婚
鎬葷粨
materializecss http://materializecss.com/
MUI https://www.muicss.com/
MDUI https://www.mdui.org/
Material-UI http://www.material-ui.com/
Material Design Lite https://getmdl.io/
Material Foundation https://eucalyptuss.github.io/material-foundation/
Angular Material https://material.angular.io/
Material https://daemonite.github.io/material/
LumX http://ui.lumapps.com/
Keen UI https://josephuspaye.github.io/Keen-UI/
Material Design for Bootstrap http://fezvrasta.github.io/bootstrap-material-design/
Leaf CSS Framework http://getleaf.com/
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。