Info@Afragraphic.ir
0912 22 460 22
خدمات و مطالب آموزشی

آموزش Bootstrap--برچسب ها و مدالها در بوت استرپ(Bootstrap Badges and Labels)

کانون تبلیغاتی افرا گرافیک در نظر دارد به صورت گام به گام bootstrap را به شما عزیزان آموزش دهد. لذا قسمت پانزدهم آموزش در زیر قرار داده شده است.

برچسب ها و مدالها در بوت استرپ(Bootstrap Badges and Labels)                        قسمت نوزدهم

Badges (مدال ها) :

مدال ها شاخص های عددی می باشند که با لینک ها در ارتباط می باشند

به طور مثال تعداد مطالب موجود در یک لینک را نمایش می دهد

برای استفاده از مدال ها کلاس badge. را به خصوصیت کلاس المان <span>  اختصاص می دهیم

<a href="#">News <span class="badge">5</span></a><br>
<a href="#">Comments <span class="badge">10</span></a><br>
<a href="#">Updates <span class="badge">2</span></a>

 

6358430603664670861.png

مدال ها میتوانند کنار المان های دیگر مثل Button نیز استفاده شوند 

<div class="container">

  <h2>Badges on Buttons</h2>

  <button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button>

  <button type="button" class="btn btn-success">Success <span class="badge">3</span></button>   

  <button type="button" class="btn btn-danger">Danger <span class="badge">5</span></button>       

</div>

 

6358430616613111462.png

Labels(بچسب ها) :

برای نشان دادن اطلاعات بیشتر در مورد چیزی می توانیم از برچسب های بوت استرپ استفاده کنیم

برای ایجاد  برچسب ها کلاس label. را می توانیم به همراه یکی از 6 کلاس متنی label-default.labelprimary.label-success.label-info.label-warning یا label-danger. به المان <span>  اضافه می کنیم

<div class="container">

  <h1> <span class="label label-default">Default Label</span> </h1>

  <h2> <span class="label label-primary">Primary Label</span> </h2>

  <h3> <span class="label label-success">Success Label</span> </h3>

  <h4> <span class="label label-info">Info Label</span> </h4>

  <h5> <span class="label label-warning">Warning Label</span> </h5>

  <h6> <span class="label label-danger">Danger Label</span> </h6>

</div>

 

6358430663770408714.png

پایان قسمت نوزدهم

 ادامه آموزش در قسمت نوزدهم و از طریق مطالب آموزشی سایت افراگرافیک - www.afragraphic.ir خواهید دید. 

منبع : https://www.w3schools.com

نظــرات شما

نام :
وب سایت :
ایمیل :
پیغام :  

تمامی حقوق مادی و معنوی این سایت متعلق به شرکت طراحی و چاپ افراگرافیک  می باشد.