정보실

웹학교

정보실

bootstrap 쇼핑몰에서 단계별 상황을 표시할 때

본문

이 모든 기능은 부트스트랩에서 기본적으로 제공하는 것을 기반으로 합니다..

 

 

1

장바구니

2

주문

3

결제


 

 

 

html : 

<div class="stepwizard">

    <div class="stepwizard-row">

        <div class="stepwizard-step">

            <button type="button" class="btn btn-default btn-circle">1</button>

            <p>장바구니</p>

        </div>

        <div class="stepwizard-step">

            <button type="button" class="btn btn-primary btn-circle">2</button>

            <p>주문</p>

        </div>

        <div class="stepwizard-step">

            <button type="button" class="btn btn-default btn-circle" disabled="disabled">3</button>

            <p>결제</p>

        </div> 

    </div>

</div>

 

css:

.stepwizard-step p {

    margin-top: 10px;    

}

 

.stepwizard-row {

    display: table-row;

}

 

.stepwizard {

    display: table;     

    width: 100%;

    position: relative;

}

 

.stepwizard-step button[disabled] {

    opacity: 1 !important;

    filter: alpha(opacity=100) !important;

}

 

.stepwizard-row:before {

    top: 14px;

    bottom: 0;

    position: absolute;

    content: " ";

    width: 100%;

    height: 1px;

    background-color: #ccc;

    z-order: 0;

    

}

 

.stepwizard-step {    

    display: table-cell;

    text-align: center;

    position: relative;

}

 

.btn-circle {

  width: 30px;

  height: 30px;

  text-align: center;

  padding: 6px 0;

  font-size: 12px;

  line-height: 1.428571429;

  border-radius: 15px;

  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 1,663회 ]  작성일14-10-23 09:56

웹학교