ͨ¹ýÇ°ÃæÁ½ÆªÎÄÕµļòµ¥½éÉÜ£¬´óÖ¶ÔÓÚBootstrapÓÐÁ˳õ²½µÄÁ˽⡣ÓÉÓÚ×Ô¼ºÒ²Ö»ÊÇÏëͨ¹ýBootstrap¹ÙÍøÀ´½øÐмòµ¥µÄѧϰ£¬×Ô¼ºÄܹ»Ëæ±ã¸ã¸ö²»ÊÇÌ«´êµÄÒ³Ãæ¾Í¿ÉÒÔÁË¡£ËùÒÔÈç¹ûÄãÊÇÐÂÊÖ»òÐí¿ÉÒÔÀ´¿´¿´£¬¶ÔÄ㻹ÓÐÄÇôһµã¶ù°ïÖú£¬¸ßÊÖÇëÆ®¹ý¡£
¡¶Bootstrap3.0ѧϰ±Ê¼Ç¡·ÖÐÒ²Ö»ÊǼòµ¥µÄ½éÉÜÁËÈçºÎÏÂÔØÎļþ£¬¼°½øÐÐÒýÓÃÏÂÔصÄÎļþ£¬»¹Ã»ÓÐÕæÕýµÄ½øÈëÇ°¶ËµÄÉè¼ÆѧϰÖС£ÎÒÒ²¿´µ½Á˹ã´óÍøÓÑÃǶÔBootstrap3.0Ò²¾ßÓкܴóµÄÐËȤ£¬ÓÐ֮ǰ¾ÍʹÓùýµÄ´óÅ££¬Ò²ÓкÍÎÒÒ»ÑùÕý´òËãѧϰһϵÄÅèÓÑ¡¢Ð¡²Ë¡£ÖÁÓڻظ´ÖбȽ϶àµÄ¾ÍÊÇ£ºÏ£ÍûÄÜÓиöϵÁУ¬µ±È»ÎÒÒ²ºÜÏ£Íû×Ô¼ºÄܺܺõĹ滮ÁÐÒ»¸öϵÁУ¬È»ºó°´ÕÕÕâ¸ö´ó¸Ù½øÐм´¿É¡£²»¹ý±¾ÈËÄÜÁ¦ÓÐÏÞ£¬ËùÒÔÖ»ºÃ¸úËæ×Ô¼ºµÄϲºÃÀ´½øÐÐѧϰÁË¡£
ÉùÃ÷£ºÐ´×÷ÄÜÁ¦ÕæÊDz»¼Ã£¬»¹Íû¸÷λ¿´¹Ù¼ûÁ¡£ÈçÓдíÎó£¬Ç뼰ʱ֪ͨ£¬±¾È˱ػáÔÚ×î¶ÌµÄʱ¼ä½øÐиüÕý£¬µ±È»¸üÏ£ÍûÄÜÓиü¶àµÄÈËÀ´Ò»Æðѧϰ¡£
Õ¤¸ñϵͳ£¨²¼¾Ö£©
BootstrapÄÚÖÃÁËÒ»Ì×ÏìӦʽ¡¢Òƶ¯É豸ÓÅÏȵÄÁ÷ʽդ¸ñϵͳ£¬Ëæ×ÅÆÁÄ»É豸»òÊÓ¿Ú£¨viewport£©³ß´çµÄÔö¼Ó£¬ÏµÍ³»á×Ô¶¯·ÖΪ×î¶à12ÁС£
ÎÒÔÚÕâÀïÊÇ°ÑBootstrapÖеÄÕ¤¸ñϵͳ½Ð×ö²¼¾Ö¡£Ëü¾ÍÊÇͨ¹ýһϵÁеÄÐУ¨row£©ÓëÁУ¨column£©µÄ×éºÏ´´½¨Ò³Ãæ²¼¾Ö£¬È»ºóÄãµÄÄÚÈݾͿÉÒÔ·ÅÈëµ½Äã´´½¨ºÃµÄ²¼¾Öµ±ÖС£ÏÂÃæ¾Í¼òµ¥½éÉÜÒ»ÏÂBootstrapÕ¤¸ñϵͳµÄ¹¤×÷ÔÀí£º
ÐУ¨row£©±ØÐë°üº¬ÔÚ.containerÖУ¬ÒÔ±ãΪÆ丳ÓèºÏÊʵÄÅÅÁУ¨aligment£©ºÍÄÚ²¹£¨padding£©¡£Ê¹ÓÃÐУ¨row£©ÔÚˮƽ·½Ïò´´½¨Ò»×éÁУ¨column£©¡£ÄãµÄÄÚÈÝÓ¦µ±·ÅÖÃÓÚÁУ¨column£©ÄÚ£¬¶øÇÒ£¬Ö»ÓÐÁУ¨column£©¿ÉÒÔ×÷ΪÐУ¨row£©µÄÖ±½Ó×ÓÔªËØ¡£ÀàËÆPredefined grid classes like .rowand .col-xs-4ÕâЩԤ¶¨ÒåµÄÕ¤¸ñclass¿ÉÒÔÓÃÀ´¿ìËÙ´´½¨Õ¤¸ñ²¼¾Ö¡£BootstrapÔ´ÂëÖж¨ÒåµÄmixinÒ²¿ÉÒÔÓÃÀ´´´½¨ÓïÒ廯µÄ²¼¾Ö¡£Í¨¹ýÉèÖÃpadding´Ó¶ø´´½¨ÁУ¨column£©Ö®¼äµÄ¼ä¸ô£¨gutter£©¡£È»ºóͨ¹ýΪµÚÒ»ºÍ×îºóÒ»ÑùÉèÖøºÖµµÄmargin´Ó¶øµÖÏûµôpaddingµÄÓ°Ïì¡£Õ¤¸ñϵͳÖеÄÁÐÊÇͨ¹ýÖ¸¶¨1µ½12µÄÖµÀ´±íʾÆä¿çÔ½µÄ·¶Î§¡£ÀýÈ磬Èý¸öµÈ¿íµÄÁпÉÒÔʹÓÃÈý¸ö.col-xs-4À´´´½¨¡£DW6±àÂëʵÏÖ
OkayÀÕ£¬ÏÂÃ濪ʼд´úÂëÁ˶Ê×ÏÈÉÏÒ»ÕÅͼ¿´¿´ÎÒʹÓõıà¼Æ÷£¬Ö®Ç°ÔÚѧУѧϰHtml+CSSµÄʱºòʹÓý϶àµÄ¹¤¾ß¡£
È»ºóн¨Ò»¸öHTMLÎĵµ£¬Ñ¡ÔñÀàÐÍHTML5
´´½¨ºÃºó£¬Áí´æΪÓëÉÏÒ»½ÚµÄ½²½âÖÐjs¡¢cssÎļþ¼ÐµÄͬһĿ¼Ï¡£
layout.html¾ÍÊÇÎÒ¸Õ¸Õ´´½¨µÄÎļþ¡£Bootstrap.htmlÒ²ÊÇÉÏÒ»½ÚÖд´½¨µÄµÚÒ»¸öhtmlÒ³Ãæ¡£
ÏÖÔÚ¿ÉÒÔ½«Bootstrap.htmlÖеĴúÂëÈ«²¿Copyµ½layout.htmlÒ³Ãæ¡£
È»ºóÔÚbody±êÇ©ÏÂÌí¼ÓÈçÏ´úÂë
Õ⼸¸ö±êÇ©´ó¼ÒÓ¦¸Ã¶¼ÄÜ¿´µÄÃ÷°×£¬×î»ù´¡×î¼òµ¥µÄ¡£
Ìí¼ÓÍêºólayout.htmlÒ³ÃæËùÓдúÂëÈçÏÂ
µ±È»Ð§¹ûÒ²ºÜ¼òµ¥£¬ÎÒ»¹ÊǰѽØͼ·ÅÉÏ£¬¿ÉÒÔ½øÐжԱȡ£
ÓÅ»¯Ò»£º¿ÉÒÔ·¢ÏÖÉÏͼµÄÒ³ÃæЧ¹ûÕ¼ÂúÈ«ÆÁ£¬ÎÒÃÇ¿ÉÒÔͨ¹ýBootstrap ÑùʽÀà¶ÔÉÏÃæµÄÄÚÈݽøÐоÓÖС£
Ч¹ûÈçÏÂ
¿ÉÒÔ·¢ÏÖcontainerÕâ¸öÀàÉèÖÃÁË¿í¶È£¬²¢ÇÒ¿ÉÒÔÈÃÄÚÈÝÏÔʾÔÚÒ³ÃæµÄÖм䡣
ÓÅ»¯¶þ£º½«Èý¸öÇøÓòÏÔʾÔÚͬһÅÅ£¬²¢ÇÒƽ¾ù·Ö³ÉÈýÀ¸¡£
Ê×ÏÈΪÈý¸öÇøÓòÌí¼ÓÒ»¸öÈÝÆ÷£¬¿ÉÒÔʹÓÃdiv£¬²¢ÇÒΪdivÌí¼ÓÒ»¸öÀà <div >.
È»ºóÎÒÃÇΪÿ¸öСµÄÇøÓòÒ²Ìí¼ÓÒ»¸öÈÝÆ÷div£¬²¢ÇÒΪdivÌí¼ÓÒ»¸öÀà<div >
¼òµ¥´úÂëʵÏÖÈçÏÂ
Ч¹ûÈçÏÂ
µÄÈ·ÅųÉÒ»ÁУ¬È»ºó·Ö³ÉÈýÀ¸¡£ÔÙ½áºÏÒ»ÏÂÉÏÃæÕ¤¸ñϵͳµÄ6²¿ÔÀí¡£ÊDz»ÊǶ®Ò»µãÁË£¬·´ÕýÎÒ×Ô¼º¶®Á˺ܶࡣͨ¹ýͬÑùµÄ·½Ê½¿ÉÒÔ´´½¨³ö±È½Ï¸´ÔÓµÄÍø¸ñ²¼¾ÖÒ³Ãæ¡£Ö»ÐèÒªÔÚ²¼¾ÖʹÓõÄÈÝÆ÷ÉÏÃæÌí¼ÓÏàÓ¦µÄÍø¸ñ²¼¾ÖµÄÀà¡£±ÈÈç˵Èç¹ûÄÚÈÝÕ¼ÓÃ6¸öÍø¸ñ£¬ÄÇô¾ÍÌí¼ÓÒ»¸öcol-xs-6µÄÀà¡¢Õ¼ÓÃËĸöÍø¸ñ¾ÍÌí¼ÓÒ»¸öcol-xs-4µÄÀ࣬ȻºóÔÚͬһÅŵÄÖÜΧ½øÐÐʹÓôøÓÐrowÀàµÄÈÝÆ÷¡£
×ܽá
±¾½ÚÖ÷ҪѧϰµÄ²¼¾Ö£¨Õ¤¸ñϵͳ£©£¬Í¨¹ý¼òµ¥µÄʵÀýÀ´Àí½âËüµÄ¹¤×÷ÔÀí¡£
ʹÓùýµÄÀàÓÐ:
1..container:ÓÃ.container°ü¹üÒ³ÃæÉϵÄÄÚÈݼ´¿ÉʵÏÖ¾ÓÖжÔÆë¡£ÔÚ²»Í¬µÄýÌå²éѯ»òÖµ·¶Î§ÄÚ¶¼ÎªcontainerÉèÖÃÁËmax-width£¬ÓÃÒÔÆ¥ÅäÕ¤¸ñϵͳ¡£
2..col-xs-4:Õâ¸öÀàͨ¹ý"-"·ÖΪÈý¸ö²¿·Ö£¬µÚÈý¸ö²¿·ÖµÄÊý×Ö×÷Ϊһ¸ö·ºÖ¸£¬ËüµÄ·¶Î§ÊÇ1µ½12¡£¾ÍÊÇ¿ÉÒÔ°ÑÒ»¸öÇøÓò·ÖΪ12¸öÀ¸£¬Õâ¸öÒªºÍrowÀàÁªºÏʹÓá£
ÆäʵÕâ¸ö²¼¾ÖºÜÏñHTMlÖеÄTable²¼¾ÖTRÐкÍTDÁаɡ£
ÔÝʱµÄÀí½â¾ÍÕâЩ£¬´úÂëÖ±½Ó¸´ÖÆÕ³Ìù¾Í¿ÉÒÔ¿´Ð§¹û£¬µ±È»Ê×ÏÈÒª°ÑÔ¤ÏȵÄcss¡¢jsÎļþ½øÐÐ×¼±¸¡£
1£®ÎÒ¸ø²»ÁËÄãÊÀ½çÉÏ×îºÃµÄÒ»ÇУ¬¿ÉÊÇÎÒÒ»¶¨»á°ÑÎÒ×îºÃµÄÒ»Çж¼¸øÄã¡£ 2£®Óöµ½Äã...
ʲôÊÇ DNS Prefetch DNS ʵÏÖÓòÃûµ½IPµÄÓ³É䡣ͨ¹ýÓòÃû·ÃÎÊÕ¾µã£¬Ã¿´ÎÇëÇó¶¼Òª...
Androidƽ̨ÌáÇ°×¢Èë5+ API£¬Ö§³ÖÔÚplusreadyʼþÇ°µ÷Óà ÔÚ5+ Runtime»·¾³ÖУ¬Í¨...
DreamweaverÉè¼ÆÍøÒ³µÄʱºò£¬ÏëҪʵÏÖÒ»¸öÍøÒ³ÄÚº¬ÓÐÁ½¸ö»ò¶à¸öÒ³Ã棬¸ÃÔõôʵÏÖ...
DreamweaverÖÆ×÷µÄÍøÒ³ÖÐÐèÒª±íµ¥£¬Ò»°ãÓÐÌá½»Êý¾ÝµÄ±íµ¥£¬¸ÃÔõôÖÆ×÷Õâ¸ö±íµ¥ÄØ...
´úÂëÈçÏÂËùʾ£º !DOCTYPE htmlhtmlhead meta charset=UTF-8 link rel=stylesheet...
Ò»¡¢±³¾° ±ÊÕßÔÚÒ»´Îά»¤»ù´¡¹«¹²×é¼þµÄ¹ý³ÌÖУ¬²»Ð¡ÐÄÐÞ¸ÄÁËÀàµÄ°ü·¾¶¡£Ôã¸âµÄ...
DreamweaverÖеĴúÂëÏëÒª²åÈë×¢ÊÍ£¬¸ÃÔõôÌí¼ÓÄØ£¿ÏÂÃæÎÒÃǾÍÀ´¿´¿´ÏêϸµÄ½Ì³Ì¡£...
DreamweaverÖÐÏëÒªÌí¼Óµç×ÓÓÊÏäµÄÁ´½Ó£¬¸ÃÔõôÌí¼ÓÄØ£¿ÏÂÃæÎÒÃǾÍÀ´¿´¿´ÏêϸµÄ½Ì...
ÕâÊÇwhyµÄµÚ 98 ƪԴ´ÎÄÕ ǰ¼¸Ì죬ÓиöÅóÓÑÔÚ΢ÐÅÉÏÕÒÎÒ¡£ËûÎÊ£ºwhy¸ç£¬ÔÚÂð£¿...