許多人在修改響應式模板時,經常在不同尺寸間的布局無法適當地排版,特別是由資料庫取出的資料,因此建議如果你的網站已經穩定,可以將某部份資料改成靜態方式,例如底下的導航欄:
HTML:
CSS:



HTML:
<nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a href="" class="navbar-brand"> <img src="images/logo.png" alt="原來如此-ECSHOP開店支援"></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="shopping-cart hidden-xs pull-right dropdown"> <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <span class="glyphicon glyphicon-shopping-cart"></span>產品 <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="/goods-102-ECSHOP%E9%9F%BF%E6%87%89%E5%BC%8F%E6%A8%A1%E6%9D%BF+PRO.html" title="ECSHOP響應式模板 PRO"><img src="/images/201607/thumb_img/102_thumb_G_1468809319361.jpg" alt="ECSHOP響應式模板 PRO" />ECSHOP響應式模板 PRO</a></li> <li><a href="/goods-94-%E8%B6%85%E5%95%86%E5%8F%96%E8%B2%A8%E4%BA%8C%E5%90%88%E4%B8%80.html" title="超商取貨二合一"><img src="/images/201601/thumb_img/94_thumb_G_1453157300111.jpg" alt="超商取貨二合一" />超商取貨二合一</a></li> <li><a href="/goods-91-ECSHOP%E5%BE%8C%E5%8F%B0%E5%AE%88%E9%96%80%E5%93%A1.html" title="ECSHOP後台守門員"><img src="/images/201304/thumb_img/91_thumb_G_1366266446153.jpg" alt="ECSHOP後台守門員" />ECSHOP後台守門員</a></li> <li><a href="/goods-93-ECSHOP+%E5%95%86%E5%93%81%E7%9B%B8%E5%86%8A%E6%89%B9%E9%87%8F%E4%B8%8A%E5%82%B3%E6%8F%92%E4%BB%B6.html" title="ECSHOP 商品相冊批量上傳插件"><img src="/images/201305/thumb_img/93_thumb_G_1369644360086.jpg" alt="ECSHOP 商品相冊批量上傳插件" />ECSHOP 商品相冊批量上傳插件</a></li> <!-- 使用ECSHOP動態載入 --> <!--{foreach from=$categories item=cat}--> <!-- <li><a href="{$cat.url}">{$cat.name|escape:html}</a></li> --> <!--{/foreach}--> </ul> </div> <div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href=""><span class="glyphicon glyphicon-home"></span>首頁</a></li> <li><a href=""><span class="glyphicon glyphicon-th-list"></span>資訊</a></li> <li><a href=""><span class="glyphicon glyphicon-fire"></span>案例</a></li> <li><a href=""><span class="glyphicon glyphicon-info-sign"></span>關於</a></li> <li><a href=""><span class="glyphicon glyphicon-phone-alt"></span>客服</a></li> </ul> </div> </div> </nav> <div class="container visible-xs"> <div class="cat"> <a href="/goods-102-ECSHOP%E9%9F%BF%E6%87%89%E5%BC%8F%E6%A8%A1%E6%9D%BF+PRO.html" title="ECSHOP響應式模板 PRO"> <div class="col-xs-4 cat-box"> <img src="/images/201607/thumb_img/102_thumb_G_1468809319361.jpg" alt="ECSHOP響應式模板 PRO" /> <div class="goods_name"> ECSHOP響應式模板 PRO </div> </div> </a> <a href="/goods-94-%E8%B6%85%E5%95%86%E5%8F%96%E8%B2%A8%E4%BA%8C%E5%90%88%E4%B8%80.html" title="超商取貨二合一"> <div class="col-xs-4 cat-box"> <img src="/images/201601/thumb_img/94_thumb_G_1453157300111.jpg" alt="超商取貨二合一" /> <div class="goods_name"> 超商取貨二合一 </div> </div> </a> <a href="/goods-91-ECSHOP%E5%BE%8C%E5%8F%B0%E5%AE%88%E9%96%80%E5%93%A1.html" title="ECSHOP後台守門員"> <div class="col-xs-4 cat-box"> <img src="/images/201304/thumb_img/91_thumb_G_1366266446153.jpg" alt="ECSHOP後台守門員" /> <div class="goods_name"> ECSHOP後台守門員 </div> </div> </a> <a href="/goods-93-ECSHOP+%E5%95%86%E5%93%81%E7%9B%B8%E5%86%8A%E6%89%B9%E9%87%8F%E4%B8%8A%E5%82%B3%E6%8F%92%E4%BB%B6.html" title="ECSHOP 商品相冊批量上傳插件"> <div class="col-xs-4 cat-box"> <img src="/images/201305/thumb_img/93_thumb_G_1369644360086.jpg" alt="ECSHOP 商品相冊批量上傳插件" /> <div class="goods_name"> ECSHOP 商品相冊批量上傳插件 </div> </div> </a> </div> </div>
CSS:
a:hover { text-decoration: none; } nav .container .navbar-header .navbar-toggle { margin-right: 30px; } nav .container .navbar-header a.navbar-brand { padding:0; } nav .container .navbar-header a.navbar-brand img { max-height: 50px; } nav .container .collapse ul { margin-top: 0px; } nav .container li span.glyphicon { margin-right: 5px; } nav .container .shopping-cart { margin: 9px 0 0 30px; } .cat { margin-top: 60px; min-height: 30px; padding: 0 0 10px; } .cat-box { padding: 5px 0; text-align: center; } .cat-box img { width: 55px; height: 55px; border: 1px solid #aaa; border-radius: 50px; padding: 3px; } .dropdown-menu img { width: 30px; height: 30px; border: 1px solid #aaa; border-radius: 50px; padding: 2px; margin: 0 6px; } .navbar-fixed-top { box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); }


