티스토리 뷰

반응형

웹사이트 개발하면서 필요한 구간별로 자리 정리할 겸 올려놓는 자료입니다.

간단한 쇼핑몰도 하나 제작중인데 상단에 위와 같이 나타나는 이미지...

부트스트랩을 이용하니 좋네요.

쇼핑몰 상단의 흔히 보는 버튼형태

소스코드도 기록해 둬서 다시 관련 프로그램 제작시 사용해야 겠어요

<form class="d-flex">
<button  class="btn btn-outline-dark" type="button" onclick="javascript:movetocart();">
<i class="bi-cart-fill me-1"></i>
장바구니
<span id="cartnum" class="badge bg-dark text-white ms-1 rounded-pill"><?=$cartnum?> </span>
</button> 
&nbsp;
<button  class="btn btn-outline-dark" type="button" onclick="javascript:movetodelivery();">

<i class="bi bi-credit-card-fill"></i>
결재상태                            
</button>
<? 
if($user_name=='홍길동')
{
print '&nbsp;&nbsp;   <button class="btn btn-outline-dark" type="button" onclick="javascript:movetolist();">
<i class="bi-tool-fill me-1"></i>
아이템등록
</button> ';?>

&nbsp;&nbsp;   <button class="btn btn-outline-dark" type="button" onclick="location.href='admin.php'">
<i class="bi-tool-fill me-1"></i>
자료
</button> 
<?
}						
?>

</form>

 

쇼핑몰의 우측상단에 위치하는 간단한 형태의 소스코드입니다.

오늘도 즐거운 코딩하세요~

반응형
댓글