부트 스트랩 진행 막대
이 장에서는 부트 스트랩 진행 막대를 설명합니다. 이 튜토리얼에서는, 진행 막대 로딩 부트 스트랩을 만들 리디렉션, 또는 작동 상태하는 방법을 볼 수 있습니다.
효과를 얻을 수 CSS3 전환 및 애니메이션을 사용하여 진행률 표시 줄을 부트 스트랩. 인터넷 익스플로러와 이전 파이어 폭스 9의 이전 버전에서이 기능을 지원하지 않습니다, 오페라 (12)는 애니메이션을 지원하지 않습니다.
기본 진행 표시 줄
다음 단계를 수행 기본 진행 표시 줄을 만듭니다
- 의 <DIV>와클래스 .progress를 추가합니다.
- 그런 다음, 위의 <div> 안에 <DIV> 빈과클래스 .progress 바을 추가합니다.
- 백분율로 표시 폭, 같은 스타일로 = "60 %"로 스타일 속성을 추가, 60 %가 진척 바의 위치를 나타냅니다.
이제 다음 예를 보자 :
예
<사업부 클래스 = "진행">
<사업부 클래스 = "진행 바" 역할 = "진행 막대" 아리아 - valuenow = "60"
아리아 - valuemin = "0" 아리아 - valuemax = "100" 스타일 = "너비 : 40 %; ">
<스팬 클래스 = "SR 전용"> 40 % 완료 </ SPAN>
</ DIV>
</ DIV>
»시도
결과는 다음과 같다 :
다른 진행률 표시 줄
다음과 같이 서로 다른 스타일의 진행 막대를 만들려면 :
- 의 <DIV>와클래스 .progress를 추가합니다.
- 그런 다음, 위의 <div> 내부하는 <DIV>와클래스 .progress 바 및 진행 - 바 - *빈 클래스를 추가합니다. *성공, 정보, 경고, 위험가 될 수 있습니다.
- 백분율로 표시 폭, 같은 스타일로 = "60 %"로 스타일 속성을 추가, 60 %가 진척 바의 위치를 나타냅니다.
이제 다음 예를 보자 :
예
<사업부 클래스 = "진행">
<사업부 클래스 = "진행 바 progress- 바 - 성공" 역할 = "진행 막대"
아리아 - valuenow = "60" 아리아 - valuemin = "0" 아리아 - valuemax = "100"
스타일 = "너비 : 90 %; ">
<스팬 클래스 = "SR 전용"> 90 % 완료 (성공) </ SPAN>
</ DIV>
</ DIV>
<사업부 클래스 = "진행">
<사업부 클래스 = "진행 바 progress- 바 - 정보" 역할 = "진행 막대"
아리아 - valuenow = "60" 아리아 - valuemin = "0" 아리아 - valuemax = "100"
스타일 = "너비 : 30 %; ">
<스팬 클래스 = "SR 전용"> 30 % 완료 (정보) </ SPAN>
</ DIV>
</ DIV>
<사업부 클래스 = "진행">
<사업부 클래스 = "진행 바 progress- 바 경고" 역할 = "진행 막대"
아리아 - valuenow = "60" 아리아 - valuemin = "0" 아리아 - valuemax = "100"
스타일 = "너비 : 20 %; ">
<스팬 클래스 = "SR 전용"> 20 % 완료 (경고) </ SPAN>
</ DIV>
</ DIV>
<사업부 클래스 = "진행">
<사업부 클래스 = "진행 바 progress- 바 - 위험" 역할 = "진행 막대"
아리아 - valuenow = "60" 아리아 - valuemin = "0" 아리아 - valuemax = "100"
스타일 = "너비 : 10 %; ">
<스팬 클래스 = "SR 전용"> 10 % 완료 (위험) </ SPAN>
</ DIV>
</ DIV>
»시도
결과는 다음과 같다 :
진행 바 줄무늬
다음 단계를 진행 표시 줄 스트라이프를 만듭니다
- 클래스 .progress과 함께 추가의 <div> .progress 줄무늬.
- 그런 다음, 위의 <div> 내부하는 <DIV>와클래스 .progress 바 및 진행 - 바 - *빈 클래스를 추가합니다. *성공, 정보, 경고, 위험가 될 수 있습니다.
- 백분율로 표시 폭, 같은 스타일로 = "60 %"로 스타일 속성을 추가, 60 %가 진척 바의 위치를 나타냅니다.
이제 다음 예를 보자 :
예
<사업부 클래스 = "진행 진행 스트라이프" >
<사업부 클래스 = "진행 바 progress- 바 - 성공" 역할 = "진행 막대"
아리아 - valuenow = "60" 아리아 - valuemin = "0" 아리아 - valuemax = "100"
스타일 = "너비 : 90 %; ">
<스팬 클래스 = "SR 전용"> 90 % 완료 (성공) </ SPAN>
</ DIV>
</ DIV>
<사업부 클래스 = "진행 진행 스트라이프" >
<사업부 클래스 = "진행 바 progress- 바 - 정보" 역할 = "진행 막대"
아리아 - valuenow = "60" 아리아 - valuemin = "0" 아리아 - valuemax = "100"
스타일 = "너비 : 30 %; ">
<스팬 클래스 = "SR 전용"> 30 % 완료 (정보) </ SPAN>
</ DIV>
</ DIV>
<사업부 클래스 = "진행 진행 스트라이프" >
<사업부 클래스 = "진행 바 progress- 바 경고" 역할 = "진행 막대"
아리아 - valuenow = "60" 아리아 - valuemin = "0" 아리아 - valuemax = "100"
스타일 = "너비 : 20 %; ">
<스팬 클래스 = "SR 전용"> 20 % 완료 (경고) </ SPAN>
</ DIV>
</ DIV>
<사업부 클래스 = "진행 진행 스트라이프" >
<사업부 클래스 = "진행 바 progress- 바 - 위험" 역할 = "진행 막대"
아리아 - valuenow = "60" 아리아 - valuemin = "0" 아리아 - valuemax = "100"
스타일 = "너비 : 10 %; ">
<스팬 클래스 = "SR 전용"> 10 % 완료 (위험) </ SPAN>
</ DIV>
</ DIV>
»시도
결과는 다음과 같다 :
애니메이션 진행 표시 줄
다음 단계를 수행, 애니메이션 진행률 표시 줄을 만듭니다
- 클래스 .progress과 함께 추가의 <div> .progress 줄무늬.클래스 .active는을 추가하는 동안.
- 그런 다음, 위의 <div> 안에 <DIV> 빈과클래스 .progress 바을 추가합니다.
- 백분율로 표시 폭, 같은 스타일로 = "60 %"로 스타일 속성을 추가, 60 %가 진척 바의 위치를 나타냅니다.
이 줄무늬는 오른쪽에서 왼쪽으로 운동의 감각을 만들 것입니다.
이제 다음 예를 보자 :
예
<사업부 클래스 = "진행 진행 스트라이프 활성화 ">
<사업부 클래스 = "진행 바 progress- 바 - 성공" 역할 = "진행 막대"
아리아 - valuenow = "60" 아리아 - valuemin = "0" 아리아 - valuemax = "100"
스타일 = "너비 : 40 %; ">
<스팬 클래스 = "SR 전용"> 40 % 완료 </ SPAN>
</ DIV>
</ DIV>
»시도
결과는 다음과 같다 :
누적 진행률 표시 줄
당신은 여러 진행률 표시 줄을 스택 할 수 있습니다. 이하의 실시 예에 도시 된 바와 같이 동일한 스택의 여러.progress 진행 막대가 실현 될 수있다 :
예
<사업부 클래스 = "진행">
<사업부 클래스 = "진행 바 progress- 바 - 성공" 역할 = "진행 막대"
아리아 - valuenow = "60" 아리아 - valuemin = "0" 아리아 - valuemax = "100"
스타일 = "너비 : 40 %; ">
<스팬 클래스 = "SR 전용"> 40 % 완료 </ SPAN>
</ DIV>
<사업부 클래스 = "진행 바 progress- 바 - 정보" 역할 = "진행 막대"
아리아 - valuenow = "60" 아리아 - valuemin = "0" 아리아 - valuemax = "100"
스타일 = "너비 : 30 %; ">
<스팬 클래스 = "SR 전용"> 30 % 완료 (정보) </ SPAN>
</ DIV>
<사업부 클래스 = "진행 바 progress- 바 경고" 역할 = "진행 막대"
아리아 - valuenow = "60" 아리아 - valuemin = "0" 아리아 - valuemax = "100"
스타일 = "너비 : 20 %; ">
<스팬 클래스 = "SR 전용"> 20 % 완료 (경고) </ SPAN>
</ DIV>
</ DIV>
»시도
결과는 다음과 같다 :
