ç®åä»ç»ä¸ä¸ï¼æç»èªå·±ç¼åçæ¡æ¶åå Snackï¼åæâå¿«é¤âï¼ä¸»è¦è¡¨è¾¾ç®åä¹æãè½ç¶æ¯è½»é级æ¡æ¶ï¼ä½æ并ä¸æ³æ¿è½»é级å为å±å¤´ï¼æ¯ç«ä½éè½»æå³çæäºåè½ç缺失以åçæ¼ãè¿ä¸ªæ¡æ¶çæä¹æ´å¤çæ¯äº¤æµå¦ä¹ ï¼æè¯å¾åé´å
¶å®æ¡æ¶çä¼ç§ä¹å¤ï¼å°½éç®åç±»åï¼ä»¥åå°è¯æ¢ç´¢ä¸äºæ´éç¨çç»ä»¶ã
大å¤æ°çè½»é级æ¡æ¶åªæ¯ CSS æ¡æ¶ï¼ä¸æ¶å JS é¨åï¼ä¸»è¦ç¨äºç½é¡µçå¸å±ãæä¹æ以æç®èªå·±ç¼åæ¡æ¶ï¼æ¯å 为工ä½ä¸éå¤çä¸è¥¿å¤ªå¤ï¼éè¿æ¡æ¶å¯ä»¥å¾å¥½çå°è¿äºé¶æ£ç»ä»¶æ´åå°ä¸èµ·ãå¦ä¸æ¹é¢ï¼å个å°é¡¹ç®ï¼å¦ç¹æ°ç¥è¯æ¯ä¸ä»¶è¶£äºã
ç¼åæ¡æ¶æ¯å»å¹´æ³åçäºæ
ï¼ä½å 为æ¶é´åå ï¼æäºå¾ä¹
ãåæ¡æ¶ä¹åææ¾é·å
¥ä¸ä¸ªè¯¯åºï¼ææç®è®¾è®¡ä¸äºæ¯è¾åå«çæ ·å¼ï¼ç«ä½çæé®ãæµ®å¨çé¢æ¿çï¼æ¯å¦ä¸å¾ä¸çé£æ ¼ã
https://dribbble.com/shots/524593-Soft-Interface-Blackä½æ¯å¨ææç»ç»ç¼åæ¡æ¶çè¿ç¨ä¸ï¼æéæ¸æ¾å°äºæ¹åï¼ä¸å¾çæ ·å¼åªæ¯ä¸ç§ç®è¤ï¼ç¼åæ¡æ¶ä¹åä¸åºè¯¥æéç¹æ¾å¨è¿ä¸é¢ãå½ç¶ï¼å¥½ç UI 设计ä¹æ¯æ¡æ¶æåçä¸é¨åã
模ååå
ç¼åæ¡æ¶ç第ä¸æ¥å°±æ¯è¦ç¡®å®æ¡æ¶åºè¯¥å
å«åªäºæ¨¡åãå 为æ¯è½»é级æ¡æ¶ï¼æ以模åè¯å®æ²¡æéé级æ¡æ¶é£ä¹å
¨é¢ï¼åªææ ¸å¿çä¸äºç»ä»¶ãéè¿æ¯è¾ä¸äºè½»é级æ¡æ¶ä»¥åå·¥ä½æ»ç»ï¼å¤§è´å¸¸ç¨ç模åå
æ¬æ
æ ¼ãåªä½ãæé®ãæçã表åãè¡¨æ ¼ãé¢æ¿ä»¥åè¾
å©å·¥å
·ã
å¨å¸¸ç¨çè¿å 个ç»ä»¶ä¸ï¼éè¦éç¹å
³æ³¨çæ¯æ
æ ¼ã表ååé¢æ¿ï¼åªä½ç»ä»¶ä¹å¾éè¦ï¼ä½æ¯èªç±åæ¥ç空é´ä¸å¤§ï¼æç´æ¥ç¨äº Bootstrap çåªä½ç»ä»¶ã
å½åçç¥
é¦å
æ¯ç±»å½åçå±æ¬¡ä¸ç»æãç±»å½åä¸ç´æ¯ææ¯è¾çº ç»çå°æ¹ï¼åå¼å§å·¥ä½çæ¶å为äºèµ·ä¸ä¸ªè§åç¥æåç®æ´çç±»åæ»æ¯æè³æ è
®ãæå¨ç¼åæ¡æ¶æ¶å°½éé¿å
ä¸ Bootstrap çç±»åéå ï¼ä½ä¹ä¸è½å®å
¨é¿å
ã对æ¯å
¶ä»æ¡æ¶ä¼åç°ï¼è¿ç§æ
åµä¸å¯é¿å
çä¼åºç°ï¼æ¯ç«ç±»åä¼æä¸å®çè§å¾æ§ä»¥åå±æ¬¡æ§ãå¨è¿ä¸ç¹ä¸ææ¯è¾å欢 Bootstrap çé£æ ¼ãä¸é¢å Bootstrap ç表ååä¸ä¸ªå¯¹æ¯ã
Bootstrap ç表åç»æåç±»å
--div.form-horizontal
--div.form-group
--label.control-label
--input.form-control
Snack ç表åç»æåç±»å
--div.form-horizontal
--div.form-group
--label.control-label
--input.form-control
è¿ä¸ªè¡¨åç»ææ´ä½èè¨è¿ç®ä¸éï¼åªæ¯ä¸ªå«å°æ¹éè¦ä¿®æ¹ãæä¸äºæ¡æ¶ä¸ç» input çå
ç´ èµ·ç±»åï¼èæ¯ç»ç¶å
ç´ ä¸ä¸ªç±»åï¼ä¸ªäººå¯¹è¿ç§åæ³è¡¨ç¤ºçé®ï¼ä¸èµ·ç±»åä¼éä½æ¡æ¶ç¼åå使ç¨ççµæ´»æ§ã
第äºä¸ªçç¥æ¯ç»ä»¶ç修饰ï¼æ¯å¦æé®åé¢æ¿é½åå¨å¤ä¸ªè¯å¢ï¼é¢è²ã大å°çï¼ï¼å¨è¿ä¸ç¹ä¸æç¼åæ¡æ¶æ¶åäºä¸äºç®åï¼é£æ ¼ä¸æäº Semantic çå½±åã
<button class="btn primary">primary</button><table class="table bordered striped">...</table><div class="boxes primary">...</div>
å
³äºä¿®é¥°ç±»ççç¥æ¯ä¸ä¸ªä»è
è§ä»æºè
è§æºçé®é¢ï¼è³äºåªç§æ¹æ³æ´å¥½ï¼è¿éè¦å¨ç¼åæ¡æ¶çè¿ç¨ä¸æ¸ç´¢ã
æ
æ ¼ç³»ç»
æ¼ç¤ºç¤ºä¾:
https://nzbin.github.io/snack/#gridä»»ä½æ¡æ¶å¿
须建ç«å¨æ
æ ¼çåºç¡ä¸æè½çµæ´»å¸å±ãæå¨åé¢æå°äº Bootstrap çç²¾åå°±æ¯æ
æ ¼ç³»ç»ãæ
æ ¼ç³»ç»çç¼åéè¦ä½¿ç¨é¢å¤çå¨ç循ç¯åè½ï¼å¦åå°±è¦åæ è°çéå¤å³å¨äºãæéå°è¿ä¸äºè½»é级æ¡æ¶æ¯ç¨ Less ç¼åçï¼å
¶æ
æ ¼ç³»ç»å°±æ²¡æç¨å¾ªç¯ï¼è¿æ ·çæºç ç¨æ¾åçªï¼å¯è½æ¯ä½è
对 Less ç循ç¯åè½ä¸çï¼å½ç¶ Less æ¬èº«ç循ç¯æ¯è¾å¼±ï¼ç¨èµ·æ¥æäºå«æãå
³äºé¢å¤çå¨ç循ç¯ï¼å¯ä»¥åç
§æä¹åç¿»è¯çãCSS é¢å¤çå¨ä¸ç循ç¯ãï¼æ¯è¾è¯¦ç»å°å¯¹æ¯äºä¸ç§æµè¡é¢å¤çå¨ç循ç¯åè½ãç®å说ä¸ä¸ï¼Less 没æ循ç¯ï¼ä½å¯ä»¥ç¨éå½å®ç°ï¼è Sass å Stylus æç循ç¯ã
æç¼åçæ
æ ¼ç³»ç»ä¹æ¯é»è®¤ 12 åï¼ä½æ¯åæ¥åç° 12 åçæ
æ ¼ç¼ºå°æ常ç¨çå宽ï¼æ¯å¦ 10%ã20%ã30%çï¼ï¼æ¯å¦ä¸é¢ CodePen å±ç¤ºçä¾åç¨ 12 åæ
æ ¼æ¯æ æ³å®æçï¼æ以æåæ·»å äº 10 åæ
æ ¼ï¼ä½ä»ç¶æ æ³é¢é¢ä¿±å°ï¼ä¸è¿å·²ç»å¾çµæ´»äºã
See the Pen snack-gridç¹å»é¢è§
æ
æ ¼ç使ç¨å Bootstrap æ¯ä¸æ ·çï¼é¤äº 12 åæ
æ ¼å¤ï¼10 åæ
æ ¼ä»¥åååæ
æ ¼é½è¦æ·»å .cols- ç±»
<!-- é»è®¤ 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>
è¿ä¸ªæ
æ ¼å¹¶æ²¡æååºå¼ï¼åªæä¸ä¸ªæç¹ï¼å°å±ææºä¸çè¯æææ
æ ¼é½ä¼åè¡æ¾ç¤ºãä¸æ¹é¢ï¼è¿æ ·ç设计符å大å¤æ°è½»é级æ¡æ¶çåè¡·ï¼å¦ä¸æ¹é¢ï¼ææç®ååä¸ä¸ªé对移å¨ç«¯çæ¡æ¶ï¼æ¯ç« Web 端å移å¨ç«¯çé£æ ¼å·®è·è¾å¤§ï¼æç
§ä¸å¡éæ±åå¼ä¼æ´å¥½ãä¸è¿æè¿ææ´æ¹äºæºæ件ï¼ä¸ºååºå¼é¢çäºæ©å±æ¹å¼ã
表å
æ¼ç¤ºç¤ºä¾:
https://nzbin.github.io/snack/#formså¨ä¸é¢çå½åçç¥ä¸å·²ç»å±ç¤ºäº Snack 表åçåºæ¬ç»æï¼åºæ¬è¡¨åé¤äºç»æä¹å¤ï¼æ ·å¼ä¸å¹¶æ²¡æ太å¤å¯ä»¥è®¨è®ºçå°æ¹ãå¨æ¤è¯´ä¸ä¸è¡¨åä¸ checkbox çç»æè°æ´ï¼å
çä¸ä¸ Bootstrap ç checkbox ç»æã
<!-- 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>
以ä¸ä¸¤ç§ç»æä¸è½æåå·®ï¼ç¨æåå·®æ ·å¼å°±ä¼éä¹±ï¼çµæ´»æ§è¾å·®ãå
¶æ¬¡æå¨æ³ä¸¤ç§ç»æè½ä¸è½æ´åå¨ä¸èµ·ï¼å¢å¼ºçµæ´»æ§ãæ³äºå¾ä¹
ï¼æ¾å°äºæ¹æ³ï¼Snack ç»æå¦ä¸ï¼
<!-- 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 æ ç¾ä¸ãå¦å¤ï¼å¦æå° input ç§»å° label æ ç¾å¤ä¹æ¯æ²¡æé®é¢çï¼å¦ä¸ï¼
<!-- 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>
è¿ç§ç»ææä¸ä¸ªå¥½å¤ï¼å°±æ¯å¯ä»¥èªå®ä¹ input æ ·å¼ï¼è¯¦è§ä¸é¢ç CodePen ç scss æ件ãradio ç设置å checkBox æ¯ä¸æ ·çã
See the Pen snack-formsç¹å»é¢è§
è¾
å©ç±»
è¾
å©ç±»æ¯ä¸ç³»åç±»çç»åï¼æ¯å¦åå·å¤§å°ãé¢è²å¼ãpaddingãmargin 以åå·¦å³æµ®å¨çãå¨ä¸äº Bootstrap æ建çåå°ç®¡çç³»ç»ä¸å°¤ä¸ºå¸¸è§ï¼è¿æ ·å¸å±èµ·æ¥å°±ä¼æ¯è¾çµæ´»ã以ä¸æ¯ä¸ä¸ªè¾¹æ¡çè¾
å©ç±»ã
.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;
}
å
³äºè¾
å©ç±»çæ´å¤å
容å¯ä»¥é
读è¿ç¯æç« ãå¦ä½ç¼åéç¨ç Helper Classã
çç»ä»¶
æ¼ç¤ºç¤ºä¾:
https://nzbin.github.io/snack/#boxesçç»ä»¶æ¯ææ´ä¸ªæ¡æ¶ä¸æ¯è¾æ»¡æçä¸ä¸ªæ¨¡åãä¹æ以è¦åè¿ä¸ªç»ä»¶ä¸»è¦æ¯è§å¾ Bootstrap ç list ç»ä»¶å panel ç»ä»¶å¯ä»¥æ´åå°ä¸èµ·ãå½ç¶ï¼è¿æ ·çåæ³æå©æå¼ãçç»ä»¶å¨åå°ç®¡çç³»ç»çå¸å±ä¸è¡¨ç°ç尤为çªåºãå
¶å½åä¹æ¯å¤ç§å¤æ ·ï¼æ¯å¦ panelãwidgetãportletãiboxãcardçï¼æ¯ä¸ªåå°ç®¡çç³»ç»æ¡æ¶é½ä¼å¯¹è¿ä¸ªç»ä»¶è¿è¡æ·±åº¦å¼åï¼å¯è§å
¶å¨å¸å±ä¸çéè¦æ§ãç»ä¸ä¸ªç»ä»¶èµ·ä¸ä¸ªåéçç±»åä¹å¾å
³é®ï¼æ³äºå¾ä¹
ï¼æåç¨äº box çç±»åï¼å½ç¶ä¸è¬æ
åµä¸å°½éä¸è¦ç¨ boxï¼å 为è¿ä¸ªç±»åæ¯è¾å®½æ³ãä¸é¢ç CodePen 模æäº Bootstrap ç list å panel ç»ä»¶ã
See the Pen snack-boxesç¹å»é¢è§
主é¢
ç»æ¡æ¶æ·»å 主é¢æ¯ä¸ä»¶æ趣çäºæ
ãSnack çé»è®¤ä¸»é¢æ¯ç½è²ï¼å 为å欢é»è²ï¼æåæ·»å äºæå¤ä¸»é¢ï¼ç¼å主é¢åªéæ¹åç»ä»¶çé¢è²ãæ¼ç¤ºææ¡£ ç页é¢ç¨äºæå¤ä¸»é¢ï¼ç¹å»ä¸æ¹ç红è²æé®å¯ä»¥åæ¢ä¸»é¢ã