首頁 > ECSHOP 相關舊文章 > Ecshop 綜合文章 > 響應式模板DIY-頁籤 TAB 導覽

響應式模板的製作方式，其實是大同小異，差別只在於現在需要考慮不同的設備寬度問題，但僅僅是一個寬度問題就已經讓很多設計師頭痛，因此，css 框架成為多數人製作網頁的好幫手，除了統一各瀏覽的css差異之外，更讓大小寬度不同的螢幕，得以隨心所欲的排列， Bootstrap 5 是我目前使用的框架，底下就以 Bootstrap 的 TAB 元件結合 ecshop 的推薦、精品、新品、熱賣等區塊，以頁籤 TAB 導覽區塊...

原來的推薦、精品、新品、熱賣代碼如下：

  <div class="index_0">
    <div class="fl">
      <div class="hide_show">
        <div class="show_title"><span cid="4" class="v">特價搶購<i></i></span> <span cid="2">精品推薦<i></i></span> <span cid="3">新品上市<i></i></span> <span cid="1">本週熱銷<i></i></span>
          <div class="clear0"></div>
        </div>
        <div class="show_info">
          <div class="shows show4"> <!-- #BeginLibraryItem "/library/recommend_promotion.lbi" --> <!-- #EndLibraryItem --></div>
          <div class="shows show2" style="display:none"><!-- TemplateBeginEditable name="精品推薦" -->
<!-- #BeginLibraryItem "/library/recommend_best.lbi" --><!-- #EndLibraryItem -->
<!-- TemplateEndEditable --></div>
          <div class="shows show3" style="display:none"> <!-- TemplateBeginEditable name="新品上市" -->
<!-- #BeginLibraryItem "/library/recommend_new.lbi" --><!-- #EndLibraryItem -->
<!-- TemplateEndEditable --></div>
          <div class="shows show1" style="display:none"> <!-- TemplateBeginEditable name="本週熱銷" -->
<!-- #BeginLibraryItem "/library/recommend_hot.lbi" --><!-- #EndLibraryItem -->
<!-- TemplateEndEditable --> </div>
        </div>
        <div class="clear0"></div>
      </div>
    </div>

套用 Bootstrap 的 TAB 元件，並且段區塊有資料才顯示

<!-- tabs start -->
<ul class="nav nav-tabs" id="indexTab" role="tablist">
	<!-- {if $new_goods} -->
	<li class="nav-item" role="presentation">
		<button class="nav-link active" id="new-tab" data-bs-toggle="tab" data-bs-target="#new" type="button" role="tab" aria-controls="new" aria-selected="true">
			<i class="bi bi-shop"></i>{$lang.new}
		</button>
	</li>
	<!-- {/if} -->
	<!-- {if $hot_goods} -->
	<li class="nav-item" role="presentation">
		<button class="nav-link" id="hot-tab" data-bs-toggle="tab" data-bs-target="#hot" type="button" role="tab" aria-controls="hot" aria-selected="false">
			<i class="bi bi-hand-thumbs-up-fill"></i>{$lang.hot}
		</button>
	</li>
	<!-- {/if} -->
	<!-- {if $best_goods} -->
	<li class="nav-item" role="presentation">
		<button class="nav-link" id="best-tab" data-bs-toggle="tab" data-bs-target="#best" type="button" role="tab" aria-controls="best" aria-selected="false">
			<i class="bi bi-incognito"></i>{$lang.best}
		</button>
	</li>
	<!-- {/if} -->
	<!-- {if $promotion_goods} -->
	<li class="nav-item" role="presentation">
		<button class="nav-link" id="promotion-tab" data-bs-toggle="tab" data-bs-target="#promotion" type="button" role="tab" aria-controls="promotion" aria-selected="false">
			<i class="bi bi-tags-fill"></i>{$lang.promotion}
		</button>
	</li>
	<!-- {/if} -->
</ul>
<div class="tab-content" id="indexTabContent">
	<div class="tab-pane fade show active" id="new" role="tabpanel" aria-labelledby="new-tab">
		{include file='/library/recommend_new.lbi'}
	</div>
	<div class="tab-pane fade" id="hot" role="tabpanel" aria-labelledby="hot-tab">
		{include file='/library/recommend_hot.lbi'}
	</div>
	<div class="tab-pane fade" id="best" role="tabpanel" aria-labelledby="best-tab">
		{include file='/library/recommend_best.lbi'}
	</div>
	<div class="tab-pane fade" id="promotion" role="tabpanel" aria-labelledby="promotion-tab">
		{include file='/library/recommend_promotion.lbi'}
	</div>
