鑰?| 鍙欏笣鍒?/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>

涓轟粈涔堜嬌鐢ㄦ鏋?/h2>

涓轟粈涔堜嬌鐢ㄦ鏋訛紵絳旀鏄捐€屾槗瑙侊紝鏁堢巼銆傞櫎姝や箣澶栵紝浣跨敤妗嗘灦鎴栬€呯爺絀舵鏋剁殑鎰忎箟榪樻湁寰堝錛屾瘮濡傞潰鍚戝璞℃€濇兂鐨勫叿浣撳疄鐜般€傚湪涓婁竴瀹跺叕鍙稿伐浣滅殑鏃跺€欙紝寮€濮嬬殑鍑犱釜欏圭洰鎴戜篃鏄敤鏈€鍘熷鐨勬柟娉曚功鍐?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>

鍓嶇妗嗘灦瀵規(guī)瘮

鐩墠甯傞潰涓婂墠绔鏋朵富瑕佸垎閲嶉噺綰т笌杞婚噺綰с€傞噸閲忕駭涓昏鏈?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 涓轟富錛屽洜涓烘垜涓漢鎰熻榪欎笁涓渶鍏鋒湁浠ｈ〃鎬э紝鑰屼笖璁捐椋庢牸鍚勬湁鐗硅壊銆侳oundation 涔熸湁寰堝澶у叕鍙稿湪鐢紝浣嗕互鎴戜釜浜鴻鐐癸紝鏃犺鏄鏋剁殑鏄撶敤鎬ц繕鏄璁￠鏍鹼紝鐩告瘮鍏跺畠鍑犱釜妗嗘灦紼嶉€婁竴絳廣€?/p>

鍏朵腑 Bootstrap 鍜?Semantic 鏄潰鍚戝璞＄殑鏈€濂戒綋鐜般€?/strong>

鎴戝厛璇翠竴涓?Bootstrap 鐨勪紭鍔匡紝涓嶆槸璁捐椋庢牸錛屼笉鏄ā鍧楋紝涓嶆槸鐗規(guī)晥錛岃€屾槸鏍呮牸錛屽搷搴斿紡鏍呮牸銆侭ootstrap 鐨勬爡鏍煎湪涓庡叾瀹冩鏋跺姣斾腑鍗犳湁緇濆浼樺娍錛屾棤璁烘槸鏍呮牸鐨勫垝鍒嗚繕鏄被鍚嶇殑椋庢牸閮藉牚縐扮粡鍏搞€傚鏋滆鑰呮湁蹇冪湅涓€涓?Bootstrap 鐨?Less 婧愭枃浠訛紝灝變細(xì)鎰熷彈鍒?Bootstrap 瀵逛簬鍝嶅簲寮忔爡鏍肩殑鐙叿鍖犲績銆傚叾瀹炲湪 Bootstrap 涔嬪墠涔熸湁寰堝鏍呮牸鏂規(guī)錛屼絾鏄粰浜虹殑鎰熻灝辨槸涓嶅鍒╃儲錛岀被鍚嶇箒鐞愪笉濂借銆傝€屽悗鏉ョ殑寰堝妗嗘灦錛屽挨鍏惰交閲忕駭鐨勬鏋跺ぇ澶氶兘鏈?Bootstrap 鐨勫獎瀛愩€?/p>

涓嬮潰鎴戜滑閫氳繃瀵規(guī)瘮鍑犱釜妗嗘灦鐨勬爡鏍煎拰鎸夐挳鏉ョ湅涓€涓嬬被鍛藉悕鐨勭瓥鐣ャ€?/p>

Bootstrap

<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>

Semantic

<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>

Foundation

<div class="row"> <div class="small-3 columns"></div> <div class="small-9 columns"></div></div>
<button type="button" class="primary button">Primary</button>

UIkit

<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>

Pure

<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>

閫氳繃涓婇潰鐨勫姣旓紝澶у搴旇宸茬粡鍙戠幇浜嗚繖浜涙鏋剁殑鍛藉悕絳栫暐鐨勪笉鍚屻€備笉鍙惁璁わ紝Bootstrap 鐨勫懡鍚嶆渶緇忓吀銆?/p>

涔嬪墠鍦ㄧ綉涓婄湅鍒版湁浜鴻璁哄叧浜庢鏋剁殑鏄撶敤鎬э紝鏈変漢璇?Bootstrap 鐨勭被鍚嶅お闀匡紝鐒惰€岄€氳繃涓婇潰鍑犱釜妗嗘灦鐨勫姣旓紝Bootstrap 鐨勭被騫朵笉綣佺悙錛岃€屼笖鐢ㄩ澶勭悊鍣ㄧ紪鍐欐鏋舵椂宓屽浼?xì)姣旇緝鐏祴z匯€?/p>

