شريط تقدم مؤسسة
مؤسسة يمكن أن تستخدم شريط التقدم لإظهار تجهيز برنامج درجة:
يمكننا <div> استخدام عنصر .progress فئة لإنشاء شريط التقدم، .meter فئة عنصر تابع (<SPAN>). فإننا يمكن أن يحدد نسبة التقدم في <SPAN> العنصر، على النحو التالي:
أمثلة
<div الطبقة = "التقدم">
<سبان الطبقة = "متر" على غرار = "العرض: 70٪"> </ SPAN>
</ div>
<سبان الطبقة = "متر" على غرار = "العرض: 70٪"> </ SPAN>
</ div>
محاولة »
لون شريط التقدم
افتراضيا، لون شريط التقدم الأزرق. ألوان مختلفة من الطبقة: .secondary ، .success ، أو .alert :
أمثلة
<div الطبقة = "التقدم">
<سبان الطبقة = "متر" على غرار = "العرض: 50٪"> </ SPAN>
</ div>
<فئة الدرجة = "التقدم الثانوية" >
<سبان الطبقة = "متر" على غرار = "العرض: 50٪"> </ SPAN>
</ div>
<div الطبقة = "نجاح التقدم" >
<سبان الطبقة = "متر" على غرار = "العرض: 50٪"> </ SPAN>
</ div>
<div الطبقة = "التنبيه التقدم" >
<سبان الطبقة = "متر" على غرار = "العرض: 50٪"> </ SPAN>
</ div>
<سبان الطبقة = "متر" على غرار = "العرض: 50٪"> </ SPAN>
</ div>
<فئة الدرجة = "التقدم الثانوية" >
<سبان الطبقة = "متر" على غرار = "العرض: 50٪"> </ SPAN>
</ div>
<div الطبقة = "نجاح التقدم" >
<سبان الطبقة = "متر" على غرار = "العرض: 50٪"> </ SPAN>
</ div>
<div الطبقة = "التنبيه التقدم" >
<سبان الطبقة = "متر" على غرار = "العرض: 50٪"> </ SPAN>
</ div>
محاولة »
شريط التقدم فيليه
.radius و .round الطبقات تستخدم لإضافة زوايا مدورة شريط التقدم:
أمثلة
<div الطبقة = "التقدم">
<سبان الطبقة = "متر" على غرار = "العرض: 50٪"> </ SPAN>
</ div>
<فئة الدرجة = "دائرة نصف قطرها التقدم" >
<سبان الطبقة = "متر" على غرار = "العرض: 50٪"> </ SPAN>
</ div>
<div الطبقة = "التقدم تقريب" >
<سبان الطبقة = "متر" على غرار = "العرض: 50٪"> </ SPAN>
</ div>
<سبان الطبقة = "متر" على غرار = "العرض: 50٪"> </ SPAN>
</ div>
<فئة الدرجة = "دائرة نصف قطرها التقدم" >
<سبان الطبقة = "متر" على غرار = "العرض: 50٪"> </ SPAN>
</ div>
<div الطبقة = "التقدم تقريب" >
<سبان الطبقة = "متر" على غرار = "العرض: 50٪"> </ SPAN>
</ div>
محاولة »
شريط تقدم الحجم
يمكنك استخدام .small- num أو .large- num لتعديل عرض شريط التقدم، الأسطوانات هو رقم بين 1 (8.33٪)، و 12 (الافتراضي (100٪)) :
أمثلة
<فئة الدرجة = "التقدم واسع 1">
<سبان الطبقة = "متر" على غرار = "العرض: 50٪"> </ SPAN>
</ div>
<فئة الدرجة = "التقدم واسع 6">
<سبان الطبقة = "متر" على غرار = "العرض: 50٪"> </ SPAN>
</ div>
<فئة الدرجة = "التقدم واسع 9">
<سبان الطبقة = "متر" على غرار = "العرض: 50٪"> </ SPAN>
</ div>
<div الطبقة = "واسع تقدم 11">
<سبان الطبقة = "متر" على غرار = "العرض: 50٪"> </ SPAN>
</ div>
<! - عرض افتراضي ->
<div الطبقة = "واسع تقدم 12">
<سبان الطبقة = "متر" على غرار = "العرض: 50٪"> </ SPAN>
</ div>
<سبان الطبقة = "متر" على غرار = "العرض: 50٪"> </ SPAN>
</ div>
<فئة الدرجة = "التقدم واسع 6">
<سبان الطبقة = "متر" على غرار = "العرض: 50٪"> </ SPAN>
</ div>
<فئة الدرجة = "التقدم واسع 9">
<سبان الطبقة = "متر" على غرار = "العرض: 50٪"> </ SPAN>
</ div>
<div الطبقة = "واسع تقدم 11">
<سبان الطبقة = "متر" على غرار = "العرض: 50٪"> </ SPAN>
</ div>
<! - عرض افتراضي ->
<div الطبقة = "واسع تقدم 12">
<سبان الطبقة = "متر" على غرار = "العرض: 50٪"> </ SPAN>
</ div>
محاولة »
تقدم شريط التسمية
CSS يمكن استخدامها لوضع علامة على شريط التقدم. المثال التالي أضفنا <SPAN> عنصر لعرض النسب:
أمثلة
<نمط>
.percentage {
الموقف: مطلقة؛
أعلى: 50٪؛
اليسار: 50٪؛
اللون: أبيض؛
تحويل: ترجمة (-50٪، -50٪)؛
FONT-SIZE: 12px؛
}
</ النمط>
<div الطبقة = "التقدم">
<سبان الطبقة = "متر" على غرار = "الموقف: النسبية، العرض: 75٪">
<سبان الطبقة = "النسبة المئوية"> 75٪ </ SPAN>
</ SPAN>
</ div>
<div الطبقة = "نجاح التقدم" >
<سبان الطبقة = "متر" على غرار = "الموقف: النسبية، العرض: 50٪">
<سبان الطبقة = "النسبة المئوية"> 50٪ </ SPAN>
</ SPAN>
</ div>
<div الطبقة = "التنبيه التقدم" >
<سبان الطبقة = "متر" على غرار = "الموقف: النسبية، العرض: 25٪">
<سبان الطبقة = "النسبة المئوية"> 25٪ </ SPAN>
</ SPAN>
</ div>
.percentage {
الموقف: مطلقة؛
أعلى: 50٪؛
اليسار: 50٪؛
اللون: أبيض؛
تحويل: ترجمة (-50٪، -50٪)؛
FONT-SIZE: 12px؛
}
</ النمط>
<div الطبقة = "التقدم">
<سبان الطبقة = "متر" على غرار = "الموقف: النسبية، العرض: 75٪">
<سبان الطبقة = "النسبة المئوية"> 75٪ </ SPAN>
</ SPAN>
</ div>
<div الطبقة = "نجاح التقدم" >
<سبان الطبقة = "متر" على غرار = "الموقف: النسبية، العرض: 50٪">
<سبان الطبقة = "النسبة المئوية"> 50٪ </ SPAN>
</ SPAN>
</ div>
<div الطبقة = "التنبيه التقدم" >
<سبان الطبقة = "متر" على غرار = "الموقف: النسبية، العرض: 25٪">
<سبان الطبقة = "النسبة المئوية"> 25٪ </ SPAN>
</ SPAN>
</ div>
محاولة »