fmpq.com
源代码：
点击运行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example of Fluid Layout with Bootstrap version 2.0 from fmpq.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Example of Fluid Layout with Bootstrap version 2.0 from fmpq.com"> <meta name="author" content=""> <!-- Le styles --> <link href="/jscss/bootstrap/v3/bootstrap.css" rel="stylesheet"> <link href="/jscss/bootstrap/v3/example-fluid-layout.css" rel="stylesheet"> <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!-- Le fav and touch icons --> <link rel="shortcut icon" href="/images/bootstrap/favicon.ico"> <link rel="apple-touch-icon" href="/images/bootstrap/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="72x72" href="/images/bootstrap/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="/images/bootstrap/apple-touch-icon-114x114.png"> </head> <body> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container-fluid"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <div class="nav-collapse"> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> <p class="navbar-text pull-right">Logged in as <a href="#">username</a></p> </div><!--/.nav-collapse --> </div> </div> </div> <div class="container-fluid"> <div class="row-fluid"> <div class="span3"> <div class="well sidebar-nav"> <ul class="nav nav-list"> <li class="nav-header">Frontend</li> <li class="active"><a href="#">HTML 4.01</a></li> <li><a href="#">HTML5</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">Twitter Bootstrap</a></li> <li><a href="#">Firebug</a></li> <li class="nav-header">Backend</li> <li><a href="#">PHP</a></li> <li><a href="#">SQL</a></li> <li><a href="#">MySQL</a></li> <li><a href="#">PostgreSQL</a></li> <li><a href="#">MongoDB</a></li> </ul> </div><!--/.well --> </div><!--/span--> <div class="span9"> <div class="leaderboard"> <h1>Learn. Practice. Develop.</h1> <p>paoo offers web development tutorials. We believe in Open Source. Love standards. And prioritize simplicity and readability while serving content.</p> <p><a class="btn btn-success btn-large">Join paoo now</a></p> </div> <div class="row-fluid"> <div class="span4"> <h2>Learn</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-success btn-large" href="#">Start Learning now</a></p> </div><!--/span--> <div class="span4"> <h2>Practice</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-success btn-large" href="#">Start percticing now</a></p> </div><!--/span--> <div class="span4"> <h2>Develop</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-success btn-large" href="#">Start developing now</a></p> </div><!--/span--> </div><!--/row--> <hr> <footer> <p>© Company 2012</p> </footer> </div><!--/.fluid-container--> <!-- Le javascript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="/jscss/bootstrap/v3/jquery.js"></script> <script src="/jscss/bootstrap/v3/bootstrap-transition.js"></script> <script src="/jscss/bootstrap/v3/bootstrap-alert.js"></script> <script src="/jscss/bootstrap/v3/bootstrap-modal.js"></script> <script src="/jscss/bootstrap/v3/bootstrap-dropdown.js"></script> <script src="/jscss/bootstrap/v3/bootstrap-scrollspy.js"></script> <script src="/jscss/bootstrap/v3/bootstrap-tab.js"></script> <script src="/jscss/bootstrap/v3/bootstrap-tooltip.js"></script> <script src="/jscss/bootstrap/v3/bootstrap-popover.js"></script> <script src="/jscss/bootstrap/v3/bootstrap-button.js"></script> <script src="/jscss/bootstrap/v3/bootstrap-collapse.js"></script> <script src="/jscss/bootstrap/v3/bootstrap-carousel.js"></script> <script src="/jscss/bootstrap/v3/bootstrap-typeahead.js"></script> </body> </html>
运行结果