编辑下面的代码:【加编码】
<html lang="en"> <head> <meta charset="utf-8"> <title>Example of Resonsive Layout with Bootstrap from ziqiangxuetang.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Example of Responsive Layout with Bootstrap version 2.0 from ziqiangxuetang.com"> <meta name="author" content=""> <link href="/try/bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet"> <link href="/try/bootstrap/twitter-bootstrap-v2/docs/assets/css/example-fluid-layout.css" rel="stylesheet"> <link href="/try/bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap-responsive.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <link rel="shortcut icon" href="/try/bootstrap/twitter-bootstrap-v2/docs/examples/static/images/favicon.ico"> <link rel="apple-touch-icon" href="/try/bootstrap/twitter-bootstrap-v2/docs/examples/static/images/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="72x72" href="/try/bootstrap/twitter-bootstrap-v2/docs/examples/static/images/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="/try/bootstrap/twitter-bootstrap-v2/docs/examples/static/images/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="/demo/bootstrap-responsive-design.htm#about">About</a></li> <li><a href="/demo/bootstrap-responsive-design.htm#contact">Contact</a></li> </ul> <p class="navbar-text pull-right">Logged in as <a href="#">username</a></p> </div> </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> </div> <div class="span9"> <div class="leaderboard"> <h1>Learn. Practice. Develop.</h1> <p>ziqiangxuetang 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 ziqiangxuetang 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> <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> <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> </div> <hr> <footer> <p>© Company 2012</p> </footer> </div> <script src="/try/bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script> <script src="/try/bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-transition.js"></script> <script src="/try/bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-alert.js"></script> <script src="/try/bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-modal.js"></script> <script src="/try/bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"></script> <script src="/try/bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-scrollspy.js"></script> <script src="/try/bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tab.js"></script> <script src="/try/bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tooltip.js"></script> <script src="/try/bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-popover.js"></script> <script src="/try/bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-button.js"></script> <script src="/try/bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script> <script src="/try/bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-carousel.js"></script> <script src="/try/bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-typeahead.js"></script> </div></div></body> </html>
结果: 【此窗口】 帮助?
Try it Yourself - © 自强学堂