twitter bootstrap¿ìËÙ´´½¨ÏìӦʽ²¼¾ÖÍøÕ¾Ò³Ãæ

2013-04-19 09:09:11  À´Ô´:ÍøÒ³½ÌѧÍø 
Webjx.ComÌáʾ£ºÕâƪ½Ì³ÌÖ¼ÔÚÈÃÄãÔÚ20·ÖÖÓÄÚѧ»áʹÓÃtwitter bootstrap´´½¨Ò»¸öÕ¾µã¡£¿´ÍêÕâ¸ö½Ì³ÌºóÄãÓ¦¸ÃÄܹ»Ê¹ÓÃbootstrapÀ´½¨Á¢Ò»¸ö»ù±¾µÄÏìӦʽ²¼¾ÖµÄÒ³Ã棬Á˽âÕ¤¸ñϵͳ£¬²¢ÇÒÄܹ»Ê¹ÓÃbootstrapµ¼º½¡¢µ¼º½ÌõºÍÁ˽âÏìӦʽÉè¼ÆµÄ»ù´ £ÕâЩȫ²¿¶¼ÊÇʹÓÃtwitter bootstrapËùÐèÒª¾ß±¸
Õâƪ½Ì³ÌÖ¼ÔÚÈÃÄãÔÚ20·ÖÖÓÄÚѧ»áʹÓÃtwitter bootstrap´´½¨Ò»¸öÕ¾µã¡£¿´ÍêÕâ¸ö½Ì³ÌºóÄãÓ¦¸ÃÄܹ»Ê¹ÓÃbootstrapÀ´½¨Á¢Ò»¸ö»ù±¾µÄÏìӦʽ²¼¾ÖµÄÒ³Ã棬Á˽âÕ¤¸ñϵͳ£¬²¢ÇÒÄܹ»Ê¹ÓÃbootstrapµ¼º½¡¢µ¼º½ÌõºÍÁ˽âÏìӦʽÉè¼ÆµÄ»ù´¡¡£ÕâЩȫ²¿¶¼ÊÇʹÓÃtwitter bootstrapËùÐèÒª¾ß±¸µÄ֪ʶ¡£ Ê×ÏÈÎÒÃÇÐèҪ˵µÄÊÇtwitter bootstrapÊǷdz£ÓÅÐãµÄÒ»¸öÇ°¶Ë¿ªÔ´¿ò¼Ü£¬ËüΪËùÓеÄ×é¼ü¶¼ÌṩÁËÏêϸµÄÓÃÀý£¬ÈÃÄãÄܹ»ÇáÒ×µØͨ¹ý¸´ÖÆð¤Ìù¶ø¸½¼Óµ½ÄãµÄÉè¼ÆÖС£²éÔĹٷ½Îĵµ¿ÉÒÔµã»÷ÕâÀï¡£

»ù±¾µÄHTMLÄ£°å

ÎÒÃÇÐèÒªÒÔÒ»¸ö»ù±¾µÄHTMLÄ£°å£¬ÕâÑùÎÒÃÇÄܹ»°ÑËùÐèÒªµÄbootstrapÎļþ°üº¬½øÀ´¡£ÏÂÃæ¾ÍÊÇÎÒÃÇtwitter bootstrapÏîÄ¿µÄ¿ªÍ·£¬¸´ÖÆÕâЩ´úÂëµ½Ò»¸öÎļþÖв¢½«ÆäÃüÃûΪindex.html¡£
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
  <head>
    <title>Twitter Bootstrap Tutorial - A responsive layout tutorial</title>
    <style type='text/css'>
      body {
        background-color: #CCC;
      }
    </style>
  </head>
  <body>
  
  </body>
</html>
Õâ¶Î´úÂëÖÐÎÒÃÇÒѾ­Ìí¼ÓÁËһЩCSSʹҳÃæµÄ±³¾°³ÊÁÁ»ÒÉ«£¬ÒòΪÕâÑùÎÒÃÇÄܹ»ÇáÒ×µØÔÚÎÒÃǵÄÉè¼ÆÖп´¼û²»Í¬µÄÁУ¬Ê¹Ëü¸ü¼ÓÈÝÒ×Àí½â¡£

ÒýÈëtwitter bootstrapÎļþ

