목차
Bootstrap Progress Bars
- description : Bootstrap Progress Bars
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-03-25
Basic Progress Bar
프로그레스 바(Progress Bar, 진행률 표시 막대)를 사용하여 사용자가 프로세스를 얼마나 진행하고 있는지 보여줄 수 있습니다.
Bootstrap은 여러 유형의 프로그레스 바를 제공합니다.
기본 프로그레스 바를 만들기 위해, <div> 요소에 .progress 클래스를 추가합니다.
Bootstrap의 기본 프로그레스 바는 다음과 같습니다.
예제
Basic Progress Bar
참고:
Internet Explorer 9 및 이전 버전에서는 프로그레스 바가 지원되지 않습니다 (CSS3 트랜지션 및 애니메이션을 사용하여 일부 효과를 얻기 때문에).
참고:
스크린 리더를 사용하는 사람들의 접근성을 높이려면 aria- * 속성을 포함해야 합니다.
Progress Bar With Label
프로그레스 바에서 .sr-only 클래스를 제거하여 백분율을 표시합니다:
예제
Progress Bar With Label
Colored Progress Bar
컨텍스추얼 클래스는 “색상을 통한 의미”를 제공하는 데 사용됩니다.
프로그레스 바와 함께 사용할 수 있는 컨텍스트추얼 클래스는 다음과 같습니다.
.progress-bar-success.progress-bar-info.progress-bar-warning.progress-bar-danger
다음 예제는 다양한 컨텍스추얼 클래스를 사용하여 프로그레스 바를 만드는 방법을 보여줍니다.
예제
Colored Progress Bars
The contextual classes colors the progress bars:
Striped Progress Bar
프로그레스 바에 스트라이프(줄무늬)를 추가하기 위해 .progress-bar-striped 클래스를 추가합니다.
예제
Striped Colored Progress Bars
The .progress-bar-striped class adds stripes to the progress bars:
Animated Progress Bar
프로그레스 바에 애니메이션을 적용하기 위해 .active 클래스를 추가합니다.
예제
Animated Progress Bar
The .active class animates the progress bar:
Stacked Progress Bars
프로그레스 바는 또한 누적될 수 있습니다.
여러 개의 프로그레스 바를 동일한 ><div class="progress">에 배치하여 누적 프로그레스 바를 만듭니다.
예제
Stacked Progress Bars
Create a stacked progress bar by placing multiple bars into the same div with class .progress:
