Bootstrap 3.3.7 | Bootstrap의 입력 구성 요소 | 프로그래스바(progress-bar)
전체 진행 상황 등을 표시하는데 사용되는 것이, 진행률 표시 줄이다. 가로 줄에 진행 정도에 따라 막대가 뻗어나가는 것이다. 파일 복사 등, 모든 장면에서 사용되고 있다.
이 진행률 표시 줄도 Bootstrap에는 원래의 인터페이스로 사용할 수 있다. 이것은 아래와 같은 형태로 작성한다.
<div class="progress">
<div class="progressbar" role="progressbar" style="width : 가로 설정">
줄에 표시할 텍스트
</ div>
</ div>
프로그래스바는 2개의 <div>
에 의해 구축된다. 외부 <div>
에 진행률이 전체의 배경이 되는 것으로 class="progress"
를 지정해야 한다.
그리고 내부 <div>
이 줄 부분이 되는 것으로, 이것은 class="progressbar"
, role="progressbar"
를 지정해야 한다. 내부 바의 길이는 width 스타일로 지정한다. 예를 들어, style="width:50%;"
와 같이 지정하면, 전체의 절반 길이의 막대가 표시된다.
진행률 표시줄은 바의 표시에 관한 클래스가 몇개 준비되어 있다. 먼저 바의 표시 색에 관한 것이다.
바 색상 설정
- progress-bar-default
- progress-bar-success
- progress-bar-info
- progress-bar-warning
- progress-bar-danger
“progress-bar-” 뒤에 붙어있는 단어는 어디선가 본 적이 있을 것이다. 버튼의 스타일 등으로 지금까지 사용한 적이 있었다. progress-bar-xxxx
와 같이 표시하는 용도에 따라 단어를 붙이면, 바의 색이 그에 맞게 변경된다.
줄무늬 표시
- progress-bar-striped
또 하나, 바 스트라이프(줄무늬) 표시(대각선이 들어간 것)를 하기 위한 클래스도 준비되어 있다. class 속성에 progress-bar-striped
를 추가하여 바에 줄무늬 표시할 수 있다.
추가적으로 class 속성에 “active"를 추가하여, 애니메이션으로 줄무늬 표시할 수 있다.
그럼 이것도 사용 예제를 아래에 올려 두었다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap</title>
<script src="./js/jquery-3.1.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/bootstrap-theme.min.css">
</head>
<body >
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h1>컨텐츠 표시</h1>
<h2>Progress Bar</h2>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar"
style="width: 35%;">
35%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" style="width: 65%;">
65%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped active"
role="progressbar" style="width: 95%;">
95%
</div>
</div>
</div>
</div>
</div>
</body>
</html>
여기에서는 3개의 진행률 표시 줄을 표시하고 있다. 중간의 것은 그린에 아래의 것은 빨간색으로 표시되고, 아래 하단 바는 애니메이션으로 줄무늬 표시한다.