آموزش نوارهای پیشرفت در بوت استرپ
4 سال پیش
آموزش نوارهای پیشرفت در بوت استرپ
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش نوارهای پیشرفت در بوت استرپ خواهیم پرداخت.
این درس در مورد نوارهای پیشرفت بوت استرپ بحث می کند. هدف از نوارهای پیشرفت این است که نشان دهند دارایی ها در حال بارگیری هستند، در حال انجام هستند یا اینکه در مورد عناصر موجود در صفحه اقدامی انجام می شود.
نوار های پیشرفت از انتقال و انیمیشن های CSS3 برای دستیابی به برخی از تأثیرات خود استفاده می کنند. این ویژگی ها در اینترنت اکسپلورر 9 و نسخه های پایین یا قدیمی Firefox پشتیبانی نمی شوند. Opera 12 از انیمیشن پشتیبانی نمی کند.
نوار پیشرفت پیش فرض
برای ایجاد یک نوار پیشرفت اساسی –
- <div> را با یک کلاس progress. اضافه کنید.
- بعد در داخل <div> بالا ، یک <div> خالی با یک کلاس از progress-bar. اضافه کنید.
- یک ویژگی سبک با عرض بیان شده به درصد اضافه کنید. برای مثال بگویید ، style = “60٪”؛ نشان می دهد که نوار پیشرفت 60٪ بوده است.
اجازه دهید مثالی را در زیر مشاهده کنیم –
|
1 2 3 4 5 6 7 |
<div class = "progress"> <div class = "progress-bar" role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;"> <span class = "sr-only">40% Complete</span> </div> </div> |
نوار پیشرفت جایگزین
برای ایجاد یک نوار پیشرفت با سبک های مختلف –
- <div> را با یک کلاس .progress اضافه کنید.
- بعد ، در داخل <div> بالا ، یک <div> خالی با یک کلاس نوار .progress و class progress-bar- * اضافه کنید که در آن می تواند موفقیت، اطلاعات، هشدار، خطر باشد.
- یک ویژگی سبک با عرض بیان شده به درصد اضافه کنید. برای مثال بگویید ، style = “60٪”؛ نشان می دهد که نوار پیشرفت 60٪ بوده است.
اجازه دهید مثالی را در زیر مشاهده کنیم –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<div class = "progress"> <div class = "progress-bar progress-bar-success" role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;"> <span class = "sr-only">90% Complete (Sucess)</span> </div> </div> <div class = "progress"> <div class = "progress-bar progress-bar-info" role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;"> <span class = "sr-only">30% Complete (info)</span> </div> </div> <div class = "progress"> <div class = "progress-bar progress-bar-warning" role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;"> <span class = "sr-only">20%Complete (warning)</span> </div> </div> <div class = "progress"> <div class = "progress-bar progress-bar-danger" role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;"> <span class = "sr-only">10% Complete (danger)</span> </div> </div> |
نوار پیشرفت راه راه
برای ایجاد یک نوار پیشرفت راه راه –
- یک <div> با کلاس .progress و progress-striped. اضافه کنید.
- بعد در داخل <div> بالا ، یک <div> خالی با یک کلاس از نوار *.progress و class progress-bar- * اضافه کنید که در آن می تواند موفقیت ، اطلاعات ، هشدار ، خطر باشد.
- یک ویژگی سبک با عرض بیان شده به درصد اضافه کنید. برای مثال بگویید ، style = “60٪”؛ نشان می دهد که نوار پیشرفت 60٪ بوده است.
اجازه دهید مثالی را در زیر مشاهده کنیم –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<div class = "progress progress-striped"> <div class = "progress-bar progress-bar-success" role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;"> <span class = "sr-only">90% Complete (Sucess)</span> </div> </div> <div class = "progress progress-striped"> <div class = "progress-bar progress-bar-info" role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;"> <span class = "sr-only">30% Complete (info)</span> </div> </div> <div class = "progress progress-striped"> <div class = "progress-bar progress-bar-warning" role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style="width: 20%;"> <span class = "sr-only">20%Complete (warning)</span> </div> </div> <div class = "progress progress-striped"> <div class = "progress-bar progress-bar-danger" role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;"> <span class = "sr-only">10% Complete (danger)</span> </div> </div> |
نوار پیشرفت متحرک
برای ایجاد یک نوار پیشرفت متحرک –
- یک <div> با کلاس progress. و progress-striped. اضافه کنید. همچنین کلاس active. را به progress. راه راه اضافه کنید.
- بعد ، در داخل <div> بالا ، یک <div> خالی با یک کلاس از progress-bar. اضافه کنید.
- یک ویژگی سبک با عرض بیان شده به درصد اضافه کنید. برای مثال بگویید ، style = “60٪”؛ نشان می دهد که نوار پیشرفت 60٪ بوده است.
این نوارها را از راست به چپ متحرک می کند.
اجازه دهید مثالی را در زیر مشاهده کنیم –
|
1 2 3 4 5 6 7 |
<div class = "progress progress-striped active"> <div class = "progress-bar progress-bar-success" role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;"> <span class = "sr-only">40% Complete</span> </div> </div> |
لیست جلسات قبل آموزش بوت استرپ
- آموزش بوت استرپ
- بررسی اجمالی بوت استرپ
- آموزش راه اندازی بوت استرپ
- آموزش سیستم شبکه در بوت استرپ
- بررسی اجمالی CSS در بوت استرپ
- آموزش تایپوگرافی در بوت استرپ
- آموزش کد در بوت استرپ
- آموزش جدول در بوت استرپ
- آموزش فرم ها در بوت استرپ
- آموزش دکمه ها در بوت استرپ
- آموزش تصاویر در بوت استرپ
- آموزش کلاس های کمکی در بوت استرپ
- آموزش ابزارهای پاسخگو در بوت استرپ
- آموزش Glyphicons در بوت استرپ
- آموزش منوهای کشویی در بوت استرپ
- آموزش گروه های دکمه ای در بوت استرپ
- آموزش گروه های ورودی در بوت استرپ
- آموزش عناصر ناوبری در بوت استرپ
- آموزش Navbar در بوت استرپ
- آموزش Breadcrumbs در بوت استرپ
- آموزش صفحه بندی در بوت استرپ
- آموزش لیبل ها در بوت استرپ
- آموزش بج ها در بوت استرپ
- آموزش Jumbotron در بوت استرپ
- آموزش تصاویر کوچک در بوت استرپ
- آموزش هشدارها در بوت استرپ
نویسنده مطلب
saber
.svg)
دیدگاه شما