میرممد

آموزش برنامه نویسی همراه با تکه کد های کاربردی از زبان های مختلف برنامه نویسی
سید محمد میرعالی

سید محمد میرعالی

امیدوارم مطالب خوب و کاربردی رو بتونم در سایتم برای شما دوستان قرار بدم.

دسته بندی مطالب آمار سایت
  • کل مطالب : 13
  • کل نظرات : 0
  • افراد آنلاین : 1
  • تعداد اعضا : 0
  • آی پی امروز : 2
  • آی پی دیروز : 11
  • بازدید امروز : 90
  • باردید دیروز : 17
  • گوگل امروز : 0
  • گوگل دیروز : 0
  • بازدید هفته : 202
  • بازدید ماه : 405
  • بازدید سال : 22,914
  • بازدید کلی : 22,914
  • آموزش کار با Progress Bar در Bootstrap 4


    در اين مطلب از سايت ميرممد با Progress Bar در بوتسترپ نسخه چهار كار خواهيم كرد.كلاس Progress Bar براي نمايش مقدار باقيمانده از يك فرايند استفاده ميشه.نمونه كد Progress Bar در بوتسترپ :

    <div class="progress">
      <div class="progress-bar" style="width:70%">70%</div>
    </div>

     

    خروجي كد بالا :

    70%

    براي تغيير اندازه درصد پيشرفت بايد مقدار width:70% را تغيير دهيم و براي تغيير متن درون Progress Bar بايد 70% را تغيير دهيم.Progress Bar داراي رنگ بندي هاي بوتسترپي نيز هست كه در ادامه توضيح ميدم.

    افزايش ارتفاع Progress Bar در بوتسترپ :

    فقط كافيه بخش سبز رنگ در كد زير رو روي يك عدد دلخواه تنظيم كنيد.

    <div class="progress" style="height:20px">
      <div class="progress-bar" style="width:40%;height:20px">40%</div>
    </div>

     

    خروجي كد بالا :

    40%

    رنگ بندي Progress Bar در بوتسترپ :

    رنگ پيشفرض براي Progress Bar در بوتسترپ آبي هستش كه ميتونيد مثل كد زير رنگ اونو تغيير بديد.

    <!-- آبي-->
    <div class="progress">
      <div class="progress-bar" style="width:10%">10%</div>
    </div>

    <!-- سبز-->
    <div class="progress">
      <div class="progress-bar bg-success" style="width:20%">20%</div>
    </div>

    <!-- آبي كمرنگ-->
    <div class="progress">
      <div class="progress-bar bg-info" style="width:30%">30%</div>
    </div>

    <!-- نارنجي-->
    <div class="progress">
       <div class="progress-bar bg-warning" style="width:40%">40%</div>
    </div>

    <!-- قرمز-->
    <div class="progress">
      <div class="progress-bar bg-danger" style="width:50%">50%</div>
    </div>

    <!-- سفيد-->
    <div class="progress border">
      <div class="progress-bar bg-white" style="width:60%">60%</div>
    </div>

    <!-- خاكستري-->
    <div class="progress">
      <div class="progress-bar bg-secondary" style="width:70%">70%</div>
    </div>

    <!--خاكستري روشن-->
    <div class="progress border">
      <div class="progress-bar bg-light" style="width:80%">80%</div>
    </div>

    <!-- خاكستري تيره -->
    <div class="progress">
      <div class="progress-bar bg-dark" style="width:90%">90%</div>
    </div>

    خروجي كد بالا :

    10%
    20%
    30%
    40%
    50%
    60%
    70%
    80%
    90%

    كلاس progress-bar-striped در بوتسترپ :

    براي راه راه كردن progress-bar در بوتسترپ استفاده ميشه.

    <div class="progress">
      <div class="progress-bar progress-bar-striped" style="width:40%">40%</div>
    </div>

    خروجي كد بالا :

    40%

    كلاس progress-bar-animated در بوتسترپ :

    براي انيميشن دادن به progress-bar در بوتسترپ استفاده ميشه.

    <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 40%">40%</div>

    خروجي كد بالا :

    40%

    progress-bar چند بخشي در بوتسترپ :

    براي بخش بندي progress-bar در بوتسترپ از روش زير استفاده ميشه.

    <div class="progress">
      <div class="progress-bar bg-success" style="width:40%">
        سبز
      </div>
      <div class="progress-bar bg-warning" style="width:10%">
        نارنجي
      </div>
      <div class="progress-bar bg-danger" style="width:20%">
        قرمز
      </div>
    </div>

    خروجي كد بالا :

    سبز
    نارنجي
    قرمز

    اگر سوالي داشتيد ميتونيد از بخش نظرات كه پايين هستش سوالتونو بپرسيد

    ممنون بابت وقتي كه براي خوندن مطلب گذاشتيد.



    پيشنهاد ميكنم از مطالب زير نيز استفاده كنيد :

    آموزش DocType در HTML 5

    صفحه بندی در Bootstrap 4

    آموزش کار با Badge در Bootstrap 4

    آموزش کار با Button در Bootstrap 4

    آموزش کار با Alerts در Bootstrap 4

    آموزش کار با Jumbotron در Bootstrap 4

    آموزش کار با جداول در Bootstrap 4

    آموزش استفاده از Tooltip در Bootstrap 4

    آموزش استفاده از تگ video در HTML5

    آموزش كار با تصاوير در Bootstrap 4

    بازدید : 758 دوشنبه 30 مهر 1397 : 10:3 نظرات ()
    ارسال نظر برای این مطلب

    نام
    ایمیل (منتشر نمی‌شود) (لازم)
    وبسایت
    :) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
    نظر خصوصی
    مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
    کد امنیتیرفرش کد امنیتی