ΪÁËʹÓÃtwitter bootstrapÎÒÃǽö½öÐèÒª°ÑÒ»¸öÎļþÒýÈëµ½ÎÒÃǵÄÄ£°åµ±ÖÐÀ´£¬ÒýÈëÎļþÓкܶàÖÖ·½·¨£¬Èç¹ûÄãÏëÁ˽âÕâЩ·½·¨Çë²éÔÄÏà¹ØÎĵµ¡£ »ùÓÚ±¾½Ì³ÌµÄ³ö·¢µã£¬ÎÒÃǽ«»áͨ¹ýCDNÀ´ÒýÈëbootstrap-combined.min.cssÎļþ¶ø²»ÐèÒªÏÂÔØÈκεÄÎļþ¡£
1
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
ËüÄܹ»Ê¹ËùÓеÄtwitter bootstrap CSSÔÚÎÒÃǵÄÄ£°åÖÐÉúЧ¡£

Twitter BootstrapµÄÈÝÆ÷

bootstrapµÄcontainerÀàÊǷdz£ÓÐÓõģ¬ËüÄÜÔÚÒ³ÃæÖд´½¨Ò»¸ö¾ÓÖеÄÇøÓò£¬È»ºóÎÒÃÇÄܹ»°ÑÆäËûλÖõÄÄÚÈݷŵ½ÀïÃæ¡£containerÀàµÈ¼ÛÓÚ´´½¨ÁËÒ»¸ö¾ßÓо²Ì¬¿í¶È²¢ÇÒmaginֵΪautoµÄÒ»¸ö¾ÓÖеÄdiv¿ò¡£twitter bootstrapµÄ containerÀàµÄÓŵãÔÚÓÚËüÊÇÏìӦʽµÄ£¬Ëü»áÒÔµ±Ç°ÆÁÄ»µÄ¿í¶ÈΪ»ù´¡¼ÆËã³ö×î¼ÑµÄ¿í¶ÈÓèÒÔʵÓᣠÔÚbody±êÇ©ÖУ¬Ê¹ÓÃcontainerÀà´´½¨Ò»¸ödiv¡£Ëü»á×÷ΪҳÃæÖ÷ÒªµÄ·ÅÖÃÆäËû´úÂëµÄÍâ²ã°ü¹ü¡£ Èç¹ûÄãµ÷ÕûÕâ¸öDIVµÄ¸ß¶È²¢½«Æä±³¾°ÑÕÉ«ÉèÖÃΪ°×É«£¬ÄãËù¿´µ½µÄЧ¹û»áÊÇÕâÑù£º Twitter Bootstrap Tutorial, Section 1

±êÌâºÍµ¼º½

ÏÖÔÚÎÒÃÇÒѾ­ÓÐÒ»¸öµØ·½¿ÉÒÔÌí¼Ó¶îÍâµÄHTML´úÂ룬ÎÒÃÇ¿ÉÒÔÌí¼Ó±êÌâÎı¾È»ºóÔÙ´´½¨Õ¾µãµÄÖ÷Òªµ¼º½Ìõ¡£ ¼ÓÈëÈçϵÄÎı¾»òÕßÄãÑ¡ÔñµÄÎÄ×Öµ½containerÀàµÄdiv±êÇ©µ±ÖС£
1
<h1>TWITTER BOOTSTRAP TUTORIAL</h1>
ÏÖÔÚ²¢Ã»ÓжàÉÙеĶ«Î÷£¬Õâ½ö½öÊÇÒ»¸ö±êÌ⣬ÈÃÎÒÃÇתÒƵ½¸üÓÐȤµÄ·½Ã棬twitter bootstrapµ¼º½¡£ Bootstrap ÓÐÒ»¸önavÀàÈÃÎÒÃÇÄܹ»´´½¨¸÷ÖÖ¸÷ÑùµÄµ¼º½ÔªËØ£¬Äã¿ÉÒÔÔÚh1±êÇ©Ö®ºó¼ÓÈëÈçϵĴúÂë¡£
1
2
3
4
5
6
7
8
9
<div class="navbar navbar-inverse">
  <div class='nav-collapse' style="height: auto;">
    <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page One</a></li>
      <li><a href="#">Page Two</a></li>
    </ul>
  </div>
