%%'' 요소에 ''%%.progress%%'' 클래스를 추가합니다.\\ Bootstrap의 기본 프로그레스 바는 다음과 같습니다.\\ {{:wiki:bootstrap:bootstrap_note:basic-progress-bar.png?400|}}\\ \\ ====예제====

Basic Progress Bar

\\ **참고:**\\ Internet Explorer 9 및 이전 버전에서는 프로그레스 바가 지원되지 않습니다 (CSS3 트랜지션 및 애니메이션을 사용하여 일부 효과를 얻기 때문에).\\ **참고:**\\ 스크린 리더를 사용하는 사람들의 접근성을 높이려면 aria- * 속성을 포함해야 합니다.\\ \\ =====Progress Bar With Label===== 프로그레스 바에서 ''%%.sr-only%%'' 클래스를 제거하여 백분율을 표시합니다:\\ \\ {{:wiki:bootstrap:bootstrap_note:progressbarwithlabel.png?400|}}\\ ====예제====

Progress Bar With Label

70%

\\ =====Colored Progress Bar===== 컨텍스추얼 클래스는 "색상을 통한 의미"를 제공하는 데 사용됩니다.\\ \\ 프로그레스 바와 함께 사용할 수 있는 컨텍스트추얼 클래스는 다음과 같습니다.\\ * ''%%.progress-bar-success%%'' * ''%%.progress-bar-info%%'' * ''%%.progress-bar-warning%%'' * ''%%.progress-bar-danger%%'' \\ {{:wiki:bootstrap:bootstrap_note:colored-progress-bar.png?400|}}\\ 다음 예제는 다양한 컨텍스추얼 클래스를 사용하여 프로그레스 바를 만드는 방법을 보여줍니다.\\ \\ ====예제====

Colored Progress Bars

The contextual classes colors the progress bars:

40% Complete (success)

50% Complete (info)

60% Complete (warning)

70% Complete (danger)

\\ =====Striped Progress Bar===== 프로그레스 바에 스트라이프(줄무늬)를 추가하기 위해 ''%%.progress-bar-striped%%'' 클래스를 추가합니다.\\ {{:wiki:bootstrap:bootstrap_note:strioped-colored-progress-bar.png?400|}} ====예제====

Striped Colored Progress Bars

The .progress-bar-striped class adds stripes to the progress bars:

40% Complete (success)

50% Complete (info)

60% Complete (warning)

70% Complete (danger)

\\ =====Animated Progress Bar===== 프로그레스 바에 애니메이션을 적용하기 위해 ''%%.active%%'' 클래스를 추가합니다.\\ ====예제====

Animated Progress Bar

The .active class animates the progress bar:

40%

\\ =====Stacked Progress Bars===== 프로그레스 바는 또한 누적될 수 있습니다.\\ {{:wiki:bootstrap:bootstrap_note:stacked-progress-bar.png?400|}}\\ 여러 개의 프로그레스 바를 동일한 ''%%>

%%''에 배치하여 누적 프로그레스 바를 만듭니다.\\ ====예제====

Stacked Progress Bars

Create a stacked progress bar by placing multiple bars into the same div with class .progress:

Free Space

Warning

Danger