부트스트랩 진행 표시줄


이 장에서는 부트스트랩 진행 표시줄에 대해 설명합니다. 이 튜토리얼에서는 부트스트랩을 사용하여 로드, 리디렉션 또는 작업 상태에 대한 진행률 표시줄을 만드는 방법을 보여줍니다.

Bootstrap 진행률 표시줄은 CSS3 전환 및 애니메이션을 사용하여 이 효과를 얻습니다. Internet Explorer 9 및 이전 버전의 Firefox는 이 기능을 지원하지 않으며 Opera 12는 애니메이션을 지원하지 않습니다.

기본 진행률 표시줄

기본 진행률 표시줄을 만드는 단계는 다음과 같습니다.

  • 클래스 .progress에 <div>를 추가합니다.

  • 다음으로 위의 <div> 안에 .progress-bar 클래스가 있는 빈 <div>를 추가합니다.

  • 너비가 백분율로 표시되는 스타일 속성을 추가합니다. 예를 들어 style="60%"는 진행률 표시줄이 60% 위치에 있음을 의미합니다.

아래 예를 살펴보겠습니다.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 进度条</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="progress">
   <div class="progress-bar" role="progressbar" aria-valuenow="60" 
      aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
      <span class="sr-only">40% 完成</span>
   </div>
</div>

</body>
</html>

인스턴스 실행»

온라인 예를 보려면 "인스턴스 실행" 버튼을 클릭하세요

교대 진행률 표시줄

다른 항목 만들기 진행 스타일 단계는 다음과 같습니다.

  • 클래스 .progress에 <div>를 추가합니다.

  • 다음으로 위의 <div> 안에 클래스 .progress-bar 및 클래스 progress-bar-*가 포함된 빈 <div>를 추가합니다. 그중 *는 성공, 정보, 경고, 위험이 될 수 있습니다.

  • 너비가 백분율로 표시되는 스타일 속성을 추가합니다. 예를 들어 style="60%"는 진행률 표시줄이 60% 위치에 있음을 의미합니다.

다음 인스턴스를 살펴보겠습니다.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 交替的进度条</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="progress">
   <div class="progress-bar progress-bar-success" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 	
      style="width: 90%;">
      <span class="sr-only">90% 完成（成功）</span>
   </div>
</div>
<div class="progress">
   <div class="progress-bar progress-bar-info" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 	
      style="width: 30%;">
      <span class="sr-only">30% 完成（信息）</span>
   </div>
</div>
<div class="progress">
   <div class="progress-bar progress-bar-warning" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
      style="width: 20%;">
      <span class="sr-only">20% 完成（警告）</span>
   </div>
</div>
<div class="progress">
   <div class="progress-bar progress-bar-danger" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 	
      style="width: 10%;">
      <span class="sr-only">10% 完成（危险）</span>
   </div>
</div>

</body>
</html>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

결과는 다음과 같습니다.

交替的进度条

줄무늬 진행률 표시줄

줄무늬 진행률 표시줄을 만드는 단계는 다음과 같습니다.

  • 클래스 .progress 및 .progress-striped에 <div>를 추가합니다.

  • 다음으로 위의 <div> 안에 클래스 .progress-bar 및 클래스 progress-bar-*가 포함된 빈 <div>를 추가합니다. 그중 *는 성공, 정보, 경고, 위험이 될 수 있습니다.

  • 너비가 백분율로 표시되는 스타일 속성을 추가합니다. 예를 들어 style="60%"는 진행률 표시줄이 60% 위치에 있음을 의미합니다.

다음 인스턴스를 살펴보겠습니다.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 条纹的进度条</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="progress progress-striped">
   <div class="progress-bar progress-bar-success" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 	
      style="width: 90%;">
      <span class="sr-only">90% 完成（成功）</span>
   </div>
</div>
<div class="progress progress-striped">
   <div class="progress-bar progress-bar-info" role="progressbar"
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 	
      style="width: 30%;">
      <span class="sr-only">30% 完成（信息）</span>
   </div>
</div>
<div class="progress progress-striped">
   <div class="progress-bar progress-bar-warning" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 	
      style="width: 20%;">
      <span class="sr-only">20% 完成（警告）</span>
   </div>
</div>
<div class="progress progress-striped">
   <div class="progress-bar progress-bar-danger" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 	
      style="width: 10%;">
      <span class="sr-only">10% 完成（危险）</span>
   </div>
</div>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

결과는 다음과 같습니다.

条纹的进度条

애니메이션 진행률 표시줄

애니메이션 진행률 표시줄을 만드는 단계는 다음과 같습니다.

  • 클래스 .progress 및 .progress-striped를 사용하여 <div>를 추가합니다. .active 클래스도 추가하세요.

  • 다음으로 위의 <div> 안에 .progress-bar 클래스가 있는 빈 <div>를 추가합니다.

  • 너비가 백분율로 표시되는 스타일 속성을 추가합니다. 예를 들어 style="60%"는 진행률 표시줄이 60% 위치에 있음을 의미합니다.

이렇게 하면 줄무늬가 오른쪽에서 왼쪽으로 움직이는 느낌을 줄 수 있습니다.

아래 예를 살펴보겠습니다.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 动画的进度条</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="progress progress-striped active">
   <div class="progress-bar progress-bar-success" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
      style="width: 40%;">
      <span class="sr-only">40% 完成</span>
   </div>
</div>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.


动画的进度条

누적 진행률 표시줄

여러 개의 진행률 표시줄을 쌓을 수도 있습니다. 다음 예와 같이 동일한 .progress에 여러 진행률 표시줄을 넣어 스택을 달성합니다.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 堆叠的进度条</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="progress">
   <div class="progress-bar progress-bar-success" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
      style="width: 40%;">
      <span class="sr-only">40% 完成</span>
   </div>
   <div class="progress-bar progress-bar-info" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 	
      style="width: 30%;">
      <span class="sr-only">30% 完成（信息）</span>
   </div>
   <div class="progress-bar progress-bar-warning" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 	
      style="width: 20%;">
      <span class="sr-only">20% 完成（警告）</span>
   </div>
</div>

</body>
</html>

Run Instance»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

결과는 다음과 같습니다:

堆叠的进度条