Semantic 鐨勭被鍚嶆渶綆€媧侊紝閫氳繃澶氫釜瀹氳鐨勪慨楗扮粍鎴愪竴鍙ヨ瘽錛岀‘瀹炲緢鏈夋剰鎬濄€備絾鏄繃澶氱殑淇グ綾誨湪緙栧啓妗嗘灦鏃朵細(xì)紼嶆樉鍑屼貢錛屾湁鍒╂湁寮婏紝鍥犱漢鑰屽紓鍚с€?/p>

Foundation 鐨勬爡鏍煎簲璇ユ槸鏈€涓板瘜鐨勶紝絳栫暐涓婄被浼?Bootstrap錛屽彧鏄鍏叡灞炴€ц繘琛屼簡鎷嗗垎錛屽ぇ瀹朵篃鍙互鐪嬬湅鍏朵腑鐨勫叿浣撶粏鑺傘€?/p>

UIkit 鍜?Pure 鐨勭瓥鐣ョ浉鍚岋紝閮藉姞浜嗗墠緙€浠ュ尯鍒嗗叾瀹冩鏋訛紝浣嗘槸寰堟樉鐒剁被鍚嶈繃浜庡啑闀夸簡銆傛垜鍦ㄧ紪鍐欐鏋舵椂涔熻繖鏍鋒兂榪囷紝浣嗘槸鏈€緇堟斁寮冧簡榪欑鏂瑰紡銆?/p>

鍏充簬 CSS 棰勫鐞嗗櫒

CSS 棰勫鐞嗗櫒鏃╁凡涓嶆槸浠€涔堟柊椴滀簨錛屼絾鏄湡姝ｈ兘澶熷湪宸ヤ綔涓繍鐢ㄧ殑浜烘湁澶氬皯鍛紵鐔熺粌浣跨敤棰勫鐞嗗櫒鐗規(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>

--autoprefixer--node-sass--npm-run-all--rimraf--onchange

鍏跺疄鏈€涓昏鐨勫氨鏄竴涓?node-sass錛屽叾瀹冪殑閮芥槸杈呭姪 CSS 鏂囦歡鐨勭敓鎴愪慨鏀癸紝澶у鎰熷叴瓚ｇ殑璇濆彲浠ュ幓 npm 瀹樼綉鎼滅儲榪欎簺鎻掍歡錛屼簡瑙ｅ叿浣撶敤娉曪紝濡傛湁涓嶆噦鍙互緇欐垜鐣欒█錛屾垜灝變笉鍟板棪浜嗐€?/p>

緙栧啓杞婚噺綰ф鏋?/h2>

緇堜簬鍒頒簡鏈瘒鏂囩珷鐨勯噸澶存垙銆?/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>

妯″潡鍒掑垎

緙栧啓妗嗘灦鐨勭涓€姝ュ氨鏄紜畾妗嗘灦搴旇鍖呭惈鍝簺妯″潡銆傚洜涓烘槸杞婚噺綰ф鏋訛紝鎵€浠ユā鍧楄偗瀹氭病鏈夐噸閲忕駭妗嗘灦閭ｄ箞鍏ㄩ潰錛屽彧鏈夋牳蹇冪殑涓€浜涚粍浠躲€傞€氳繃姣旇緝涓€浜涜交閲忕駭妗嗘灦浠ュ強(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)綾誨悕

--div.form-horizontal --div.form-group --label.control-label --input.form-control

Snack 鐨勮〃鍗曠粨鏋勫強(qiáng)綾誨悕

--div.form-row --div.form-item --label.form-label --input.form-field

榪欎釜琛ㄥ崟緇撴瀯鏁翠綋鑰岃█榪樼畻涓嶉敊錛屽彧鏄釜鍒湴鏂歸渶瑕佷慨鏀廣€傛湁涓€浜涙鏋朵笉緇?code>input絳夊厓绱犺搗綾誨悕錛岃€屾槸緇欑埗鍏冪礌涓€涓被鍚嶏紝涓漢瀵硅繖縐嶅仛娉曡〃紺虹枒闂紝涓嶈搗綾誨悕浼?xì)闄嶄綆妗嗘灦缂栧啓鍙?qiáng)浣跨敤鐨勭伒媧繪€с€?/p>

