부트스트랩 4 진행률 표시줄
기본 진행률 표시줄
진행률 표시줄을 사용하여 사용자에게 진행 중인 프로세스의 정도를 표시할 수 있습니다.
기본 진행률 표시줄을 만들려면 .progress컨테이너 요소에 .progress-bar클래스를 추가하고 자식 요소에 클래스를 추가합니다. CSS width속성을 사용하여 진행률 표시줄의 너비를 설정합니다.
예시
<div class="progress">
<div class="progress-bar" style="width:70%"></div>
</div>
진행률 표시줄 높이
진행률 표시줄의 높이는 기본적으로 16px입니다. CSS height속성을 사용하여 변경합니다. 진행률 컨테이너와 진행률 표시줄에 대해 동일한 높이를 설정해야 합니다.
예시
<div class="progress" style="height:20px">
<div class="progress-bar" style="width:40%;height:20px"></div>
</div>
진행률 표시줄 레이블
진행률 표시줄 안에 텍스트를 추가하여 표시되는 백분율을 표시합니다.
예시
<div class="progress">
<div class="progress-bar" style="width:70%">70%</div>
</div>
컬러 진행률 표시줄
기본적으로 진행률 표시줄은 파란색(기본)입니다. Bootstrap 4 컨텍스트 배경 클래스를 사용하여 색상을 변경합니다.
예시
<!-- Blue -->
<div class="progress">
<div class="progress-bar"
style="width:10%"></div>
</div>
<!-- Green -->
<div
class="progress">
<div
class="progress-bar bg-success" style="width:20%"></div>
</div>
<!--
Turquoise -->
<div class="progress">
<div class="progress-bar bg-info" style="width:30%"></div>
</div>
<!-- Orange -->
<div class="progress">
<div class="progress-bar bg-warning"
style="width:40%"></div>
</div>
<!-- Red -->
<div
class="progress">
<div class="progress-bar bg-danger"
style="width:50%"></div>
</div>
<!-- White -->
<div
class="progress border">
<div
class="progress-bar bg-white" style="width:60%"></div>
</div>
<!--
Grey -->
<div class="progress">
<div class="progress-bar bg-secondary"
style="width:70%"></div>
</div>
<!-- Light Grey -->
<div
class="progress border">
<div class="progress-bar bg-light"
style="width:80%"></div>
</div>
<!--
Dark Grey -->
<div class="progress">
<div class="progress-bar bg-dark" style="width:90%"></div>
</div>
줄무늬 진행률 표시줄
클래스를 사용 .progress-bar-striped하여 진행률 표시줄에 줄무늬를 추가합니다.
예시
<div class="progress">
<div class="progress-bar
progress-bar-striped" style="width:40%"></div>
</div>
애니메이션 진행률 표시줄
.progress-bar-animated진행률 표시줄에 애니메이션 효과를 주는 클래스를 추가합니다 .
예시
<div class="progress-bar progress-bar-striped progress-bar-animated"
style="width:40%"></div>
여러 진행률 표시줄
진행률 표시줄을 쌓을 수도 있습니다.
예시
<div class="progress">
<div class="progress-bar bg-success"
style="width:40%">
Free Space
</div>
<div class="progress-bar bg-warning" style="width:10%">
Warning
</div>
<div class="progress-bar bg-danger"
style="width:20%">
Danger
</div>
</div>