label ها و Badge ها در بوت استرپ

[saeed410]

آموزش بوت استرپ و طراحی سایت واکنش گرا لیبل ها

در این قسمت با کلاسهای مختلف استایل دهی به لیبل ها در بوت استرپ آشنا خواهیم شد. از لیبل ها برای نمایش متن های کوتاه ، عنوان ها ، نکته ها و... استفاده میشود. بوت استرپ برای ایجاد لیبل از کلاس label استفاده میکند. برای ایجاد یک لیبل کافی است یک تگ span در هرکجایی که میخواهید ایجاد کنید و کلاس label را به آن اختصاص دهید.مثال :

  [LEFT]<h1>Example Heading <span class="label label-default">Label</span></h1>
<h2>Example Heading <span class="label label-default">Label</span></h2>
<h3>Example Heading <span class="label label-default">Label</span></h3>
<h4>Example Heading <span class="label label-default">Label</span></h4> [/LEFT]

تصویر کد بالا به صورت زیر است:

همچنین میتوانید برای نمایش لیبلها با کلاسهای ؛ اطلاعات ، اخطار ، خطر و ... از کلاسهای label-default , label-primary, label-alert, label-success و .. استفاده کنید. در مثال زیر از تمام این کلاسها استفاده شده است:

[LEFT]<span class="label label-default">Default Label</span>
<span class="label label-primary">Primary Label</span>
<span class="label label-success">Success Label</span>
<span class="label label-info">Info Label</span>
<span class="label label-warning">Warning Label</span>
<span class="label label-danger">Danger Label</span> 
[/LEFT]

تصویر دموی کد بالا به صورت زیر است:



آموزش بوت استرپ و طراحی واکنش گرا Badges

در این آموزش با نشان ها یا علامت ها آشنا خواهیم شد. Badge یا نشان همانند لیبل ها هستند و میتوانید ازآنها برای جدا کردن قسمتی از متن در طراحی سایت خود استفاده کنید. تفاوت نشانه ها با لیبل در این است که کناره های نشان ها گردتر از لیبل ها است. از نشان ها میتوانید برای مشخص کردن آیتم های جدید به عنوان مثال خبرها و مقالات جدید ، یا آیتم های خوانده نشده ، تعداد ایتم ها در یک گروه و ... استفاده کنید. برای ایجاد یک نشان میتوانید یک تگ span ایجاد کنید و کلاس badge را به آن اختصاص دهید . در ادامه چند مثال ارائه خواهیم کرد:

استفاده از نشان:

 [LEFT]<a href="#">صندوق ورودی پیام ها <span class="badge">50</span></a> 
[/LEFT]

تصویر کد بالا به صورت زیر است:

نشان ها در منو

برای ایجاد نشان ها در منو میتوانید همانند مثال قبل از تگ span به همراه کلاس badge استفاده کنید:

  [LEFT]<h4>مثالی دیگر از نشان </h4>
<ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
   <li class="active">
      <a href="#">
         <span class="badge pull-right">42</span>
         مقالات
      </a>
   </li>
   <li><a href="#">Profile</a></li>
   <li>
      <a href="#">
         <span class="badge pull-right">3</span>
         پیام ها
      </a>
   </li>
</ul> [/LEFT]

تصویر دموی این کد به صورت زیر است:

در قسمت بعد با کلاسهای درشت نمایی یا Jumborton آشنا خواهیم شد. در گروه: کامپوننت های لایه بندی
منبع : طراحی سایت

موضوعات مشابه:

• آموزش صفحه بندی Pagination در بوت استرپ
• آموزش توضیحات بوت لودر سوم تدریس شده در کلاس استاد رحیم پور
• آموزش توضیحات مقدماتی بوت لودر دوم تدریس شده در کلاس استاد رحیم پور
• جلیقه ضد گلوله از ابریشم عنكبوت!
• آموزش توضیحات مقدماتی بوت لودر اول تدرس شده در کلاس استاد رحیم پور