絎簩涓瓥鐣ユ槸緇勪歡鐨勪慨楗幫紝姣斿鎸夐挳鍙?qiáng)闈㈡潐K兘瀛樺湪澶氫釜璇錛堥鑹層€佸ぇ灝忕瓑錛夛紝鍦ㄨ繖涓€鐐逛笂鎴戠紪鍐欐鏋舵椂鍋氫簡涓€浜涚畝鍖栵紝椋庢牸涓婃湁浜?Semantic 鐨勫獎瀛愩€?/p>

<button class="btn primary">primary</button><table class="table bordered striped">...</table><div class="boxes primary">...</div>

鍏充簬淇グ綾葷殑絳栫暐鏄竴涓粊鑰呰浠佹櫤鑰呰鏅虹殑闂錛岃嚦浜庡摢縐嶆柟娉曟洿濂斤紝榪橀渶瑕佸湪緙栧啓妗嗘灦鐨勮繃紼嬩腑鎽哥儲銆?/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>

<!-- 榛樿 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>

榪欎釜鏍呮牸騫舵病鏈夊搷搴斿紡錛屽彧鏈変竴涓柇鐐癸紝灝忓睆鎵嬫満涓婄殑璇濇墍鏈夋爡鏍奸兘浼?xì)鍗曡鏄窘C恒€備竴鏂歸潰錛岃繖鏍風(fēng)殑璁捐絎﹀悎澶у鏁拌交閲忕駭妗嗘灦鐨勫垵琛鳳紱鍙︿竴鏂歸潰錛屾垜鎵撶畻鍐嶅啓涓€涓拡瀵圭Щ鍔ㄧ鐨勬鏋訛紝姣曠珶 Web 绔拰縐誨姩绔殑椋庢牸宸窛杈冨ぇ錛屾寜鐓т笟鍔￠渶姹傚垎寮€浼?xì)鏇村ソ銆備笉榪囨渶榪戞垜鏇存敼浜嗘簮鏂囦歡錛屼負(fù)鍝嶅簲寮忛鐣欎簡鎵╁睍鏂瑰紡銆?/p>

琛ㄥ崟

婕旂ず紺轟緥: https://nzbin.github.io/snack/#forms

鍦ㄤ笂闈㈢殑鍛藉悕絳栫暐涓凡緇忓睍紺轟簡 Snack 琛ㄥ崟鐨勫熀鏈粨鏋勶紝鍩烘湰琛ㄥ崟闄や簡緇撴瀯涔嬪錛屾牱寮忎笂騫舵病鏈夊お澶氬彲浠ヨ璁虹殑鍦版柟銆傚湪姝よ涓€涓嬭〃鍗曚腑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>

浠ヤ笂涓ょ緇撴瀯涓嶈兘鏈夊亸宸紝紼嶆湁鍋忓樊鏍峰紡灝變細(xì)閿欎貢錛岀伒媧繪€ц緝宸€傚叾嬈℃垜鍦ㄦ兂涓ょ緇撴瀯鑳戒笉鑳芥暣鍚堝湪涓€璧鳳紝澧炲己鐏墊椿鎬с€傛兂浜嗗緢涔咃紝鎵懼埌浜嗘柟娉曪紝Snack 緇撴瀯濡備笅錛?/p>

<!-- 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>

榪欑緇撴瀯鏈変竴涓ソ澶勶紝灝辨槸鍙互鑷畾涔?code>input鏍峰紡錛岃瑙佷笅闈㈢殑 CodePen 鐨?code>scss鏂囦歡銆?code>radio鐨勮緗拰checkBox鏄竴鏍風(fēng)殑銆?/p>

杈呭姪綾?/h3>

杈呭姪綾繪槸涓€緋誨垪綾葷殑緇勫悎錛屾瘮濡傚瓧鍙峰ぇ灝忋€侀鑹插€箋€乸adding銆乵argin 浠ュ強(qiáng)宸﹀彸嫻姩絳夈€傚湪涓€浜?Bootstrap 鎼緩鐨勫悗鍙扮鐞嗙郴緇熶腑灝や負(fù)甯歌錛岃繖鏍峰竷灞€璧鋒潵灝變細(xì)姣旇緝鐏墊椿銆備互涓嬫槸涓€涓竟妗嗙殑杈呭姪綾匯€?/p>

.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;}