</div>
navbarÏà¹ØµÄÀàÓµÓе¼º½ÌõËùÓеÄÑùʽ£¬Ìí¼Ónavbar-inverseÀཫ»áÓ¦ÓÃÒ»¸öºÜ¿áµÄºÚÉ«·ç¸ñ£¬ÕâÊÇÒ»¸ötwitter bootstrapµÄ³£¼û´îÅä¡£ÎÒ½¨ÒéÔÚÕâ¸öÑùʽµÄ»ù´¡ÉϽøÐÐÍØÕ¹´Ó¶ø´´ÔìÄãµÄ¶ÀÒ»ÎÞ¶þµÄµ¼º½¡£µ«ÔÚÕâ¸ö½Ì³ÌÖÐÎÒÃÇÈÔÈ»»áʹÓûù´¡µÄbootstrapÑùʽ¡£ ÔÚÀàΪnavbarµÄDIVµ±ÖУ¬ÎÒÃÇÌí¼ÓÁíÒ»¸öÀàΪnav-collapseµÄDIV²¢ÎªÆäÌí¼ÓÐÐÄÚÑùʽheight:auto£»ÕâÊǸæËßbootstrapµ±Õâ¸öÒ³ÃæÔÚСÓÚ970px¿í¶ÈµÄä¯ÀÀÆ÷´°¿Úµ±ÖÐʱ£¬Ëü»áÌṩһ¸öѹËõµÄÇл»ÊÓͼ¡£ Èç¹ûÄã±£´æÁËindex.htmlÎļþÈ»ºóÔÚä¯ÀÀÆ÷Öдò¿ª£¬µ±Äãµ÷Õûä¯ÀÀÆ÷´°¿ÚµÄ¿í¶ÈʱÄã¾ÍÄܹ»¿´µ½Õâ¸ö±ä»¯£¬ÈçͼËùʾ¡£ ´óÓÚ979px Twitter Bootstrap Tutorial, Section 2 СÓÚ979px Twitter Bootstrap Tutorial, Section 3 ÁíÍ⣬ÎÒÃÇ¿ÉÒÔÌí¼ÓnavÀൽһ¸öHTMLÎÞÐòÁбíÔªËØÖÐÒÔ±ã´Óbootstrap CSSÎļþÖÐÓ¦Óøü¶àµÄÑùʽ£¬Ò²¿ÉÒÔÌí¼ÓÒ»¸öactiveÀൽ“HOME”ÁбíÏîÖС£

Ö÷ÄÚÈݺͲà±ßÀ¸

ÎÒÃÇÒѾ­Íê³ÉÁËÕ¾µãµÄÖ÷µ¼º½£¬ÏÖÔÚÎÒÃÇÐèÒªÌí¼ÓÖ÷ÒªÄÚÈÝÇøºÍÒ»¸ö²à±ßÀ¸À´Ö§³Ö¸ü¶àµÄÁ´½Ó»òµ¼º½Â·¾¶¡£Çë°ÑÏÂÃæµÄ´úÂëÌí¼Óµ½µ¼º½ÌõÖ®ºó¡£
1
2
3
4
5
6
7
8
<div id='content' class='row-fluid'>
  <div class='span9 main'>
    <h2>Main Content Section</h2>
  </div>
  <div class='span3 sidebar'>
    <h2>Sidebar</h2>
  </div>
</div>
ÕâÕýÊÇÎÒÃÇÐèҪŪ¶®µÄbootstrapµÄÕ¤¸ñϵͳ£¬µ±È»£¬bootstrapµÄ¹Ù·½ÎĵµÖк­¸ÇÁ˸ü¶àµÄϸ½Ú£¬µ«ÎÒÃǽ«»áÒÔ»ù´¡¿ªÊ¼,ÈÃÄã¸üºÃµØÀí½âËü¡£ Õ¤¸ñϵͳÀûÓÃÁË12ÁеIJ¼¾Ö£¬ÕâÒâζ×ÅÒ»¸öÒ³Ãæ¿ÉÒÔ±»·Ö¸î³É12¸öÏàͬµÄÁС£ÏÂÃæÕâÕÅ´Óbootstrap¹Ù·½ÎĵµÖÐÄõ½µÄͼƬ¸ø³öÁËÒ»¸öºÜºÃµÄչʾ¡£ Twitter Bootstrap Tutorial, Section 4 ÔÚÎÒÃǸոÕð¤ÌùÔÚµ¼º½ÌõÏÂÃæµÄ´úÂëÖÐÄã¿ÉÒÔ¿´µ½ÃûΪspan9ºÍspan3µÄÀà¡£ËüÃÇ»á°ÑÒ³Ãæ·Ö¸î³É×ó±ß9Áпí¶ÈºÍÓÒ±ß3Áпí¶ÈµÄÁ½²¿·Ö£¬ÐγÉÎÒÃǵÄÄÚÈÝÇøÓòºÍ²à±ßÀ¸¡£Ê¹ÓÃÕ¤¸ñϵͳµÄÆäÖÐÒ»¸öºÃ´¦¾ÍÊÇËü»á¸ù¾ÝÊÓ´°¿í¶È¶¯Ì¬¼ÆËã³öÁеĿí¶È£¬Òò´ËÄã²»ÐèҪдÈκεÄýÌå²éѯҲÄÜʹÄãµÄÕ¾µã¹¤×÷ÔÚÈκεÄÆÁÄ»·Ö±æÂÊÏ¡£ Äã¿ÉÒÔͨ¹ý¸Ä±äspanµÄÊýÁ¿ºÍµ÷Õûä¯ÀÀÆ÷µÄ´óСÀ´¹Û²ìËüÃǵÄЧ¹û¡£Äã»á×¢Òâµ½µ±ÄÚÈÝÇøСÓÚ724pxµÄʱºò£¬ÕâЩÁлᴹֱµØ¶Ñ·Å¡£ ÏÖÔÚÎÒÃÇÔÚÖ÷ÄÚÈÝÇøÓò°ÑÏÂÁÐÎı¾»òÕßÈκÎÆäËûµÄÎı¾·ÅÔÚÔÚh2±êÇ©Ö®ºó£¬ÕâÖ»ÊÇΪÁË°ÑÒ³ÃæÀ­³¤Ò»µã¡£ ÏÖÔÚÕ¾µã»áÏñÈçÏÂÏÔʾ£º Twitter Bootstrap Tutorial, Section 5  