</div>
<!-- tabs end -->

recommend_new.lbi 的內容如下，和 recommend_best.lbi、recommend_hot.lbi、recommend_promotion.lbi 的差異只在紅字部分，其他都一樣...

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- {if $new_goods} -->
<div id="new_area" class="goods_group">
	<!--{foreach from=$new_goods item=goods name=new_goods}-->
	<div class="item transition wow slideInUp">
		<a href="{$goods.original}" data-fancybox="new" data-caption="{$goods.name|escape:html}">
			<img src="{$goods.thumb}" alt="{$goods.name|escape:html}" class="img" />
		</a>
		<div class="info text-start">
			<div class="name text-overflows text-overflow2">
				<a href="{$goods.url}" title="{$goods.name|escape:html}">
					{$goods.short_name|escape:html}
				</a>
			</div>
			<div class="price text-end">
				<del class="float-start">{$goods.market_price}</del>
				<!-- {if $goods.promote_price neq ""} -->
				{$lang.promote_price}<em>{$goods.promote_price}</em>
				<!-- {else}-->
				{$lang.shop_price}：<em>{$goods.shop_price}</em>
				<!--{/if}-->
			</div>
			<div class="sales">
				{$lang.sales}：<span class="text-danger">{$goods.cum_sales}</span>
				<a href="{$goods.url}" class="btn btn-outline-danger btn-sm float-end">
					<i class="bi bi-eye-fill"></i>{$lang.detail}
				</a>
			</div>
			<a href="javascript:addToCart({$goods.id})" class="btn btn-outline-success mt-2 w-100"><i class="bi bi-cart-plus-fill"></i>{$lang.add_to_cart}</a>
		</div>
	</div>
	<!--{/foreach}-->
</div>
<a href="../search.php?intro=new" class="index_more btn btn-danger">
	{$lang.more}{$lang.new}<i class="bi bi-chevron-double-right bi-left"></i>
</a>
<!-- {/if} -->

CSS 是多個檔案共用，應該放在 style.css 裡

/* 單個商品 */
@media screen and (min-width:540px) {
	.goods_group {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(230px, 1fr) );
		gap: 1.25rem;
	}
	.goods_group .item {
		position: relative;
		border: 5px solid #efefef;
		text-align: center;
		margin-bottom: 10px;
		max-width: 230px;
	}
	.goods_group .item:hover {
		border: 5px solid #620653;
		background-color: transparent;
	}
	.goods_group .item .img {
		width: 200px;
		height: 200px;
		overflow: hidden;
		margin: 0 auto;
		float: none;
		border: none;
	}
	.goods_group .item .info {
		margin-left: 0px;
		float: none;
	}
	#search {
		top: 50px;
	}
}
@media screen and (max-width:540px) {
	.goods_group .item {
		position: static;
		border: none;
		width: 100%;
		display: block;  
		clear: both;
	}
	.goods_group .item:hover {
		border: none;
		background-color: #dfdfdf;
	}
	.goods_group .item .img {
		width: 30%;
		height: auto;
		overflow: hidden;
		margin: 0;
		float: left;
		border: 3px solid #efefef;
	}
	.goods_group .item .img:hover {
		border: 3px solid #620653;
	}
	.goods_group .item .info {
		width: 66%;
		float: right;
	}
	#search {
		bottom: 50px;
	}
}
.goods_group {
	margin-top: 10px;
}
.goods_group .item {
	padding: 10px;
	margin: 0 0 10px 0;
	border-radius: 0.5rem;
	height: auto;
	overflow: hidden;
}
.goods_group .item .img {
	border-radius: 4px;
}
.goods_group .item .info .sales {
	color: #363636;
}
.goods_group .item .name {}
.goods_group .item .name a {color: #660253;text-decoration: none;display: block;}
.goods_group .item .name a:hover {color: #34022c;}
.goods_group .item .price {color: orangered;}
.goods_group .item .price em {color: #620053;}
.goods_group .item .price del {color: #ccc;}
.goods_group .item .price > .mktprice {color: #8A0375;}

完成後應該類似這樣，TAB 頁籤在寬度不足的移動設備上特別有用... 點擊圖片可以放大檢視

DEMO

如果你對響應式模板DIY-頁籤 TAB 導覽有任何問題請到討論區發帖。