คำอธิบายโดยละเอียดเกี่ยวกับความรู้ส่วนประกอบของ Bootstrap Progress Bar

บนหน้าเว็บเอฟเฟกต์แถบความคืบหน้ามักจะเห็นได้เช่นการแบ่งแยกระบบสถานะการโหลด ฯลฯ ส่วนประกอบแถบความคืบหน้าใช้แอตทริบิวต์การเปลี่ยนแปลงและแอนิเมชั่นของ CSS3 เพื่อให้เอฟเฟกต์พิเศษบางอย่างเสร็จสมบูรณ์ เอฟเฟกต์พิเศษเหล่านี้ไม่ได้รับการสนับสนุนใน IE9 และด้านล่างของ IE9 และ Firefox รุ่นต่ำกว่าและ Opera 12 ไม่รองรับคุณลักษณะแอนิเมชั่น

แถบความคืบหน้าเป็นเหมือนองค์ประกอบอิสระอื่น ๆ นักพัฒนาสามารถเลือกรุ่นที่เกี่ยวข้องตามความต้องการของพวกเขา:

น้อยกว่า: ความคืบหน้า-บาร์

sass: _progress-bars.scss

แถบความคืบหน้าขั้นพื้นฐาน

หลักการดำเนินการ:

จำเป็นต้องมีตู้คอนเทนเนอร์สองตู้ คอนเทนเนอร์ด้านนอกใช้ชื่อคลาส Progress และ SubContainer ใช้ชื่อคลาส Progress-Bar; โดยที่. progress ถูกใช้เพื่อตั้งค่าสีพื้นหลังของคอนเทนเนอร์บาร์ความคืบหน้าความสูงระยะห่าง ฯลฯ ; และ. -Progress-Bar กำหนดทิศทางความคืบหน้าสีพื้นหลังและเอฟเฟกต์ที่มากเกินไปของแถบความคืบหน้า ต่อไปนี้เป็นซอร์สโค้ด CSS:

 ความคืบหน้า {ความสูง: 20px; มาร์จิ้น-ก้น: 20px; ล้น: ซ่อนเร้น; พื้นหลัง-สี: #f5f5f5; ชายแดน-เรดิโอ: 4px; -webkit-box-shadow: inset 0 1px 2px rgba (0, 0, 0, .1); {Float: ซ้าย; ความกว้าง: 0; ความสูง: 100%; Font-Size: 12px; Line-Height: 20px; สี: #FFFF; Text-Align: Center; พื้นหลัง-สี: #428BCA; -webkit-Box-Shadow: INSET 0 -1PX 0 RGBA (0, 0,. 0, .15);-WebKit-Transition: Width .6S EASE; การเปลี่ยนแปลง: ความกว้าง. 6S EASE;}

ตัวอย่าง:

 <div> <div role = "progressbar" aria-valuenow = "30" aria-valuemin = "0" aria-valuemax = "100"> <span> 30%</span> </div> </div>

ฟังก์ชั่นแอตทริบิวต์บทบาท: บอกเครื่องมือค้นหาว่าฟังก์ชั่นของ div นี้คือแถบความคืบหน้า;

ARIA-VALUENOW =” 30” ฟังก์ชั่นแอตทริบิวต์: ความคืบหน้าของแถบความคืบหน้าในปัจจุบันคือ 40%;

aria-valuemin =” 0” ฟังก์ชั่นแอตทริบิวต์: ค่าต่ำสุดของแถบความคืบหน้าคือ 0%;

ARIA-VALUEMAX =” 100” ฟังก์ชั่นแอตทริบิวต์: ค่าสูงสุดของแถบความคืบหน้าคือ 100%;

คุณสามารถลบแท็ก <span> ด้วยชุดคลาส. SR-Oonly จากส่วนประกอบแถบความคืบหน้าเพื่อให้ความคืบหน้าปัจจุบันแสดงขึ้น

 <div> <div role = "progressbar" aria-valuenow = "40" aria-valuemin = "0" aria-valuemax = "100"> 40%</div> </div>

แถบความคืบหน้าสีสันสดใส

แถบความคืบหน้าสีเหมือนกับแถบความคืบหน้าคำเตือน เพื่อให้ผู้ใช้ได้รับประสบการณ์ที่ดีขึ้นสีแถบความคืบหน้าต่างกันจะได้รับการกำหนดค่าตามสถานะที่แตกต่างกันส่วนใหญ่รวมถึงสี่ประเภทต่อไปนี้:

Progress-Bar-Info: แสดงถึงแถบความคืบหน้าของข้อมูลสีน้ำเงิน

ความคืบหน้าในการประสบความสำเร็จ: บ่งบอกถึงความสำเร็จในแถบความสำเร็จสีเขียว

ความคืบหน้า-การเตือน-บาร์: ระบุแถบความคืบหน้าคำเตือนสีเหลือง

ความคืบหน้าบาร์-เดนเดอร์: ระบุแถบความคืบหน้าข้อผิดพลาดสีแดง

ซอร์สโค้ด CSS:

 .progress-bar-success {พื้นหลังสี: #5CB85C;}. ความคืบหน้า-บาร์ -info {พื้นหลัง-สี: #5BC0DE;}. ความคืบหน้า-แบร์-การเตือน-สีพื้นหลัง: #f0ad4e;}.

วิธีใช้:

เพียงเพิ่มชื่อคลาสที่สอดคล้องกันในแถบความคืบหน้าพื้นฐาน

ตัวอย่าง:

 <H1> แถบความคืบหน้าสีสัน </h1> <div> <div role = "progressbar" aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100"> 25%</div> aria-valuemax = "0"> 40%</div> </div> <div> <div role = "progressBar" aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100"> 80%</vid> Aria-valuemin = "0"> 60%</div> </div>

ผลกระทบมีดังนี้:

แถบความคืบหน้าของลาย

แถบความคืบหน้าลายใช้การไล่ระดับสีเชิงเส้นของ CSS3 มันไม่ได้ใช้รูปภาพใด ๆ การใช้แถบความคืบหน้าลายเพียงต้องการการเพิ่มชื่อคลาส "ความคืบหน้าลาย" ลงในคอนเทนเนอร์ของแถบความคืบหน้า ความคืบหน้า. หากคุณต้องการสร้างแถบความคืบหน้าเช่นความคืบหน้าของสีและมีเอฟเฟกต์สีคุณจะต้องเพิ่มชื่อคลาสสีที่สอดคล้องกันลงในแถบความคืบหน้า

ต่อไปนี้เป็นรหัสแหล่งที่มาของสไตล์. progress-striped:

 .Progress-striped .progress-bar {พื้นหลัง-ภาพ: -webkit-linear-gradient (45deg, RGBA (255, 255, 255, .15) 25%, โปร่งใส 25%, โปร่งใส 50%, RGBA (255, 255, 255) 75%, โปร่งใส 75%, โปร่งใส); ภาพพื้นหลัง-ภาพ: เชิงเส้น-กราด (45DEG, RGBA (255, 255, 255, .15) 25%, โปร่งใส 25%, โปร่งใส 25%, 250%, 255555555555 75%, โปร่งใส); ขนาดพื้นหลัง: 40px 40px;}

แต่ละรัฐที่สอดคล้องกับความคืบหน้าของริ้วก็มีสีที่แตกต่างกัน

 .Progress-striped. -progress-bar-success {background-image: -webkit-linear-gradient (45deg, RGBA (255, 255, 255, .15) 25%, โปร่งใส 25%, โปร่งใส 50%, RGBA (255 โปร่งใส 75%, โปร่งใส 75%, โปร่งใส); ภาพพื้นหลัง-ภาพ: เส้นตรง (45DEG, RGBA (255, 255, 255, .15) 25%, โปร่งใส 25%, โปร่งใส 25%, .15) 25% 255, .15) 50%, RGBA (255, 255, 255, .15) 50%, RGBA (255, 255, 255, .15) 75%, โปร่งใส 75%, โปร่งใส); RGBA (255, 255, .15) 50%, RGBA (255, 255, 255, .15) 75%, โปร่งใส 75%, โปร่งใส);}. Progress-striped. Progress-Bar-Warning {Image-Image: -webkit-Linear-gradient 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 25% 255, .15) 75%, โปร่งใส 75%, โปร่งใส); RGBA (255, 255, 255, .15) 75%, โปร่งใส 75%, โปร่งใส);}. ความคืบหน้า, progress-progress-bar-danger {พื้นหลัง-ภาพ: -webkit-linear-gradient (45deg, RGBA (255, 255 255, .15) 50%, RGBA (255, 255, .15) 75%, โปร่งใส 75%, โปร่งใส) ภาพพื้นหลัง: เชิงเส้น-กราด (45DEG, RGBA (255, 255, 255, 255, 255, 255, 255 255, 255, 255, 255, 255, 255, 255, 255, .15) 25%, โปร่งใส 25%, โปร่งใส 50%, RGBA (255, 255, 255, .15) 50%, RGBA (255, 255, 255) 75%

มาดูการใช้แถบความคืบหน้าของแถบ:

 <h1> แถบความคืบหน้าลาย </h1> <div> <div role = "progressbar" aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100"> 25%</div> aria-valuemax = "0"> 40%</div> </div> <div> <div role = "progressBar" aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100"> 80%</vid> Aria-valuemin = "0"> 60%</div> </div>

แถบความคืบหน้าของแถบไดนามิก

แถบความคืบหน้าของแถบแบบไดนามิกสามารถรับรู้ได้ตามความคืบหน้าของ Bar.progress และ. -progress-striped สองคลาสเพิ่มชื่อคลาสที่ใช้งาน

หลักการการนำไปใช้งานส่วนใหญ่ทำได้ผ่านภาพเคลื่อนไหวของ CSS3 ก่อนอื่นอนิเมชั่นแถบแถบความคืบหน้าถูกสร้างขึ้นผ่าน @KeyFrames ภาพเคลื่อนไหวนี้ส่วนใหญ่ทำสิ่งหนึ่งซึ่งคือการเปลี่ยนตำแหน่งของภาพพื้นหลังนั่นคือค่าของตำแหน่งพื้นหลัง เนื่องจากแถบความคืบหน้าของแถบลายนั้นทำผ่านการไล่ระดับสีเชิงเส้นของ CSS3 และเชิงเส้น-กราดใช้ภาพพื้นหลังที่สอดคล้องกับพื้นหลัง

นี่คือซอร์สโค้ด CSS:

 @-webkit-keyframes progress-bar-stripes {จาก {background-position: 40px 0;} ถึง {ตำแหน่งพื้นหลัง: 0 0;}}@keyframes progress-bar-stripes {จาก {background-position: 40px 0;

@KeyFrames เพียงสร้างเอฟเฟกต์ภาพเคลื่อนไหว หากเราต้องการให้แถบความคืบหน้าเคลื่อนไหวได้จริงเราจำเป็นต้องเรียกแอนิเมชั่น ในเฟรมเวิร์ก Bootstrap ให้เพิ่มชื่อคลาส "Active" ลงในตู้คอนเทนเนอร์ Progress "ความคืบหน้า" และปล่อยให้การโหลดเอกสารเสร็จสมบูรณ์และสัมผัสภาพเคลื่อนไหว

รหัสสไตล์ที่สอดคล้องกันสำหรับแอนิเมชั่นการโทรมีดังนี้:

 .Progress.active .Progress-Bar {-webkit-Animation: Progress-Bar-Stripes 2S Linear Infinite; Animation: Progress-Bar-Stripes 2S Linear Infinite;}

ตัวอย่าง:

 <H1> แถบความคืบหน้าของแถบไดนามิก </h1> <div> <div role = "progressbar" aria-valuenow = "25" aria-valuemin = "0" 0 "ria-valuemax =" 100 "> 25%</div> aria-valuemax = "0"> 40%</div> </div> <div> <div role = "progressBar" aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100"> 80%</vid> Aria-valuemin = "0"> 60%</div> </div>

เอฟเฟกต์มีดังนี้ (เนื่องจากเป็นภาพที่มาจากผลลัพธ์บนหน้าเว็บโดยตรงจึงไม่สามารถดูเอฟเฟกต์แบบไดนามิกได้ที่นี่):

แถบความคืบหน้าของคาสเคด:

ความคืบหน้าการซ้อนสามารถทำให้แถบความคืบหน้าเข้ากันไม่ได้และจัดเรียงในแนวนอน

ตัวอย่าง:

 <div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div>

นอกจากแถบความคืบหน้าของสีสแต็กแล้วคุณยังสามารถสแต็กสแต็กสแต็กแถบความคืบหน้าของแถบหรือแถบความคืบหน้าของแถบสแต็กที่มีแถบความคืบหน้าสี คุณจะต้องเพิ่มแถบความคืบหน้าที่สอดคล้องกันในคอนเทนเนอร์ "ความคืบหน้า" โปรดทราบว่าผลรวมของแถบความคืบหน้าแบบซ้อนไม่เกิน 100%

ลองมาดูตัวอย่าง:

 <div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> </div> </div> </div> </div> </div> </div> </div> </div>

นี่คือคำอธิบายโดยละเอียดเกี่ยวกับความรู้ส่วนประกอบของ Bootstrap Progress Bar ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน!