本特效支持PC浏览器和触屏浏览器。
效果展示 http://hovertree.com/texiao/bootstrap/8/
手机扫描二维码体验效果：
HTML代码如下：
<!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"> <title>BootStrap自适应HTML模版之商城首页_何问起</title> <base target="_blank" /> <link href="http://hovertree.com/ziyuan/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <script src="http://down.hovertree.com/jquery/jquery-1.12.4.min.js"></script> <script src="http://hovertree.com/ziyuan/bootstrap/3.3.6/js/bootstrap.min.js"></script> <style type="text/css"> .my-row { margin: 15px auto; } .my-ul { margin-top: 18px; } .my-nav { margin-bottom: 3px; } .my-sming img { height: 120px; width: 120px; } .my-sming div { height: 180px; text-align: center; } </style> </head> <body> <div class="container"> <div class="row my-row"> <div class="col-md-4 col-sm-6 col-xs-6"> <img src="http://hovertree.com/texiao/bootstrap/8/img/logo2.png" /> </div> <div class="col-md-5 hidden-sm hidden-xs"> <img src="http://hovertree.com/texiao/bootstrap/8/img/header.jpg" /> </div> <div class="col-md-3 col-sm-6 col-xs-6"> <ul class="list-inline my-ul"> <li><a href="http://hovertree.com/texiao/html5/12/">登录</a></li> <li><a href="http://hovertree.com/texiao/bootstrap/5/">注册</a></li> <li><a href="http://hovertree.com/menu/jquery/">购物车</a></li> </ul> </div> </div> <div class="row"> <!--导航条--> <nav class="navbar navbar-inverse my-nav"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="http://hovertree.com/menu/bootstrap/" style="background-color: #000;">首页</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="http://hovertree.com/menu/texiao/">手机数码</a></li> <li><a href="http://hovertree.com/menu/html5/">电脑办公</a></li> <li><a href="http://hovertree.com/menu/webfront/">服饰鞋帽</a></li> <li><a href="http://hovertree.com/h/bjaf/yd5tssek.htm">原文</a></li> <li><a href="http://hovertree.com/map/">......</a></li> </ul> <form class="navbar-form navbar-right" role="search"> <div class="form-group"> <input type="text" class="form-control" name="hovertree" placeholder="请输入关键字"> </div> <button type="submit" class="btn btn-default">搜索</button> </form> </div> </div> </nav> </div> <div class="row"> <!--轮播图--> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="3000"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="http://hovertree.com/texiao/bootstrap/8/img/lbt01.jpg" alt="图片不存在"> </div> <div class="item"> <img src="http://hovertree.com/texiao/bootstrap/8/img/lbt02.jpg" alt="图片不存在"> </div> <div class="item"> <img src="http://hovertree.com/texiao/bootstrap/8/img/lbt03.jpg" alt="图片不存在"> </div> </div> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev" target="_self"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next" target="_self"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> </a> </div> </div> </div> </body> </html>