Sourceප්රගතිය
බූට්ස්ට්රැප් අභිරුචි ප්රගති තීරු භාවිතා කිරීම සඳහා ප්රලේඛන සහ උදාහරණ ගොඩගැසී ඇති තීරු, සජීවිකරණ පසුබිම් සහ පෙළ ලේබල සඳහා සහය දක්වයි.
එය ක්රියා කරන ආකාරය
ප්රගති සංරචක HTML මූලද්රව්ය දෙකක්, පළල සැකසීමට සමහර CSS සහ ගුණාංග කිහිපයක් සමඟ ගොඩනගා ඇත. අපි HTML5 <progress>
මූලද්රව්යය භාවිතා නොකරමු , ඔබට ප්රගති තීරු ගොඩගැසීමට, ඒවා සජීවීකරණය කිරීමට සහ ඒවාට උඩින් පෙළ ලේබල් තැබීමට හැකි බව සහතික කරයි.
.progress
ප්රගති තීරුවේ උපරිම අගය දැක්වීමට අපි දවටනයක් ලෙස භාවිතා කරමු .
.progress-bar
මෙතෙක් ප්රගතිය දැක්වීමට අපි අභ්යන්තරය භාවිතා කරමු .
- ඒවායේ
.progress-bar
පළල සැකසීමට පේළිගත විලාසයක්, උපයෝගිතා පන්තියක් හෝ අභිරුචි CSS අවශ්ය වේ.
- එයට ප්රවේශ විය හැකි කිරීමට
.progress-bar
සමහරක් role
සහ aria
ගුණාංග අවශ්ය වේ.
ඒ සියල්ල එකට එකතු කරන්න, ඔබට පහත උදාහරණ ඇත.
Bootstrap පළල සැකසීම සඳහා උපයෝගිතා අතලොස්සක් සපයයි . ඔබගේ අවශ්යතා මත පදනම්ව, මේවා ඉක්මනින් ප්රගතිය වින්යාස කිරීමට උපකාරී වේ.
ලේබල්
තුළ පෙළ තැබීමෙන් ඔබේ ප්රගති තීරුවලට ලේබල එක් කරන්න .progress-bar
.
උස
අපි සකසන්නේ height
අගයක් පමණි .progress
, එබැවින් ඔබ එම අගය වෙනස් කළහොත් අභ්යන්තරය .progress-bar
ඒ අනුව ස්වයංක්රීයව ප්රමාණය වෙනස් වේ.
පසුබිම්
තනි ප්රගති තීරුවල පෙනුම වෙනස් කිරීමට පසුබිම් උපයෝගිතා පන්ති භාවිතා කරන්න.
බහු තීරු
ඔබට අවශ්ය නම් ප්රගති සංරචකයක බහු ප්රගති තීරු ඇතුළත් කරන්න.
ඉරි සහිත
ප්රගති තීරුවේ පසුබිම් වර්ණයට ඉහළින් CSS අනුක්රමය හරහා තීරුවක් යෙදීමට .progress-bar-striped
ඕනෑම එකකට එක් කරන්න ..progress-bar
සජීවිකරණ තීරු
ඉරි සහිත අනුක්රමණය ද සජීවිකරණය කළ හැකිය. CSS3 සජීවිකරණ හරහා ඉරි දකුණේ සිට වමට සජීවීකරණය .progress-bar-animated
කිරීමට වෙත එක් කරන්න ..progress-bar