19'C 흐림
서울 강남구
이 코드 조각은 Bootstrap 5용 수평 스테퍼를 만드는 데 유용합니다. Bootstrap 5 아코디언 구성 요소를 사용하여 다음/이전 단계를 탐색합니다. 특정 단계의 콘텐츠를 표시하기 위해 아코디언 요소 안에 무엇이든 배치할 수 있습니다.
다단계 가입 양식 작성과 같은 다양한 용도로 이 스테퍼를 사용하거나 단계별 사용자 지침에 사용할 수 있습니다. 또한 필요에 따라 여러 단계를 추가할 수 있습니다. 마찬가지로 몇 가지 CSS 값을 변경하거나 추가 스타일을 정의하여 쉽게 사용자 지정할 수 있습니다.
부트스트랩 5용 수평 스테퍼를 만드는 방법
1. 스테퍼를 생성하려면 head 태그에 다음 CDN 링크를 추가하여 부트스트랩 5 CSS를 프로젝트에 로드합니다.
<!-- Bootstrap 5.1 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
2. 그런 다음 다음과 같이 프로세스 단계에 대한 HTML 구조를 생성합니다.
<div class="container">
<div class="accordion" id="accordionExample">
<div class="steps">
<progress id="progress" value=0 max=100 ></progress>
<div class="step-item">
<button class="step-button text-center" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
1
</button>
<div class="step-title">
First Step
</div>
</div>
<div class="step-item">
<button class="step-button text-center collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
2
</button>
<div class="step-title">
Second Step
</div>
</div>
<div class="step-item">
<button class="step-button text-center collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
3
</button>
<div class="step-title">
Third Step
</div>
</div>
</div>
<div class="card">
<div id="headingOne">
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
data-bs-parent="#accordionExample">
<div class="card-body">
your content goes here...
</div>
</div>
</div>
<div class="card">
<div id="headingTwo">
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="card-body">
your content goes here...
</div>
</div>
</div>
<div class="card">
<div id="headingThree">
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree"
data-bs-parent="#accordionExample">
<div class="card-body">
your content goes here...
</div>
</div>
</div>
</div>
</div>
3. 이제 다음 CSS를 사용하여 프로세스 단계 표시줄의 스타일을 지정합니다. 필요에 따라 단계의 색상과 크기를 사용자 정의할 수 있습니다.
.steps {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
position: relative;
}
.step-button {
width: 50px;
height: 50px;
border-radius: 50%;
border: none;
background-color: var(--prm-gray);
transition: .4s;
}
.step-button[aria-expanded="true"] {
width: 60px;
height: 60px;
background-color: var(--prm-color);
color: #fff;
}
.done {
background-color: var(--prm-color);
color: #fff;
}
.step-item {
z-index: 10;
text-align: center;
}
#progress {
-webkit-appearance:none;
position: absolute;
width: 95%;
z-index: 5;
height: 10px;
margin-left: 18px;
margin-bottom: 18px;
}
/* to customize progress bar */
#progress::-webkit-progress-value {
background-color: var(--prm-color);
transition: .5s ease;
}
#progress::-webkit-progress-bar {
background-color: var(--prm-gray);
}
4. 마지막으로 body 태그를 닫기 전에 Bootstrap 5 JS 및 다음 스테퍼 JavaScript 함수를 로드하고 완료합니다.
<!-- Bootstrap 5 JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<!-- Stepper JavaScript -->
<script>
const stepButtons = document.querySelectorAll('.step-button');
const progress = document.querySelector('#progress');
Array.from(stepButtons).forEach((button,index) => {
button.addEventListener('click', () => {
progress.setAttribute('value', index * 100 /(stepButtons.length - 1) );//there are 3 buttons. 2 spaces.
stepButtons.forEach((item, secindex)=>{
if(index > secindex){
item.classList.add('done');
}
if(index < secindex){
item.classList.remove('done');
}
})
})
})
</script>
HTML, JAVASCRIPT, Horizontal Stepper for Bootstrap 5 Examples & Tutorial