label ها و Badge ها در بوت استرپ
آموزش بوت استرپ و طراحی سایت واکنش گرا لیبل ها
در این قسمت با کلاسهای مختلف استایل دهی به لیبل ها در بوت استرپ آشنا خواهیم شد. از لیبل ها برای نمایش متن های کوتاه ، عنوان ها ، نکته ها و... استفاده میشود. بوت استرپ برای ایجاد لیبل از کلاس label استفاده میکند. برای ایجاد یک لیبل کافی است یک تگ span در هرکجایی که میخواهید ایجاد کنید و کلاس label را به آن اختصاص دهید.مثال :
کد HTML:
[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]
تصویر کد بالا به صورت زیر است:
http://sypna.ir/Portals/0/EducationP...abels-Demo.JPG
همچنین میتوانید برای نمایش لیبلها با کلاسهای ؛ اطلاعات ، اخطار ، خطر و ... از کلاسهای label-default , label-primary, label-alert, label-success و .. استفاده کنید. در مثال زیر از تمام این کلاسها استفاده شده است:
کد HTML:
[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]
تصویر دموی کد بالا به صورت زیر است:
http://sypna.ir/Portals/0/EducationP...asses-Demo.JPG
آموزش بوت استرپ و طراحی واکنش گرا Badges
در این آموزش با نشان ها یا علامت ها آشنا خواهیم شد. Badge یا نشان همانند لیبل ها هستند و میتوانید ازآنها برای جدا کردن قسمتی از متن در طراحی سایت خود استفاده کنید. تفاوت نشانه ها با لیبل در این است که کناره های نشان ها گردتر از لیبل ها است. از نشان ها میتوانید برای مشخص کردن آیتم های جدید به عنوان مثال خبرها و مقالات جدید ، یا آیتم های خوانده نشده ، تعداد ایتم ها در یک گروه و ... استفاده کنید. برای ایجاد یک نشان میتوانید یک تگ span ایجاد کنید و کلاس badge را به آن اختصاص دهید . در ادامه چند مثال ارائه خواهیم کرد:
استفاده از نشان:
کد HTML:
[LEFT]<a href="#">صندوق ورودی پیام ها <span class="badge">50</span></a>
[/LEFT]
تصویر کد بالا به صورت زیر است:
http://sypna.ir/Portals/0/EducationP...rap-badges.JPG
نشان ها در منو
برای ایجاد نشان ها در منو میتوانید همانند مثال قبل از تگ span به همراه کلاس badge استفاده کنید:
کد HTML:
[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]
تصویر دموی این کد به صورت زیر است:
http://sypna.ir/Portals/0/EducationP...adges-demo.JPG
در قسمت بعد با کلاسهای درشت نمایی یا Jumborton آشنا خواهیم شد. در گروه: کامپوننت های لایه بندی
منبع: طراحی سایت