²à±ßÀ¸µ¼º½

Äã¿ÉÒÔÔÚÕâÀï¿´µ½ËùÓеÄTwitter bootstrapΪÎÒÃÇÌṩµÄµ¼º½ÔªËØ¡£ ÎÒÃǽ«ÒªÊ¹Óô¹Ö±Ñ¡ÏÀ´´´½¨Ò»¸ö¶îÍâµÄµ¼º½Çø¡£¸´ÖƺÍð¤ÌùÏÂÃæµÄ´úÂëµ½sidebarµÄh2±êÇ©Ö®ºó¡£
1
2
3
4
5
<ul class="nav nav-tabs nav-stacked">
  <li><a href='#'>Another Link 1</a></li>
  <li><a href='#'>Another Link 2</a></li>
  <li><a href='#'>Another Link 3</a></li>
</ul>
ÕâÊÇÒ»¸ö¼òµ¥µÄչʾ£¡ÉÏÃæµÄ´úÂëÕÕ×ÖÃæÀí½â½ö½öÊÇÒ»¸ö¾ßÓÐÀàΪnav-tabsºÍnav-stackedµÄÎÞÐòÁÐ±í£¬µ«ËüȴΪÎÒÃÇ´´ÔìÁËÒ»¸öµ¼º½Ãæ°å¡£ ¿´¿´×îºóµÄЧ¹û£¬Ò»¸ö»ùÓÚtwitter bootstrapµÄÏìӦʽÉè¼ÆµÄÒ³ÃæÍê³ÉÁË¡£ Twitter Bootstrap Tutorial, Section 6

½áÂÛ

ͨ¹ýtwitter bootstrapËùÌṩµÄÌØÐÔ£¬ÎÒÃǸø³öÁËÕâ¸ö·Ç³£¿ìËÙµÄbootstrap»ù´¡½Ì³Ì,µ«»¨µãʱ¼äÁ·Ï°²¢¶à¶à²éÔĹٷ½µÄÎĵµ£¬²»¾ÃÖ®ºóÄã¾Í¿ÉÒÔ³ÉΪһ¸öbootstrapµÄר¼ÒÁË¡£ ÔÚÔĶÁ±¾½Ì³ÌÖ®ºóÄãÓ¦¸Ã¶®µÃÈçºÎʹÓÃÕ¤¸ñϵͳ£¬²»Í¬ÀàÐ͵ĵ¼º½ºÍÏìӦʽÉè¼ÆµÄ»ù±¾Ô­Àí¡£ Èç¹ûÄãÓÐÈκεÄÎÊÌâ»òÕß·´À¡£¬ÇëÔÚÏÂÃæµÄÆÀÂÛÇøÁôÏÂÄãµÄÐÅÏ¢£¬¸ÐлÄãµÄÔĶÁ¡£ ÒëÕßÊÖÓÕû¸ö·­ÒëÒÀÕÕÔ­ÎÄÏß·½øÐУ¬²¢ÔÚ·­Òë¹ý³ÌÂÔ¼ÓÁ˸öÈ˶Լ¼ÊõµÄÀí½â¡£Èç¹û·­ÒëÓ⻶ÔÖ®´¦£¬»¹·³ÇëͬÐÐÅóÓÑÖ¸µã¡£Ð»Ð»£¡
¸ü¶à
钱柜娱乐