目前位置: 首頁 > ECSHOP響應式模版設計 > 24、ECSHOP + Bootstrap3 製作響應式導航欄 + 源碼

許多人在修改響應式模板時，經常在不同尺寸間的布局無法適當地排版，特別是由資料庫取出的資料，因此建議如果你的網站已經穩定，可以將某部份資料改成靜態方式，例如底下的導航欄：
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);
}

相關文章