แถบความคืบหน้าเงินทุน
บทนี้จะอธิบายแถบความคืบหน้าเงินทุน ในการกวดวิชานี้คุณจะเห็นวิธีการสร้างแถบความคืบหน้าในการโหลด Bootstrap เปลี่ยนเส้นทางหรือรัฐในการดำเนินงาน
บูตแถบความคืบหน้าโดยใช้การเปลี่ยน CSS3 และภาพเคลื่อนไหวที่จะได้รับผลกระทบ รุ่นเก่าของ Internet Explorer และ Firefox 9 และก่อนหน้านี้ไม่สนับสนุนคุณลักษณะนี้ Opera 12 ไม่สนับสนุนภาพเคลื่อนไหว
แถบความคืบหน้าของการเริ่มต้น
สร้างแถบความคืบหน้าขั้นพื้นฐานทำตามขั้นตอนเหล่านี้:
- เพิ่มระดับ .progress กับ <div>
- แล้วในข้างต้น <div>ภายในเพิ่มคลาส .progress บาร์พร้อมที่ว่างเปล่า <div>
- เพิ่มแอตทริบิวต์รูปแบบที่มีความกว้างแสดงเป็นเปอร์เซ็นต์เช่น style = "60%"; 60% แสดงให้เห็นถึงสถานที่ตั้งของแถบความคืบหน้า
ลองดูตัวอย่างต่อไปนี้:
ตัวอย่าง
<div class = "ความคืบหน้า">
<div class = "ความคืบหน้าบาร์" บทบาท = "ProgressBar" Aria-valuenow = "60"
Aria-valuemin = "0" Aria-valuemax = "100" style = "width: 40%; ">
<span class = "SR-เท่านั้น"> 40% เสร็จสมบูรณ์ </ span>
</ div>
</ div>
ลอง»
ผลมีดังนี้
แถบความคืบหน้าสำรอง
เพื่อสร้างแถบความคืบหน้าในสไตล์ที่แตกต่างกันดังต่อไปนี้:
- เพิ่มระดับ .progress กับ <div>
- แล้วในข้างต้น <div>ภายในเพิ่มคลาส .progress บาร์และความคืบหน้า Bar- *คลาว่างเปล่ากับ <div> ที่ไหน *สามารถจะประสบความสำเร็จ, ข้อมูลการเตือนอันตราย
- เพิ่มแอตทริบิวต์รูปแบบที่มีความกว้างแสดงเป็นเปอร์เซ็นต์เช่น style = "60%"; 60% แสดงให้เห็นถึงสถานที่ตั้งของแถบความคืบหน้า
ลองดูตัวอย่างต่อไปนี้:
ตัวอย่าง
<div class = "ความคืบหน้า">
<div class = "ความคืบหน้าความคืบหน้าบาร์ บาร์ประสบความสำเร็จ" บทบาท = "ProgressBar"
Aria-valuenow = "60" Aria-valuemin = "0" Aria-valuemax = "100"
style = "width: 90%; ">
<span class = "SR-เท่านั้น"> 90% สมบูรณ์ (ประสบความสำเร็จ) </ span>
</ div>
</ div>
<div class = "ความคืบหน้า">
<div class = "ความคืบหน้าความคืบหน้าบาร์ บาร์ข้อมูล" บทบาท = "ProgressBar"
Aria-valuenow = "60" Aria-valuemin = "0" Aria-valuemax = "100"
style = "width: 30%; ">
<span class = "SR-เท่านั้น"> 30% สมบูรณ์ (ข้อมูล) </ span>
</ div>
</ div>
<div class = "ความคืบหน้า">
<div class = "ความคืบหน้าความคืบหน้าบาร์ บาร์เตือน" บทบาท = "ProgressBar"
Aria-valuenow = "60" Aria-valuemin = "0" Aria-valuemax = "100"
style = "width: 20%; ">
<span class = "SR-เท่านั้น"> 20% สมบูรณ์ (เตือน) </ span>
</ div>
</ div>
<div class = "ความคืบหน้า">
<div class = "ความคืบหน้าความคืบหน้าบาร์ บาร์อันตราย" บทบาท = "ProgressBar"
Aria-valuenow = "60" Aria-valuemin = "0" Aria-valuemax = "100"
style = "width: 10%; ">
<span class = "SR-เท่านั้น"> 10% สมบูรณ์ (อันตราย) </ span>
</ div>
</ div>
ลอง»
ผลมีดังนี้
ความคืบหน้าลายแถบ
สร้างแถบความคืบหน้าแถบทำตามขั้นตอนเหล่านี้:
- เพิ่มกับ .progressชั้นเรียนและ .progress-ลาย<div>
- แล้วในข้างต้น <div>ภายในเพิ่มคลาส .progress บาร์และความคืบหน้า Bar- *คลาว่างเปล่ากับ <div> ที่ไหน *สามารถจะประสบความสำเร็จ, ข้อมูลการเตือนอันตราย
- เพิ่มแอตทริบิวต์รูปแบบที่มีความกว้างแสดงเป็นเปอร์เซ็นต์เช่น style = "60%"; 60% แสดงให้เห็นถึงสถานที่ตั้งของแถบความคืบหน้า
ลองดูตัวอย่างต่อไปนี้:
ตัวอย่าง
<div class = "ความคืบหน้าความคืบหน้าลาย" >
<div class = "ความคืบหน้าความคืบหน้าบาร์ บาร์ประสบความสำเร็จ" บทบาท = "ProgressBar"
Aria-valuenow = "60" Aria-valuemin = "0" Aria-valuemax = "100"
style = "width: 90%; ">
<span class = "SR-เท่านั้น"> 90% สมบูรณ์ (ประสบความสำเร็จ) </ span>
</ div>
</ div>
<div class = "ความคืบหน้าความคืบหน้าลาย" >
<div class = "ความคืบหน้าความคืบหน้าบาร์ บาร์ข้อมูล" บทบาท = "ProgressBar"
Aria-valuenow = "60" Aria-valuemin = "0" Aria-valuemax = "100"
style = "width: 30%; ">
<span class = "SR-เท่านั้น"> 30% สมบูรณ์ (ข้อมูล) </ span>
</ div>
</ div>
<div class = "ความคืบหน้าความคืบหน้าลาย" >
<div class = "ความคืบหน้าความคืบหน้าบาร์ บาร์เตือน" บทบาท = "ProgressBar"
Aria-valuenow = "60" Aria-valuemin = "0" Aria-valuemax = "100"
style = "width: 20%; ">
<span class = "SR-เท่านั้น"> 20% สมบูรณ์ (เตือน) </ span>
</ div>
</ div>
<div class = "ความคืบหน้าความคืบหน้าลาย" >
<div class = "ความคืบหน้าความคืบหน้าบาร์ บาร์อันตราย" บทบาท = "ProgressBar"
Aria-valuenow = "60" Aria-valuemin = "0" Aria-valuemax = "100"
style = "width: 10%; ">
<span class = "SR-เท่านั้น"> 10% สมบูรณ์ (อันตราย) </ span>
</ div>
</ div>
ลอง»
ผลมีดังนี้
แถบความคืบหน้าเคลื่อนไหว
สร้างแถบความคืบหน้าเคลื่อนไหวทำตามขั้นตอนเหล่านี้:
- เพิ่มกับ .progressชั้นเรียนและ .progress-ลาย<div>ขณะที่การเพิ่มระดับ .active
- แล้วในข้างต้น <div>ภายในเพิ่มคลาส .progress บาร์พร้อมที่ว่างเปล่า <div>
- เพิ่มแอตทริบิวต์รูปแบบที่มีความกว้างแสดงเป็นเปอร์เซ็นต์เช่น style = "60%"; 60% แสดงให้เห็นถึงสถานที่ตั้งของแถบความคืบหน้า
นี้จะทำให้ลายเส้นมีความรู้สึกของการเคลื่อนไหวจากขวาไปซ้าย
ลองดูตัวอย่างต่อไปนี้:
ตัวอย่าง
<div class = "ความคืบหน้าความคืบหน้าการใช้งานลาย ">
<div class = "ความคืบหน้าความคืบหน้าบาร์ บาร์ประสบความสำเร็จ" บทบาท = "ProgressBar"
Aria-valuenow = "60" Aria-valuemin = "0" Aria-valuemax = "100"
style = "width: 40%; ">
<span class = "SR-เท่านั้น"> 40% เสร็จสมบูรณ์ </ span>
</ div>
</ div>
ลอง»
ผลมีดังนี้
แถบความคืบหน้าซ้อนกัน
คุณยังสามารถสแต็คแถบความคืบหน้าหลาย แถบความคืบหน้าหลายคนในกอง.progress เดียวกันสามารถรับรู้ดังแสดงในตัวอย่างต่อไปนี้:
ตัวอย่าง
<div class = "ความคืบหน้า">
<div class = "ความคืบหน้าความคืบหน้าบาร์ บาร์ประสบความสำเร็จ" บทบาท = "ProgressBar"
Aria-valuenow = "60" Aria-valuemin = "0" Aria-valuemax = "100"
style = "width: 40%; ">
<span class = "SR-เท่านั้น"> 40% เสร็จสมบูรณ์ </ span>
</ div>
<div class = "ความคืบหน้าความคืบหน้าบาร์ บาร์ข้อมูล" บทบาท = "ProgressBar"
Aria-valuenow = "60" Aria-valuemin = "0" Aria-valuemax = "100"
style = "width: 30%; ">
<span class = "SR-เท่านั้น"> 30% สมบูรณ์ (ข้อมูล) </ span>
</ div>
<div class = "ความคืบหน้าความคืบหน้าบาร์ บาร์เตือน" บทบาท = "ProgressBar"
Aria-valuenow = "60" Aria-valuemin = "0" Aria-valuemax = "100"
style = "width: 20%; ">
<span class = "SR-เท่านั้น"> 20% สมบูรณ์ (เตือน) </ span>
</ div>
</ div>
ลอง»
ผลมีดังนี้
