作者 主題: 24、ECSHOP + Bootstrap3 製作響應式導航欄  (閱讀 552 次)

0 會員 與 1 訪客 正在閱讀本文。

離線 andy

  • 管理員
  • 正式會員
  • *****
  • 積分 +1/-0
  • 性別: 男
    • 原來如此
24、ECSHOP + Bootstrap3 製作響應式導航欄
« 於: 七月 22, 2019, 11:14:17 下午 »
許多人在修改響應式模板時,經常在不同尺寸間的布局無法適當地排版,特別是由資料庫取出的資料,因此建議如果你的網站已經穩定,可以將某部份資料改成靜態方式,例如底下的導航欄:
html:
代碼: [選擇]
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a href="" class="navbar-brand">
            <img src="https://we-shop.net/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.html" title="ECSHOP響應式[/url]模板 PRO"><img src="https://we-shop.net/images/201607/thumb_img/102_thumb_G_1468809319361.jpg" alt="ECSHOP響應式模板 PRO" />ECSHOP響應式模板 PRO</a></li>
                   
                <li><a href="/goods-94.html" title="超商取貨二合一"><img src="https://we-shop.net/images/201601/thumb_img/94_thumb_G_1453157300111.jpg" alt="超商取貨二合一" />超商取貨二合一</a></li>
                <li><a href="/goods-91.html"  title="ECSHOP後台守門員"><img src="https://we-shop.net/images/201304/thumb_img/91_thumb_G_1366266446153.jpg" alt="ECSHOP後台守門員" />ECSHOP後台守門員</a></li>
                <li><a href="/goods-93.html" title="ECSHOP 商品相冊批量上傳插件"><img src="https://we-shop.net/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.html" title="ECSHOP響應式模板 PRO">
            <div class="col-xs-4 cat-box">
                <img src="https://we-shop.net/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.html" title="超商取貨二合一">
            <div class="col-xs-4 cat-box">
                <img src="https://we-shop.net/images/201601/thumb_img/94_thumb_G_1453157300111.jpg" alt="超商取貨二合一" />
                <div class="goods_name">
                    超商取貨二合一
                </div>
            </div>
        </a>
        <a href="/goods-91.html"  title="ECSHOP後台守門員">
            <div class="col-xs-4 cat-box">
                <img src="https://we-shop.net/images/201304/thumb_img/91_thumb_G_1366266446153.jpg" alt="ECSHOP後台守門員" />
                <div class="goods_name">
                    ECSHOP後台守門員
                </div>
            </div>
        </a>
        <a href="/goods-93.html" title="ECSHOP 商品相冊批量上傳插件">
            <div class="col-xs-4 cat-box">
                <img src="https://we-shop.net/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);
}


LINE ID:ecshop_weshop
Email:andy@we-shop.net
聯絡我:https://we-shop.net/contactus.php