<dfn id="vcfls"><s id="vcfls"></s></dfn>
  • <big id="vcfls"><em id="vcfls"></em></big>

      1. <pre id="vcfls"><nobr id="vcfls"></nobr></pre>

        <code id="vcfls"></code>
        <th id="vcfls"><sup id="vcfls"><acronym id="vcfls"></acronym></sup></th>
      2. <code id="vcfls"></code>
        ÍøÕ¾¿Í·þ www.52daishu.com 
        ΢Ðſͷþ www.52daishu.com 
        ¾­µä×ܽᣡÓïÒ廯HTMLºÍǰ¶Ë¼Ü¹¹
        ·¢²¼Ê±¼ä£º2014-10-08 13:51:25 µã»÷ä¯ÀÀ£º´Î
        1322099011525.jpg

            ÕâÊÇһƪ˼Ï룬¾­Ñ飬ÀíÄÒÔ¼°¹ýÈ¥¼¸ÄêÖÐÊÔÑéµÄÀíÄîµÄ¼¯ºÏ¡£Ëü¸²¸ÇÁËHTMLÓïÒ壬ǰ¶Ë¼Ü¹¹µÄ×é¼þºÍ·½·¨£¬ÀàÃüÃûģʽ£¬ºÍHTTPÄÚÈÝѹËõ¡£

        ¡°ÎÒÃDz»»áֹͣ̽Ë÷
        ¶øÎÒÃÇÒ»ÇÐ̽Ë÷µÄÖÕµã
        ½«»áµ½´ïÎÒÃdzö·¢µÄµØ·½
        ÓÚÊÇÎÒÃǵÚÒ»´ÎÈÏʶÁËÕâ¸öµØ·½¡£¡±


        T.S. Eliot ¡ª ¡°Ð¡¼ª¶¡¡±


        ¹ØÓÚÓïÒå
        ÓïÒåÊǶԱê¼ÇÓë·ûºÅÖ®¼äµÄ¹ØÏµ£¬ÒÔ¼°ËüÃǵĺ¬ÒåµÄÑо¿¡£ÔÚÓïÑÔѧÖУ¬ÕâÖ÷ÒªÊǶÔÓïÑÔÖеķûºÅ£¨Èçµ¥´Ê£¬¶ÌÓ»òÉùÒô£©ÒâÒåµÄÑо¿¡£ÔÚǰ¶Ëweb¿ª·¢µÄÉÏÏÂÎÄÖУ¬ÓïÒå´ó¶àÊÇÓëÔªËØ£¬ÊôÐÔ£¬ºÍÊôÐÔÖµ£¨°üÀ¨ÏñMicrodataÖ®ÀàµÄÀ©Õ¹£©µÄÒ»ÖÂÈÏͬÒâÒåÏà¹Ø¡£ÕâЩÈÏͬÒâÒåͨ³£Ôڹ淶Öб»¶¨Òå¸ÅÄËüÃÇ¿ÉÒÔ°ïÖú³ÌÐòÔ±£¨Ò²¾ÍÊÇÈËÀࣩ¸üºÃµÄÀí½âÍøÕ¾ÖÐÐÅÏ¢µÄ²»Í¬·½Ãæ¡£µ«ÊÇ£¬¼´Ê¹Êǹ淶»¯ÒÔºó£¬ÔªËØ£¬ÊôÐÔ£¬ºÍÊôÐÔÖµµÄÓïÒ廹ÊÇÊÜÖÆÓÚ¿ª·¢Õß¶ÔÆäµÄÊÊÓ¦ÓëÎüÊÕ¡£Õâ¿ÉÄܻᵼÖºóÐø¶ÔÕýʽÈÏͬÓïÒåµÄÐ޸ģ¨ÕâÒ²ÊÇÒ»¸öHTML Éè¼ÆÔ­Ôò£©¡£


        Çø±ð²»Í¬ÀàÐ͵ÄHTMLÓïÒå
        ±àд¡°ÓïÒåHTML¡±Ô­ÔòÊÇÏÖ´úרҵǰ¶Ë¿ª·¢µÄ»ù´¡Ö®Ò»¡£´ó²¿·ÖÓïÒ幨ÓÚ´æÔڵı¾ÖÊÊôÐÔ»òÊÇÆÚÍûµÄÄÚÈÝ£¨ÀýÈçh1element,langattribute,emailvalue of thetypeattribute, Microdata£©¡£¡¡¡¡

        È»¶ø£¬²»ÊÇËùÓеÄÓïÒå¶¼ÒªÔ´ÓÚÄÚÈÝ¡£ClassÃû²»ÄÜÊÇ¡°·ÇÓïÒ塱£¨unsemantic£©µÄ¡£ÎÞÂÛʹÓÃʲôÃû×Ö£¬¶¼ÒªÓÐÒâÒå¡¢ÓÐÄ¿µÄ¡£ClassÃûµÄÓïÒå¿ÉÒÔºÍÄÇЩHTMLÔªËØ²»Ò»Ñù¡£ ÎÒÃÇ¿ÉÒÔͳһÀûÓá°È«¾Ö¡±µÄÓïÒåÃüÃûHTMLÔªËØ¡¢Ä³Ð©HTMLÊôÐÔ¡¢Î¢Êý¾ÝµÈµÈ£¬ÒÔÃâºÍ¡°±¾µØ¡±µÄÍøÕ¾/Ó¦ÓÃרÊôµÄ³£³£°üº¬ÔÚÊôÐÔÖµÄÚµÄÓïÒåÏà»ìÏý£¬±ÈÈçtheclassattribute¡£¡¡¡¡¾¡¹ÜÔÚHTML5 specification section on classes Öظ´µÄÈÏΪ¡°×î¼ÑµÄʵ¼ù¡± ÈçÏ¡­

        ¡­×÷Õß¹ÄÀøÓà [class attribute] ÖµÀ´ÃèÊöÄÚÈݵÄÏÔʾ£¬¶ø²»ÊÇÃèÊöµÄÄÚÈÝËùÐèµÄ±íÏÖÖµ¡£
        ¡­Ã»ÓÐÄÚÔÚµÄÀíÓÉÕâÑù×ö¡£ÊÂʵÉÏ£¬ËüÍùÍùÊÇ´óÐÍÍøÕ¾»òÓ¦ÓóÌÐò¹¤×÷ʱµÄÒ»¸öÕϰ­¡£

        • ÄÚÈݲãÓïÒåÒѾ­µ£ÈÎHTMLÔªËØºÍÆäËûÊôÐÔ¡£
        • ÀàÃûºÜÉÙ»ò¸ù±¾Ã»Óи³ÓèÓïÒåÓÐÓõÄÐÅÏ¢¸ø¼ÆËã»ú»òä¯ÀÀ£¬³ý·ÇËüµÄһС²¿·Ö£¨¼ÆËã»ú¿É¶Á£©Ô¼¶¨µÄÃû×Ö - ΢¸ñʽµÄ²¿·Ö¡£
        • ÀàÃû³ÆµÄÖ÷ҪĿµÄÊÇΪCSSºÍJavaScriptÉèÖù³×Ó¡£ Èç¹ûÄã²»ÐèÒª¸øÄãµÄwebÎĵµÌí¼ÓÑÝʾºÍÐÐΪ£¬ÄÇôÄã¿ÉÄܲ»ÐèÒªÔÚÄãµÄHTMLÎļþÖÐʹÓÃclasses¡£
        • ÀàÃûÓ¦¸ÃÌṩÓÐÓõÄÐÅÏ¢¸ø¿ª·¢ÉÌ¡£µ±Äã¶ÁÒ»¸öDOM´úÂë¶ÎµÄʱºò£¬ÓÐÖúÓÚÁ˽âÒ»¸öÌØ¶¨µÄÀàµÄÃû×ÖÊÇÒª¸Éʲô£¬ÌرðÊÇÔÚǰÆÚÓë¶à¸ö¿ª·¢ÍŶÓ£¬°üÀ¨·ÇHTML×é¼þ¹¤×÷µÄÈË¡£

        ÒÔÕâÖַdz£¼òµ¥µÄÀý×Ó£º
        1.    

          News

        2.     [news content]
        ¸´ÖÆ´úÂë
        ´ÓÉÏÃæµÄÀý×ÓºÜÃ÷ÏԵĿ´³ö£¬ÀàÃûnews²¢Ã»ÓиæËßÄãÈκÎÄÚÈÝ¡£Ëüû¸øÄã×é¼þµÄ×éÖ¯½á¹¹µÄÈκÎÐÅÏ¢£¬Ëü²»ÄÜÓÃÓÚ˵Ã÷ÄÚÈÝÊDz»ÊÇ¡°ÐÂÎÅ¡±¡£ÀàÃûµÄÓïÒåÓëÄÚÈݵÄÐÔÖÊÒѾ­¼õÉٵĹØÁª£¬¼Ü¹¹¹¦ÄÜÒѾ­±äС£¬»òÕßÒ²ºÜÈÝÒ×ÈÃÆäËû¿ª·¢ÕßʹÓá£


        ÄÚÈÝÎ޹صÄÀàÃû
        ÁíÒ»ÖÖ¿ÉÑ¡µÄ·½·¨ÊÇÔÚÉè¼ÆÖдÓÖØ¸´½á¹¹ºÍ¹¦ÄÜģʽÖÐÅÉÉúÀàÃûµÄÓïÒå¡£´ó¶àÊý¿ÉÖØÓõÄ×é¼þ¶¼´øÓÐÓëÄÚÈÝÎ޹صÄÀàÃû¡£¡¡¡¡

        ÎÒÃDz»Ó¦¸Ãº¦ÅÂÔÚÇåÎúÃ÷È·µÄ²ã¼¶¼ä½¨Á¢ÁªÏµ£¬¶ø²»ÊÇÈÃÀàÃûÑϸñµØ·´Ó³Ìض¨µÄÄÚÈÝ¡£ÕâÑù×ö²»»áÈÃÀà±äµÃ¡°Ã»ÓÐÓïÒ塱£¬Ëü½ö½öÒâζ×ÅËüÃǵÄÓïÒå²»ÊÇ´ÓÄÚÈÝÖÐÅÉÉú³öÀ´µÄ¡£Èç¹û¸½¼ÓµÄHTMLÔªËØ°ïÖú´´½¨Â³°ôÐÔÇ¿£¬ÈáÈí¶È´ó£¬¿ÉÖØÓõÄ×é¼þ£¬ÎÒÃǾͲ»Òªº¦Å°ÑÕâÐ©ÔªËØ°üº¬½øÀ´¡£ÕâÑù×öÒ²²»»áÈÃHTML±äµÃûÓÐÓïÒ壬Ëü½ö½öÒâζ×ÅÄãʹÓÃÁ˸պó¬¹ý±ê¼ÇÄÚÈÝ×îСËùÐèµÄÔªËØ¡£


        ǰ¶Ë¼Ü¹¹
        ×é¼þ/Ä£°å/ÃæÏò¶ÔÏó¼Ü¹¹µÄÉè¼Æ×ÚÖ¼¾ÍÊÇ¿ª·¢³öÒ»Ì×°üº¬Ò»ÏµÁв»Í¬ÀàÐ͵ĿÉÖØÓÃ×é¼þ¡£Ôڹ淶µÄÓ¦ÓóÌÐòÖУ¬¹ØÓÚÀàÃû³ÆµÄÓïÒ壬ÓÉʵÓÃÖ÷ÒåÕßÃÇÍÆ¶¯²¢·þÎñËûÃǵÄÖ÷ҪĿµÄ¡ª¡ªÌṩÓÐÒâÒåµÄ£¬Áé»îµÄ£¬¿ÉÖØÓõĹØÁª¹©¿ª·¢ÕßʹÓá£


        ¿ÉÖØÓü°¿É×éºÏµÄ×é¼þ
        ¿ÉÉìËõµÄHTML/CSS´óÌåÉϱØÐëÒÀÀµÓÚHTMLÄڵIJ㼶£¬ÕâÑù¾Í¿ÉÒÔ´´Ôì¿ÉÖØÓõÄ×é¼þ¡£Ò»¸öÁé»îÇÒ¿ÉÖØÓõÄ×é¼þ¼È²»ÄÜÒÀÀµ´æÔÚÓÚDOM Ê÷µÄij¸ö²¿·Ö£¬Ò²²»ÄÜÐèҪʹÓÃÌØ¶¨µÄÔªËØÀàÐÍ¡£ËüÓ¦¸ÃÄÜÊÊÓÃÓÚ²»Í¬µÄ±à¼­Æ÷²¢ÇÒºÜÈÝÒ×Ö÷Ì廯¡£Èç¹û±ØÒªµÄ»°£¬¶àÓàµÄHTMLÔªËØ£¨³ýÁËÄÇЩÐèÒª±ê¼ÇÄÚÈݵÄÔªËØ£©¿ÉÒÔÓÃÀ´ÈÃ×é¼Û¸üǿ׳¡£Nicole SullivanËùνµÄýÌå¶ÔÏó¾ÍÊǺܺõÄÀý×Ó¡£¡¡

        ×é¼þ¿ÉÒÔºÜÈÝÒ×µÄ×éºÏÊÜÒæÓÚÀàÐÍÑ¡ÔñÆ÷µÄ·ÏÖ¹ºÍÖ§³Öclass¡£ÏÂÃæµÄʾÀýչʾÁËbtn×é¼þÓëuilist×é¼þµÄ¼òÒ××éºÏ¡£ÎÊÌâÊÇ£¬Ö¸¶¨.btn²»ÈçÖ¸¶¨.uilist£¨Õ⽫¸²¸Ç¹²ÏíÊôÐÔ£©£¬uilist×é¼þÐèÒªÒ»¸öê±ê¼Ç×÷Ϊ×ӽڵ㡣
        1. .btn { /* styles */ }
        2. .uilist { /* styles */ }
        3. .uilist a { /* styles */ }
        ¸´ÖÆ´úÂë
        1.     Home
        2.     About
        3.     Login
        ¸´ÖÆ´úÂë
        ʹÓÃclassÀ´ÐÞÊÎ×ÓDOMÔªËØÊÇÌá¸ßÒ×ÓÃÐÔ¡¢Ê¹ÓÃuilistÀ´×éºÏÆäËû×é¼þµÄÒ»ÖÖ·½·¨¡£ËäÈ»ÕâÓÐÖúÓÚ¼õÉÙÖ¸¶¨¹æÔò£¬Ö÷ÒªµÄºÃ´¦ÊÇ¿ÉÒÔÈÃÄã¶ÔÈκÎÀàÐ͵Ä×Ó½ÚµãÓ¦Óýṹ»¯µÄÑùʽ¡£
        1. .btn { /* styles */ }
        2. .uilist { /* styles */ }
        3. .uilist-item { /* styles */ }
        ¸´ÖÆ´úÂë
        1.     Home
        2.     About
        3.    
        4.         Login
        5.    
        ¸´ÖÆ´úÂë


        JavaScriptÖ¸¶¨class
        ʹÓÃJavaScriptÖ¸¶¨classµÄÐÎʽµÄ¿ÉÒÔ½µµÍ·çÏÕ£º×é¼þµÄÖ÷Ìâ»ò½á¹¹µÄ¸Ä±äÊ±ÆÆ»µ¶ÔÆä¶ÔÓ¦µÄJavascript¡£Ò»ÖÖÓÐЧµÄ·½·¨ÊÇ£ºJavascript¹³×ÓֻʹÓÃjs-*µÄÌØ¶¨class£¬²¢ÇÒÒ»Ö±±£³Ö¡£
        ¸´ÖÆ´úÂë
        ÕâÑù×ö£¬Äã¿ÉÒÔ¼õÉÙ·çÏÕ£º×é¼þµÄ½á¹¹»òÖ÷Ìâ¸Ä±äʱ»áÎÞÒâÖÐÓ°ÏìÈκαØÐèµÄJavaScriptÐÐΪ»ò¸´ÔÓ¹¦ÄÜ¡£


        ×é¼þ±à¼­Æ÷
        ×é¼þͨ³£¾ßÓÐÓë»ù´¡×é¼þÓÐЩÐí²î±ðµÄ¶àÖÖ²»Í¬Íâ¹Û£¬±ÈÈ磬һ¸ö²»Í¬ÑÕÉ«µÄ±³¾°»òÕ߱߿ò¡£ÓÐÁ½ÖÖÖ÷ÒªµÄģʽ±»ÓÃÀ´´´½¨ÕâЩ²»Í¬µÄ×é¼þ¡£ÎÒ³ÆËüÃÇΪ¡°µ¥ÀࡱģʽºÍ¡°¶àÀࡱģʽ¡£

        ¡°µ¥Àࡱģʽ
        1. .btn, .btn-primary { /* button template styles */ }
        2. .btn-primary { /* styles specific to save button */ }
        ¸´ÖÆ´úÂë

        ¡°¶àÀࡱģʽ
        1. .btn { /* button template styles */ }
        2. .btn-primary { /* styles specific to primary button */ }
        3.  
        4. Default
        5. Login
        ¸´ÖÆ´úÂë
        Èç¹ûÄãʹÓÃÁËÔ¤´¦ÀíÆ÷£¬¾Í¿ÉÒÔʹÓÃSassµÄ@extend¹¦ÄÜ£¬À´Ëõ¼õһЩʹÓá°µ¥ÀࡱģʽʱËùÉæ¼°µÄά»¤¹¤×÷¡£¿ÉÊÇ£¬¼´Ê¹ÓÐÔ¤´¦ÀíÆ÷µÄ°ïÖú£¬ÎÒÈÔÈ»ÇãÏòÓÚʹÓá°¶àÀࡱģʽ£¬ºÍÔÚHTMLÖÐÔö¼Ó±à¼­Àà¡£

        ÎÒ·¢ÏÖÕâÊÇÒ»¸ö¸ü¾ßÉìËõÐÔµÄģʽ¡£ÀýÈ磬Óûù´¡µÄbtn×é¼þ£¬¸øËüÔöÌí5ÖÖÀàÐ͵İ´Å¥ºÍ3ÖÖ¶îÍâµÄ³ß´ç¡£Ê¹Óá°¶àÀࡱģʽÄã×îÖÕ½«»ñµÃ9ÖÖ¿É»ìÓÃÆ¥ÅäµÄÀà¡£µ«Ê¹Óá°µ¥ÀࡱģʽÄ㽫ÓÐ24ÖÖÀà¡£

        Èç¹ûȷʵÐèÒªµÄ»°£¬Ëü¸ø×é¼þ×öһЩÉÏÏÂÎĵÄÐÞ¸ÄÒ²¸üÈÝÒס£Äã»òÐí»áÏëÔÚÁíÒ»¸ö×é¼þÖУ¬¶ÔÈÎÒâÒ»¸öbtn×öһЩÍâ¹ÛµÄϸ΢µ÷Õû¡£
        1. /* "multi-class" adjustment */
        2. .thing .btn { /* adjustments */ }
        3.  
        4. /* "single-class" adjustment */
        5. .thing .btn,
        6. .thing .btn-primary,
        7. .thing .btn-danger,
        8. .thing .btn-etc { /* adjustments */ }
        ¸´ÖÆ´úÂë
        ¡°¶àÀࡱģʽÒâζ×ÅÔÚ×é¼þÖУ¬ÄãÖ»ÐèÒ»¸ö×é¼þÄÚµÄÑ¡ÔñÆ÷£¬À´±êʾbtn-ÑùÊ½ÔªËØµÄÈÎÒâÒ»ÖÖÀàÐÍ¡£¶ø¡°µ¥ÀࡱģʽÒâζ×ÅÄã±ØÐë³Ðµ£ÈκοÉÄܵİ´Å¥ÀàÐÍ£¬²¢ÇÒÔÚÒ»¸öа´Å¥±äÁ¿±»´´½¨µÄʱºòµ÷ÕûÑ¡Ôñ·û¡£


        ½á¹¹»¯µÄÀàÃû
        ÔÚ´´½¨×é¼þ£¬»¹ÓÐÔÚ´Ë»ù´¡Éϵġ°Ö÷Ì⡱µÄʱºò£¬ÓÐЩÀà±»ÓÃ×÷×é¼þµÄ±ß½ç£¬ÓÐЩ±»ÓÃ×÷×é¼þµÄÐÞÊÎÆ÷£¬ÓÐЩ±»ÓÃÀ´½«Ò»Ð©DOM½ÚµãäÖȾµ½Ò»¸ö¸ü´óµÄ³éÏóµÄÕ¹ÏÖ×é¼þÖС£

        ÎÒÃǺÜÄÑÍÆ¶Ï³öbtn£¨×é¼þ£©,btn-primary£¨ÐÞÊÎÆ÷£©,btn-group£¨×é¼þ£©ºÍbtn-group-item£¨×é¼þÖеÄ×Ó¶ÔÏó£©ÕâЩÑùʽ֮¼äµÄ¹ØÏµ£¬ÒòΪÕâЩÃüÃû²¢Ã»ÓÐÇå³þµÄ½ÒʾÕâЩÀàµÄÄ¿µÄ¡£Ã»ÓÐͳһµÄģʽ¡£¡¡¡¡

        ÔçÔÚ2011Ä꣬ÎÒ¿ªÊ¼Ê¹ÓÃÃüÃûģʽ£¬ÕâÈÃÎҺܿìµÄÀí½âÁËDOMƬ¶Î½ÚµãÖ®¼äÍâÔڵĹØÏµ£¬Õâ±È³¢ÊÔͨ¹ýÀ´»ØÒƶ¯HTML,CSSºÍJSÎļþÀ´Æ´´ÕÕû¸öÍøÕ¾µÄ½á¹¹ÒªÀ´µÃ¿ìºÜ¶à¡£ÔÚÒªµãÖеıê¼ÇµÄ·½Ê½Ö÷ÒªÊÇÊÜBEMϵͳµÄÃüÃû·½Ê½ËùÓ°Ï죬µ«±»ÎҸıä³ÉÁËÎÒÈÏΪÈÝÒ×ʹÓõķ½Ê½¡£

        ×Ô´ÓÎÒ¿ªÊ¼Ð´ÕâÆªÎÄÕÂ,ÆäËûµÄ¼¸Ö§ÍŶӺͿò¼Ü£¨ÒëÕß¼Ó£º×÷Õߣ©²ÉÓÃÁËÕâÖÖ·½·¨¡£MontageJSÐÞ¸ÄÁË·ûºÅ±ä³ÉÁíÍâÒ»¸ö·ç¸ñ,ÎÒ¸üÆ«°®µÄ²¢ÇÒĿǰÕýʹÓõÄÊÇSUIT ¹¤¾ß°ü:
        1. /* Utility */
        2. .u-utilityName {}
        3.  
        4. /* State-utility */
        5. .u-isStateName {}
        6.  
        7. /* Component */
        8. .ComponentName {}
        9.  
        10. /* Component modifier */
        11. .ComponentName--modifierName {}
        12.  
        13. /* Component descendant */
        14. .ComponentName-descendant {}
        15.  
        16. /* Component descendant modifier */
        17. .ComponentName-descendant--modifierName {}
        18.  
        19. /* Component state (scoped to component) */
        20. .ComponentName.is-stateOfComponent {}
        21.  
        22. /* Component mixin (ancestor style dependencies) */
        23. .with-ComponentName {}
        ¸´ÖÆ´úÂë

        ÕâÖ»ÊÇÎҴ˿̷¢ÏÖÓÐÓõÄÒ»¸öÃüÃûģʽ£¬Ëü¿ÉÒÔ²ÉÈ¡ÈκÎÐÎʽ¡£µ«ºÃ´¦ÔÚÓÚÏû³ý ½ö½öÒÀÀµ(µ¥)Á¬×Ö·û»òÏ»®Ïß,»òÕßÍÕ·åʽ´óСдµÄÀàÃûµÄÆçÒå¡£


        ×¢ÒâÔ­Îļþ´óСºÍhttpѹËõ
        ·²ÌÖÂÛµ½Ä£¿é»¯ºÍ¿ÉÀ©Õ¹£¬css³ÉΪÓйØÎļþ´óСºÍÅòÕ͵ĹØ×¢ÐÔÎÊÌâ¡£Nicole SullivanµÄ̸»°Öо­³£Ìá¼°µ½½ÚÊ¡Îļþ´óС£¨ºÍά»¤¸Ä½ø£©¡£¶ø½ÚÊ¡Îļþ´óСÊÇһЩ¹«Ë¾ÀýÈçfacebook£¬ÔÚ²ÉÓÃÕâÖÖÄ£¿é»¯ºÍ¿ÉÀ©Õ¹·½·¨Ê±Óöµ½µÄÎÊÌâ¡£½øÒ»²½µØ£¬ÎÒÏë·ÖÏí£¬ÔÚÔ¤´¦ÀíÆ÷ÉϱàдÇÒ´óÁ¿Ê¹ÓÃHTMLÔªËØÊ±ÎÒ¶Ô±àдÍêµÄÎļþ½øÐÐhttpѹËõµÄЧ¹û¡£

        µ±Twitter BootstrapÎÊÊÀʱ£¬ÎÒ¸ÄдÁËÒѾ­±àÒëµÄcss£¬Ê¹ÆäÄܸüºÃµÄ·´Ó³³öÎÒÊÇÈçºÎÊÖдÀ´½øÐÐÓïÒ廯£¬²¢ÇұȽÏǰºóÎļþµÄ´óС¡£ÔÚͬʱ¾«¼òÁËÕâÁ½¸öÎļþÖ®ºó£¬ÊÖдÀ´½øÐÐÓïÒ廯µÄcss±ÈÔ¤´¦ÀíÆ÷ÉÏдµÄҪС´óÔ¼10%¡£µ«Êǵ±Á½¸öÎļþ¶¼²ÉÓÃgzipѹËõÁËÖ®ºó£¬Ô¤´¦ÀíÆ÷ÉÏдµÄ±ÈÊÖд½øÐÐÓïÒ廯µÄcssҪС´óÔ¼5%¡£

        ´Ë´¦Í¹ÏÔÁËÔÚ¾­¹ý HTTP ѹËõÖ®ºó½øÐÐÎļþ´óС¶Ô±ÈµÄÖØÒªÐÔ, ÒòΪѹËõºóµÄÎļþµÄ´óС²¢²»ÄÜÍêȫ˵Ã÷ÎÊÌâ. ÕâÒ²°µÊ¾ÁËÓо­ÑéµÄ CSS ¿ª·¢ÕßÔÚʹÓÃÔ¤´¦ÀíÆ÷µÄʱºòÎÞÐè¹ý¶à¾À½áÓÚÔÚ±àÒëÖ®ºóµÄ CSS Öлá³öÏÖµÄÒ»¶¨³Ì¶ÈµÄÖØ¸´, ÒòΪÔÚ HTTP ѹËõÖ®ºóËüµÄ³ß´ç»á×ÔÈ»µØ±äµÃ¸üС. ͨ¹ýÔ¤´¦ÀíÆ÷´¦Àí¹ýµÄ¸ü¾ßά»¤Ð﵀ CSS ´úÂëËù´øÀ´µÄÒæ´¦½«»áʤ¹ý¶ÔԭʼÎļþÒÔ¼°Ñ¹ËõÊä³öµÄ CSS ÎļþµÄ´óС»òÃÀѧÉϵĿ¼Á¿¡£¡¡

        ÔÚÁíÒ»´Îʵ¼ùÖÐ, ÎÒ´ÓÒ»¸öÔÚÏßÍøÕ¾ÉÏÏÂÔØÁËÒ»·ÝÓÐ 60KB ´óСµÄ HTML Îĵµ, ´ÓÖÐɾ³ýÁËËùÓÐµÄ class ÊôÐÔ(ËüÃǹ¹³ÉÁËÐí¶à¿ÉÖØÓõÄ×é¼þ). ÕâÑù´¦ÀíÖ®ºó½«ÎĵµµÄ´óС¼õСµ½ÁË 25KB. µ±Ô­Ê¼ÎĵµºÍ·ÖÀë¹ýµÄÎĵµ¸÷×Ô±» gzip ѹËõ¹ýºó, ËüÃǵijߴç±ä³ÉÁË 7.6KB ºÍ 6KB ¨C ½ö 1.6KB µÄÇø±ð. ¶ÔÓÚÄÇЩͨ¹ý×ÔÓÉʹÓà class ¶øÊµ¼Ê¶ÔÎļþ´óС²úÉúµÄÓ°ÏìÕæµÄ²»ÖµµÃÔÙÇ¿µ÷ºÍ·Å´óÁË¡£


        ÎÒÔõÑùѧ»áÍ£Ö¹·³Äյġ­
        Ðí¶àÊìÁ·µÄ¿ª·¢ÈËÔ±µÄ¾­Ñé,¾­¹ý¶àÄê,ÒѾ­µ¼ÖÂÁË´ó¹æÄ£ÍøÕ¾ºÍÓ¦ÓóÌÐò¿ª·¢µÄ¾Þ´óת±ä¡£¾¡¹ÜÈç´Ë,¶ÔÄÇЩÔÚÒâʶÐÎ̬É϶ÏÄ̵ĸöÌåÀ´Ëµ,¡°ÓïÒ廯HTML¡±ÊÇָʹÓÃÄÚÈÝÅÉÉúÀàÃû(¼´Ê¹ÊÇÕâÑù,Ö»ÄÜ×÷Ϊ×îºóµÄÊÖ¶Î),ÔÚÄã±äµÃ¿ÉÒÔÃôÈñµØÒâʶµ½ÄǸö·½·¨²»ÇÐʵ¼ÊµÄÐÔÖÊ֮ǰ£¬Í¨³£ÐèÒªÄãÍê³ÉÒ»¸ö´óÐÍÓ¦ÓóÌÐò¡£Äã±ØÐë×¼±¸·ÅÆú¾ÉµÄ¹ÛÄî,¿´¿´Ìæ´úÆ·,ÉõÖÁÄã¿ÉÒÔÖØÊ°Ö®Ç°ÞðÆúµÄ·½·¨¡£

        Ò»µ©Ä㿪ʼд×÷ÄãºÍÆäËûÈ˲»½öҪά»¤¶øÇÒÒª»ý¼«µü´úµÄ²»Æ½·²µÄÍøÕ¾ºÍÓ¦ÓóÌÐòʱ,ÄãºÜ¿ì¾Í»á·¢ÏÖ,¾¡¹ÜÄ㾡ÁË×î´óµÄŬÁ¦,ÄãµÄ´úÂ뿪ʼ±äµÃÔ½À´Ô½ÄÑά»¤¡£Ò»Ð©ÈËÌá³öÁËËûÃÇ×Ô¼ºµÄ·½·¨À´½â¾öÕâЩÎÊÌ⣬ÄãÖµµÃ»¨Ê±¼äȥ̽Ë÷ËûÃǵŤ×÷:ÄݿɵIJ©¿ÍºÍÃæÏò¶ÔÏóµÄCSSÏîÄ¿,ÇÇÄÉɭ˹Ŭ¿ËµÄ¿ÉÉìËõµÄCSSÄ£¿é»¯¼Ü¹¹,ºÍYandex¿ª·¢µÄ¿éÔªËØÐÞ¸ÄÆ÷·½·¨¡£

        µ±ÄãÑ¡ÔñÓÃHTMLºÍCSSд×÷,²¢ÊÔͼ¼õÉÙÄ㻨ÔÚд×÷ºÍ±à¼­CSSÉϵÄʱ¼ä,ÕâÉæ¼°µ½±ØÐë½ÓÊÜÈç¹ûÄãÏë¸Ä±äHTMLÔªËØµÄ·ç¸ñ£¬Äã±ØÐ뻨¸ü¶àµÄʱ¼äÐÞ¸ÄÔªËØµÄÀàÉÏ¡£ÕâÖ¤Ã÷ÊÇÏ൱ʵÓõÄ,ÎÞÂÛ¶Ôǰ¶Ë»¹ÊǺó¶Ë¿ª·¢ÈËÔ±¡ª¡ªÈκÎÈ˶¼¿ÉÒÔÖØÐÂÅÅÁÐÔ¤Ïȹ¹½¨µÄ¡°Àָ߻ýľ¡±;ÊÂʵ֤Ã÷,ûÓÐÈË¿ÉÒÔ·¢Ã÷cssÁ¶½ðÊõ¡£

         

        ÉÏһƪ£º½âÎö΢ÐŹ«ÖÚÆ½Ì¨ÐÅÏ¢ÍÆË͵ÄÏà¹Ø¼¼ÇÉ ÏÂһƪ£º¸ß¶ËÍøÕ¾½¨ÉèÓëÖеͶËÍøÕ¾½¨ÉèµÄÇø±ð
        ÈÕ±¾ÌØ»ÆÌØÉ«´óƬÃâ·ÑÊÓÆµ-ÄÐÅ®ÐԸ߰®³±Ãâ·ÑÊÓÆµ-»ÆÉ«ÊÓÆµÔÚÏß¹Û¿´