แถบความคืบหน้ามูลนิธิ
มูลนิธิสามารถใช้เป็นแถบความคืบหน้าในการแสดงการประมวลผลโปรแกรมการศึกษาระดับปริญญา:
เราสามารถ <div> ใช้องค์ประกอบ .progress ชั้นเรียนเพื่อสร้างแถบความคืบหน้า .meter ชั้นเรียนสำหรับองค์ประกอบของเด็ก (<span>) เราสามารถตั้งค่าร้อยละของความคืบหน้าใน <span> องค์ประกอบดังต่อไปนี้:
ตัวอย่าง
<div class = "ความคืบหน้า">
<class = "เมตร" สไตล์ Span = "width: 70%"> </ span>
</ div>
<class = "เมตร" สไตล์ Span = "width: 70%"> </ span>
</ div>
ลอง»
สีแถบความคืบหน้า
โดยค่าเริ่มต้นสีแถบความคืบหน้าเป็นสีฟ้า สีที่แตกต่างของการเรียน: .secondary , .success หรือ .alert :
ตัวอย่าง
<div class = "ความคืบหน้า">
<class = "เมตร" สไตล์ Span = "width: 50%"> </ span>
</ div>
<ระดับ Div = "ความคืบหน้ารอง" >
<class = "เมตร" สไตล์ Span = "width: 50%"> </ span>
</ div>
<div class = "ความคืบหน้าของความสำเร็จ" >
<class = "เมตร" สไตล์ Span = "width: 50%"> </ span>
</ div>
<div class = "ความคืบหน้าการแจ้งเตือน" >
<class = "เมตร" สไตล์ Span = "width: 50%"> </ span>
</ div>
<class = "เมตร" สไตล์ Span = "width: 50%"> </ span>
</ div>
<ระดับ Div = "ความคืบหน้ารอง" >
<class = "เมตร" สไตล์ Span = "width: 50%"> </ span>
</ div>
<div class = "ความคืบหน้าของความสำเร็จ" >
<class = "เมตร" สไตล์ Span = "width: 50%"> </ span>
</ div>
<div class = "ความคืบหน้าการแจ้งเตือน" >
<class = "เมตร" สไตล์ Span = "width: 50%"> </ span>
</ div>
ลอง»
แถบความคืบหน้าเนื้อ
.radius และ .round เรียนมาใช้เพื่อเพิ่มมุมโค้งมนสำหรับแถบความคืบหน้า:
ตัวอย่าง
<div class = "ความคืบหน้า">
<class = "เมตร" สไตล์ Span = "width: 50%"> </ span>
</ div>
<ระดับ Div = "ความคืบหน้ารัศมี" >
<class = "เมตร" สไตล์ Span = "width: 50%"> </ span>
</ div>
<ระดับ Div = "ความคืบหน้ากลม" >
<class = "เมตร" สไตล์ Span = "width: 50%"> </ span>
</ div>
<class = "เมตร" สไตล์ Span = "width: 50%"> </ span>
</ div>
<ระดับ Div = "ความคืบหน้ารัศมี" >
<class = "เมตร" สไตล์ Span = "width: 50%"> </ span>
</ div>
<ระดับ Div = "ความคืบหน้ากลม" >
<class = "เมตร" สไตล์ Span = "width: 50%"> </ span>
</ div>
ลอง»
แถบความคืบหน้าขนาด
คุณสามารถใช้ .small- num หรือ .large- num การปรับเปลี่ยนความกว้างของแถบความคืบหน้า, NUM เป็นตัวเลขระหว่าง 1 (8.33%) และ 12 (ค่าเริ่มต้น (100%)) :
ตัวอย่าง
<ระดับ Div = "ความคืบหน้าขนาดใหญ่ 1">
<class = "เมตร" สไตล์ Span = "width: 50%"> </ span>
</ div>
<ระดับ Div = "ความคืบหน้าขนาดใหญ่ 6">
<class = "เมตร" สไตล์ Span = "width: 50%"> </ span>
</ div>
<ระดับ Div = "ความคืบหน้าขนาดใหญ่ 9">
<class = "เมตร" สไตล์ Span = "width: 50%"> </ span>
</ div>
<div class = "ความคืบหน้าขนาดใหญ่ 11">
<class = "เมตร" สไตล์ Span = "width: 50%"> </ span>
</ div>
<! - เริ่มต้นความกว้าง ->
<div class = "ความคืบหน้าขนาดใหญ่ 12">
<class = "เมตร" สไตล์ Span = "width: 50%"> </ span>
</ div>
<class = "เมตร" สไตล์ Span = "width: 50%"> </ span>
</ div>
<ระดับ Div = "ความคืบหน้าขนาดใหญ่ 6">
<class = "เมตร" สไตล์ Span = "width: 50%"> </ span>
</ div>
<ระดับ Div = "ความคืบหน้าขนาดใหญ่ 9">
<class = "เมตร" สไตล์ Span = "width: 50%"> </ span>
</ div>
<div class = "ความคืบหน้าขนาดใหญ่ 11">
<class = "เมตร" สไตล์ Span = "width: 50%"> </ span>
</ div>
<! - เริ่มต้นความกว้าง ->
<div class = "ความคืบหน้าขนาดใหญ่ 12">
<class = "เมตร" สไตล์ Span = "width: 50%"> </ span>
</ div>
ลอง»
ป้ายแถบความคืบหน้า
CSS สามารถใช้ในการติดแท็กแถบความคืบหน้า ตัวอย่างต่อไปนี้เราได้เพิ่ม <span> องค์ประกอบที่จะแสดงเปอร์เซ็นต์:
ตัวอย่าง
<style>
.percentage {
position: absolute;
ด้านบน: 50%;
ซ้าย: 50%;
สี: สีขาว;
เปลี่ยน: แปล (-50% -50%);
font-size: 12px;
}
</ style>
<div class = "ความคืบหน้า">
<class = "เมตร" สไตล์ Span = "ตำแหน่ง: ญาติความกว้าง: 75%">
<span class = "ร้อยละ"> 75% </ span>
</ span>
</ div>
<div class = "ความคืบหน้าของความสำเร็จ" >
<class = "เมตร" สไตล์ Span = "ตำแหน่ง: ญาติความกว้าง: 50%">
<span class = "ร้อยละ"> 50% </ span>
</ span>
</ div>
<div class = "ความคืบหน้าการแจ้งเตือน" >
<class = "เมตร" สไตล์ Span = "ตำแหน่ง: ญาติความกว้าง: 25%">
<span class = "ร้อยละ"> 25% </ span>
</ span>
</ div>
.percentage {
position: absolute;
ด้านบน: 50%;
ซ้าย: 50%;
สี: สีขาว;
เปลี่ยน: แปล (-50% -50%);
font-size: 12px;
}
</ style>
<div class = "ความคืบหน้า">
<class = "เมตร" สไตล์ Span = "ตำแหน่ง: ญาติความกว้าง: 75%">
<span class = "ร้อยละ"> 75% </ span>
</ span>
</ div>
<div class = "ความคืบหน้าของความสำเร็จ" >
<class = "เมตร" สไตล์ Span = "ตำแหน่ง: ญาติความกว้าง: 50%">
<span class = "ร้อยละ"> 50% </ span>
</ span>
</ div>
<div class = "ความคืบหน้าการแจ้งเตือน" >
<class = "เมตร" สไตล์ Span = "ตำแหน่ง: ญาติความกว้าง: 25%">
<span class = "ร้อยละ"> 25% </ span>
</ span>
</ div>
ลอง»