鍏充簬鍔╃被鐨勬洿澶氬唴瀹瑰彲浠?i class="chrome-extension-mutihighlight chrome-extension-mutihighlight-style-4">鎼滅儲闃呰榪欑瘒鏂囩珷銆婂浣曠紪鍐欓€氱敤鐨?Helper Class銆?/p>

鐩掔粍浠?/h3>

婕旂ず紺轟緥: 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>

涓婚

緇欐鏋舵坊鍔犱富棰樻槸涓€浠舵湁瓚ｇ殑浜嬫儏銆係nack 鐨勯粯璁や富棰樻槸鐧借壊錛屽洜涓哄枩嬈㈤粦鑹詫紝鏈€鍚庢坊鍔犱簡鏆楀涓婚錛岀紪鍐欎富棰樺彧闇€鏀瑰彉緇勪歡鐨勯鑹層€傛紨紺烘枃妗?鐨勯〉闈㈢敤浜嗘殫澶滀富棰橈紝鐐瑰嚮涓婃柟鐨勭孩鑹叉寜閽彲浠ュ垏鎹富棰樸€?/p>

鎬葷粨

濡傛灉澶у闂垜閭ｄ釜妗嗘灦鏇村ソ錛屾垜浼?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緇勪歡搴撴垨妗嗘灦錛屽彲浠ュ緢濂界殑瑙ｅ喅涓婅堪闂銆?/p>

Google I/O 2014 鍙戝竷鐨?Material Design 娓愭笎鎴愪負(fù)緇熶竴 Android Mobile銆丄ndroid Table銆丏esktop Chrome 絳夊叏騫沖彴璁捐璇█瑙勮寖錛屽浠庝笟浜哄憳鎰忎箟閲嶅ぇ銆?/p>

materializecss http://materializecss.com/

涓€嬈懼熀浜?Material Design 鐨勭幇浠ｅ搷搴斿紡鍓嶇妗嗘灦銆?/p>

MUI https://www.muicss.com/

MUI鏄竴涓交閲忕駭鐨凜SS妗嗘灦錛岄伒寰狦oogle鐨凪aterial Design璁捐鏂歸拡銆?/p>

MDUI https://www.mdui.org/

MDUI 鏄竴濂楃敤浜庡紑鍙?Material Design 緗戦〉鐨勫墠绔鏋躲€傜壒鐐瑰涓嬶細(xì)

• 澶氫富棰?/p>

• 杞婚噺綰?/p>

• 鍝嶅簲寮?/p>

• 鏃犱緷璧?/p>

• 楂樻€ц兘

• 妯″潡鍖?/p>

• 鏈湴鍖?/p>

• 緇勪歡涓板瘜

• 浣庡涔?fàn)鎴愭?/p>

Material-UI http://www.material-ui.com/

涓€涓熀浜嶨oogle鈥檚 Material Design鐨剅eact緇勫緩妗嗘灦銆傚枩嬈aterial design錛屽張鍠滄鐢╮eact鐨勶紝閫傚悎鎶樿吘榪欎釜妗嗘灦浜嗐€?/p>

Material Design Lite https://getmdl.io/

Material Design Lite 涓嶄緷璧栦換浣昷s妗嗘灦錛岃浣犺交鏉懼皢緗戠珯鏍峰紡鍒囨崲鍒癿d璁捐銆?/p>

Material Foundation https://eucalyptuss.github.io/material-foundation/

鍚屾椂鍩轟簬Foundation UI鍜宮aterial design璁捐鐞嗗康鐨勬鏋躲€?/p>

Angular Material https://material.angular.io/

鍩轟簬angular妗嗘灦鐨刴aterial design妗嗘灦錛岀壒鐐瑰涓嬶細(xì)

• 杞繪澗浠?鍒板畬鎴恆pp寮€鍙?/p>

• 鎬ц兘浼樺紓
  

• 鍗曠嫭涓篴ngular浼樺寲

Material https://daemonite.github.io/material/

鍩轟簬Bootstrap 4鐨刴aterial design璁捐妗嗘灦銆?/p>

LumX http://ui.lumapps.com/

璇ユ鏋朵嬌鐢ㄤ簡AngularJS鍜宻ass寮€鍙戙€?/p>

Keen UI https://josephuspaye.github.io/Keen-UI/

鏄疢aterial Design鐨刅ue.js 鐗堟湰銆?/p>

Material Design for Bootstrap http://fezvrasta.github.io/bootstrap-material-design/

欏懼悕鎬濅箟錛屽張涓€涓狹aterial Design鐨刡ootstrap鐗堟湰銆?/p>

Leaf CSS Framework http://getleaf.com/