模拟一个bootstrap官网的一个网页demo，用到了bootstrap的组件导航栏、下拉菜单和栅格化布局
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 6 <link rel="stylesheet" href="css/bootstrap.min.css"> 7 <title>bootstrap_demo</title> 8 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> 9 <script type="text/javascript" src="js/bootstrap.min.js"></script> 10 </head> 11 <body> 12 <nav class="navbar navbar-inverse"> <!--导航栏设置navbar-inverse背景色黑色--> 13 <div class="container"> <!--使用组件导航栏需要增加container--> 14 <!-- Brand and toggle get grouped for better mobile display --> 15 <div class="navbar-header"> 16 <a class="navbar-brand" href="#">ProjectName</a> 17 </div> 18 <!-- Collect the nav links, forms, and other content for toggling --> 19 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 20 <ul class="nav navbar-nav"> 21 <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li> 22 <li><a href="#">About</a></li> 23 <li class="dropdown"> <!--下拉操作--> 24 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Contect <span class="caret"></span></a> 25 <ul class="dropdown-menu"> 26 <li><a href="#">Action</a></li> 27 <li><a href="#">Another action</a></li> 28 <li><a href="#">Something else here</a></li> 29 <li role="separator" class="divider"></li> <!--分割线--> 30 <li><a href="#">Separated link</a></li> 31 <li role="separator" class="divider"></li> <!--分割线--> 32 <li><a href="#">One more separated link</a></li> 33 </ul> 34 </li> 35 </ul> 36 </div> 37 </div> 38 </nav> 39 <div class="container"> 40 <div class="row"> <!--利用row来设置空行，左右栏布局--> 41 <div class="col-lg-9"> 42 <div class="jumbotron"> 43 <h1>Hello, world!</h1> 44 <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p> 45 <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> 46 </div> 47 <div class="row"> 48 <div class="col-lg-12"> 49 <div class="col-sm-6 col-md-4"> 50 <div class="caption"> 51 <h3>Heading</h3> 52 <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> 53 <p><a href="#" class="btn btn-default" role="button">View Details >></a></p> 54 </div> 55 </div> 56 <div class="col-sm-6 col-md-4"> 57 <div class="caption"> 58 <h3>Heading</h3> 59 <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> 60 <p><a href="#" class="btn btn-default" role="button">View Details >></a></p> 61 </div> 62 </div> 63 <div class="col-sm-6 col-md-4"> 64 <div class="caption"> 65 <h3>Heading</h3> 66 <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> 67 <p><a href="#" class="btn btn-default" role="button">View Details >></a></p> 68 </div> 69 </div> 70 <div class="col-sm-6 col-md-4"> 71 <div class="caption"> 72 <h3>Heading</h3> 73 <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> 74 <p><a href="#" class="btn btn-default" role="button">View Details >></a></p> 75 </div> 76 </div> 77 <div class="col-sm-6 col-md-4"> 78 <div class="caption"> 79 <h3>Heading</h3> 80 <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> 81 <p><a href="#" class="btn btn-default" role="button">View Details >></a></p> 82 </div> 83 </div> 84 <div class="col-sm-6 col-md-4"> 85 <div class="caption"> 86 <h3>Heading</h3> 87 <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> 88 <p><a href="#" class="btn btn-default" role="button">View Details >></a></p> 89 </div> 90 </div> 91 </div> 92 </div> 93 </div> 94 <div class="col-sm-3"> 95 <ul class="list-group"> 96 <a href="#" class="list-group-item active">Link</a> 97 <a href="#" class="list-group-item">Link</a> 98 <a href="#" class="list-group-item">Link</a> 99 <a href="#" class="list-group-item">Link</a> 100 <a href="#" class="list-group-item">Link</a> 101 <a href="#" class="list-group-item">Link</a> 102 <a href="#" class="list-group-item">Link</a> 103 <a href="#" class="list-group-item">Link</a> 104 <a href="#" class="list-group-item">Link</a> 105 <a href="#" class="list-group-item">Link</a> 106 <a href="#" class="list-group-item">Link</a> 107 <a href="#" class="list-group-item">Link</a> 108 <a href="#" class="list-group-item">Link</a> 109 <a href="#" class="list-group-item">Link</a> 110 <a href="#" class="list-group-item">Link</a> 111 </ul> 112 </div> 113 </div> 114 <hr> 115 <footer> 116 <p>© Company 2014</p> 117 <br> 118 119 </footer> 120 </div> 121 </body> 122 </html>