<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title></title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<style>
div{
/*border : 1px solid #000;*/
}
</style>
</head>
<body>
<div class="container">
<h1>响应式栅格布局系统demo</h1>
<!--页头-->
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<ul class="list-inline">
<li class="bg-info btn-sm table-hover"><a href="#">Home</a></li>
<li class="bg-info btn-sm"><a href="#">News</a></li>
<li class="bg-info btn-sm"><a href="#">Product</a></li>
</ul>
</div>
<div class="col-md-offset-5 col-md-3 col-sm-5 col-sm-offset-1 col-xs-12">
<input class="form-control" type="text">
</div>
</div>
<!--页面主体-->
<div class="row">
<div class="col-md-2 col-sm-3 col-xs-12">左侧的导航 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad consectetur culpa excepturi, facilis maiores numquam quisquam quod temporibus! Aperiam ea officiis voluptate. Dolores libero minima numquam quasi repellat reprehenderit tenetur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque eaque facilis nulla omnis perspiciatis? Architecto cupiditate debitis deleniti deserunt, dolore eos fugiat voluptatibus. Autem cupiditate doloremque placeat quibusdam temporibus vero. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad at autem dolorem excepturi incidunt labore laborum optio perspiciatis quaerat reprehenderit saepe, soluta velit veritatis voluptatem? Laborum sunt velit voluptatem!</div>
<div class="col-md-8 col-sm-9 col-xs-12">
<div class="row">
<div class="col-sm-3 col-xs-6"><img class="img-responsive" src="img/1.jpg" alt=""></div>
<div class="col-sm-3 col-xs-6"><img class="img-responsive" src="img/2.jpg" alt=""></div>
<div class="col-sm-3 col-xs-6"><img class="img-responsive" src="img/3.jpg" alt=""></div>
<div class="col-sm-3 col-xs-6"><img class="img-responsive" src="img/4.jpg" alt=""></div>
</div>
中央的主体 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores consectetur culpa eveniet facilis ipsum laudantium maiores numquam, porro praesentium quaerat quisquam repellat repellendus sed suscipit temporibus, ut vero voluptatem, voluptatum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque aut corporis, cupiditate eaque impedit iure modi neque nisi numquam quae repellat tempore! Facilis id ipsa laboriosam odit porro repellat sit!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam commodi, voluptatem. Iusto magnam molestias praesentium repellat suscipit! At laborum nam optio tempora! A alias cum facere laboriosam laborum numquam sed. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores culpa cumque quidem reprehenderit rerum voluptatum! Amet aut cumque cupiditate eligendi ipsa iure labore nobis perferendis recusandae repellendus similique totam, ullam?</div>
<div class="col-md-2 hidden-sm hidden-xs">右侧的广告 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid autem, earum eligendi est et iure magni nemo optio, perferendis placeat quaerat quo rem voluptatum. Consequatur consequuntur impedit nesciunt perferendis rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad assumenda doloremque omnis sunt voluptatibus? Aliquid animi at doloribus earum eius, enim fugiat hic modi molestiae placeat quos, similique? Ad, magni! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias architecto consectetur dicta doloremque enim esse est fugiat harum hic ipsam laudantium modi mollitia nesciunt quidem, recusandae saepe tempore tenetur? Tempore?</div>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.js"></script>
<script>
(function () {
var s = document.createElement("script");
s.onload = function () {
bootlint.showLintReportForCurrentDocument([]);
};
s.src = "js/bootlint.js";
document.body.appendChild(s)
})();
</script>
</body>
</html>
