æ
æ ¼ç³»ç»ä»ç»
Bootstrap æä¾äºä¸å¥ååºå¼ã移å¨è®¾å¤ä¼å
çæµå¼æ
æ ¼ç³»ç»ï¼éçå±å¹æè§å£ï¼viewportï¼å°ºå¯¸çå¢å ï¼ç³»ç»ä¼èªå¨å为æå¤12åã
æ
æ ¼ç³»ç»ç¨äºéè¿ä¸ç³»åçè¡ï¼rowï¼ä¸åï¼columnï¼çç»åæ¥å建页é¢å¸å±ï¼ä½ çå
容就å¯ä»¥æ¾å
¥è¿äºå建好çå¸å±ä¸ã
ä½å¨è¾å¤æç页é¢ä¸åºç°é®é¢ï¼é´éï¼å
å¤è¾¹è·å¸¸å°æ°å¼å人åï¼éè¦æ·±å
¥æºç åææ¡£ç解æ
æ ¼ç³»ç»æè½è¿ç¨èªå¦ã
âè¡ï¼rowï¼âå¿
é¡»å
å«å¨ .container ï¼åºå®å®½åº¦ï¼æ .container-fluid ï¼100% 宽度ï¼ä¸ï¼ä»¥ä¾¿ä¸ºå
¶èµäºåéçæåï¼aligmentï¼åå
è¡¥ï¼paddingï¼ã
Bootstrap æ
æ ¼ç³»ç»çç²¾å¦ä¹å¤, éè¿container, row, columné½æ15pxçpadding槽边å rowçmargin -15px设置ï¼å·§å¦å®ç°å¨ column ä¸åµå¥ rowè¿è¡nesting æ©å±(è¶
è¿12å)ï¼èä¸éè¦åå¥ä¸å± container
Containerä½ç¨
å¨éæ¶å¯è½ç宽度åå(ååºå¼)ä¸æä¾å®½åº¦éå¶ãå½é¡µé¢å®½åº¦ååï¼container ç宽度ä¹éä¹ååã并ä¸å
¶ä¸ç column ç宽度æ¯åºäºç¾åæ¯ï¼æ以ä»ä»¬çå¼ä¸éè¦ååã
æä¾ä¸ä¸ªæ°´å¹³æ¹åç paddingï¼ä½¿å
¶å
é¨çå
容ä¸ä¼æ¥è§¦å°æµè§å¨çè¾¹çï¼å¤§å°ä¸º15pxï¼å°±æ¯å¾çä¸ç²çº¢è²çé¨åã
注æï¼ä¸éè¦ä¹ä¸åºè¯¥å¨ container ä¸åµå¥å¦ä¸ä¸ª containerã
Rowä½ç¨
Row æ¯ column ç´æ¥åå¨ç容å¨ï¼æç
§ææ¡£æè¿° row ä¸æå¤å¯æ12个 columnï¼ä¸è¿å¯ä»¥éè¿ nesting çæ¹å¼çµæ´»æ©å±ãåæ¶ä½ä¸ºé½æ¯å·¦æµ®å¨ç column ç wrapperï¼èªå¸¦ clearfix çæ§è´¨ã
row å·¦å³åæ ï¼15px ç marginï¼å°±æ¯å¾çä¸çèè²é¨åãè¿æ ·ä¹å°±æµæ¶äºä¸é¢æå°ç container ä¸15pxç paddingï¼è¿æ¯bootsrtapæ
æ ¼ç³»ç»çç²¾å¦ä¹å¤ã
注æï¼åä¸è®°ä½è¦æ row æ¾å° container çå
é¨ï¼è¿æ ·æè½ä¿è¯æ£å¸¸ã
Columnä½ç¨
æ¯ä¸ªcolumn ä¹ä¼æ15pxçæ°´å¹³æ¹åç paddingï¼ä¹å°±æ¯å¾çä¸é»è²çé¨åï¼colunmn åªè½å¨ row ä¸çåï¼ç±äº row ç margin 为ï¼15pxï¼é£ä¹ä½äºä¸¤è¾¹ç column 就碰å°äº container çè¾¹çãä½æ¯ colunmn æ¬èº«åæ 15px ç padding 使å¾å®å
¶ä¸çå
容并ä¸ä¼ç¢°å° containerï¼åæ¶ ä¸åcolumnçå
容ä¹é´å°±æäº30pxç槽ãç»åå¾ççä¸ä¸å°±ä¸ç®äºç¶äºã
注æï¼ä¸å®è¦æ column æ¾å° row é使ç¨ã
nestingæ©å±
éè¿container, row, columné½æ15pxçpadding槽边å rowçmargin -15px设置ï¼å·§å¦å®ç°å¨ column ä¸åµå¥ rowè¿è¡nesting æ©å±(è¶
è¿12å)ï¼èä¸éè¦åå¥ä¸å± container
å¨ nseting çæ¶å column çä½ç¨ä¹ç¸å½äº container äºï¼è¿æ ·å°±å¯ä»¥å®ç°ä»»æçåµå¥äºã
温馨提示:答案为网友推荐,仅供参考