स्ट्याक्ड बारहरू, एनिमेटेड पृष्ठभूमिहरू, र पाठ लेबलहरूका लागि समर्थन विशेषता रहेको बुटस्ट्र्याप अनुकूलन प्रगति पट्टीहरू प्रयोग गर्नका लागि कागजात र उदाहरणहरू।
यसले कसरी काम गर्छ
प्रगति कम्पोनेन्टहरू दुई HTML तत्वहरू, चौडाइ सेट गर्नका लागि केही CSS, र केही विशेषताहरूसँग बनाइएका छन्। हामी HTML5 <progress>तत्व प्रयोग गर्दैनौं , तपाईंले प्रगति पट्टीहरू स्ट्याक गर्न सक्नुहुन्छ, तिनीहरूलाई एनिमेट गर्न सक्नुहुन्छ, र तिनीहरूमा पाठ लेबलहरू राख्न सक्नुहुन्छ।
हामी .progressप्रगति पट्टीको अधिकतम मान संकेत गर्न र्यापरको रूपमा प्रयोग गर्छौं।
.progress-barहामी अहिलेसम्मको प्रगति संकेत गर्न भित्री प्रयोग गर्दछौं ।
.progress-barतिनीहरूको चौडाइ सेट गर्न इनलाइन शैली, उपयोगिता वर्ग, वा अनुकूलन CSS आवश्यक छ ।
यसलाई पहुँचयोग्य बनाउन केही र विशेषताहरू .progress-barपनि चाहिन्छ ।rolearia
त्यो सबै सँगै राख्नुहोस्, र तपाईंसँग निम्न उदाहरणहरू छन्।
भित्र पाठ राखेर तपाईंको प्रगति पट्टीहरूमा लेबलहरू थप्नुहोस् .progress-bar।
२५%
उचाइ
हामीले मा मात्र heightमान सेट गर्छौं .progress, त्यसैले यदि तपाईंले त्यो मान परिवर्तन गर्नुभयो भने भित्री .progress-barस्वतः तदनुसार रिसाइज हुनेछ।
पृष्ठभूमिहरू
व्यक्तिगत प्रगति पट्टीहरूको उपस्थिति परिवर्तन गर्न पृष्ठभूमि उपयोगिता कक्षाहरू प्रयोग गर्नुहोस्।
धेरै बारहरू
यदि तपाईंलाई आवश्यक छ भने प्रगति कम्पोनेन्टमा धेरै प्रगति पट्टीहरू समावेश गर्नुहोस्।
धारीदार
प्रगति पट्टीको पृष्ठभूमि रङमा CSS ग्रेडियन्ट मार्फत स्ट्राइप लागू .progress-bar-stripedगर्न कुनै पनि थप्नुहोस् ।.progress-bar
एनिमेटेड स्ट्रिपहरू
धारीदार ग्रेडियन्ट पनि एनिमेटेड हुन सक्छ। CSS3 एनिमेसनहरू मार्फत दायाँ देखि बायाँ स्ट्रिपहरू एनिमेसन गर्न मा .progress-bar-animatedथप्नुहोस् ।.progress-bar