Latest web development tutorials

재단 진행률 표시 줄

재단도 프로그램의 처리를 표시하는 진행 막대로 사용될 수있다 :

우리는 할 수 있습니다 <div> 요소를 사용 .progress 진행 표시 줄, 작성하는 클래스를 .meter (<스팬>) 자식 요소에 대한 클래스를. 다음과 같이 우리는 <SPAN> 요소에 진보의 비율을 설정할 수 있습니다 :

예

<사업부 클래스 = "진행">
<스팬 클래스 = "m"스타일 = "너비 : 70 %"> </ SPAN>
</ DIV>

»시도

진행률 표시 줄 색상

기본적으로 진행률 표시 줄의 색상은 파란색입니다. : 클래스의 다른 색상 .secondary , .success , 또는 .alert :

예

<사업부 클래스 = "진행">
<스팬 클래스 = "m"스타일 = "너비 : 50 %"> </ SPAN>
</ DIV>

<사업부 클래스 = "보조 진행" >
<스팬 클래스 = "m"스타일 = "너비 : 50 %"> </ SPAN>
</ DIV>

<사업부 클래스 = "진행 성공" >
<스팬 클래스 = "m"스타일 = "너비 : 50 %"> </ SPAN>
</ DIV>

<사업부 클래스 = "진행 경고" >
<스팬 클래스 = "m"스타일 = "너비 : 50 %"> </ SPAN>
</ DIV>

»시도

필렛 진행 막대

.radius 및 .round 클래스 진행 표시 줄에 대한 둥근 모서리를 추가하는 데 사용 :

예

<사업부 클래스 = "진행">
<스팬 클래스 = "m"스타일 = "너비 : 50 %"> </ SPAN>
</ DIV>

<사업부 클래스 = "진행 반경" >
<스팬 클래스 = "m"스타일 = "너비 : 50 %"> </ SPAN>
</ DIV>

<사업부 클래스 = "진전이 둥근" >
<스팬 클래스 = "m"스타일 = "너비 : 50 %"> </ SPAN>
</ DIV>

»시도

진행 표시 줄의 크기

당신이 사용할 수있는 .small- num 또는 .large- num 진척 바의 폭을 수정, 납입 1 (8.33 %)과 12 (기본값 (100 %)) 사이의 숫자입니다 :

예

<사업부 클래스 = "진보는 대형 - 1">
<스팬 클래스 = "m"스타일 = "너비 : 50 %"> </ SPAN>
</ DIV>

<사업부 클래스 = "진보는 대형 - 6">
<스팬 클래스 = "m"스타일 = "너비 : 50 %"> </ SPAN>
</ DIV>

<사업부 클래스 = "진보는 대형 - 9">
<스팬 클래스 = "m"스타일 = "너비 : 50 %"> </ SPAN>
</ DIV>

<사업부 클래스 = "진보는 대형 - 11">
<스팬 클래스 = "m"스타일 = "너비 : 50 %"> </ SPAN>
</ DIV>

<! - 기본 폭 ->
<사업부 클래스 = "진보는 대형 - 12">
<스팬 클래스 = "m"스타일 = "너비 : 50 %"> </ SPAN>
</ DIV>

»시도

진행 바 라벨

CSS는 진행 표시 줄에 태그를 사용할 수 있습니다. 다음의 예는 우리가 비율을 표시하는 <SPAN> 요소를 추가 :

예

<스타일>
.percentage {
위치 : 절대;
최고 : 50 %;
좌측 : 50 %;
색상 : 흰색;
변환 (-50 %, -50 %) 번역;
글꼴 크기 : 12 픽셀;
}
</ 스타일>

<사업부 클래스 = "진행">
<스팬 클래스 = "m"스타일 = "위치 : 상대; 폭 : 75 %">
<스팬 클래스 = "비율"> 75 % </ SPAN>
</ SPAN>
</ DIV>

<사업부 클래스 = "진행 성공" >
<스팬 클래스 = "m"스타일 = "위치 : 상대; 폭 : 50 %">
<스팬 클래스 = "비율"> 50 % </ SPAN>
</ SPAN>
</ DIV>

<사업부 클래스 = "진행 경고" >
<스팬 클래스 = "m"스타일 = "위치 : 상대; 폭 : 25 %">
<스팬 클래스 = "비율"> 25 % </ SPAN>
</ SPAN>
</ DIV>

»시도