<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <title></title> <link href="css/bootstrap.min.css" rel="stylesheet"> <style> body { font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif; color: #666; } .jumbotron { background-image: url(img/bg.jpg); margin: 50px 0 0 0; color: #ccc; } .jumbotron h1 { font-size: 26px; padding: 0 0 0 20px; } .jumbotron h4 { font-size: 15px; padding: 0 0 0 20px; } #case { padding: 40px 0; background-color: #eee; text-align: center; } #case h4 { color: #666; } #case p { color: #666; line-height: 1.6; } #footer { background-color: #666; border-top: 1px solid #ccc; padding: 20px; text-align: center; color: #eee; } /*没有小于768px,是因为Bootstrap3以移动端优先设计*/ /* 小屏幕(平板,大于等于768px) */ @media (min-width: 768px) { } /* 中等屏幕(桌面显示器,大于等于992px) */ @media (min-width: 992px) { } /* 大屏幕(大桌面显示器,大于等于1200px) */ @media (min-width: 1200px) { } </style> </head> <body> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a href="#" class="navbar-brand" style="padding: 0;"><img src="img/logo.png" alt="标志"></a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav navbar-right" style="margin-top: 0;"> <li><a href="#"><span class="glyphicon glyphicon-home"></span> 首页</a></li> <li><a href="#"><span class="glyphicon glyphicon-list"></span> 资讯</a></li> <li><a href="#"><span class="glyphicon glyphicon-fire"></span> 案例</a></li> <li><a href="#"><span class="glyphicon glyphicon-question-sign"></span> 关于</a></li> </ul> </div> </div> </nav> <div class="jumbotron"> <div class="container"> <hgroup> <h1>一站式共享网络</h1> <h4>阅谁问君诵,水落清香浮。</h4> </hgroup> </div> </div> <div id="case"> <div class="container"> <div class="row"> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="thumbnail"> <img src="img/case.png" alt=""> <div class="caption"> <h4>阅谁问君诵</h4> <p>阅谁问君诵,水落清香浮。</p> </div> </div> </div> <!--begin--> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="thumbnail"> <img src="img/case.png" alt=""> <div class="caption"> <h4>阅谁问君诵</h4> <p>阅谁问君诵,水落清香浮。</p> </div> </div> </div> <!--end--> <!--循环十次--> </div> </div> </div> <footer id="footer"> <div class="container"> <p>分享最有用的资料,为用户建最有体验度的网站</p> <p>互联网知识共享资料 版权所有 粤ICP备15052347号</p> </div> </footer> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
效果图: