سلام دوستان گرامی حالتون چطوره ؟ خوب هستید؟با اموزشی دیگر در زمینه بوت استراپ درخدمت شماهستیم.در این آموزش فراخواهید گرفت که چگونه با استفاده از تویتربوت استرپ برچسب ها و نشان های درون خطی ایجاد کنید.
ایجاد برچسب های درون خطی:
به طور کلی برچسب های درون خطی برای نشان دادن برخی اطلاعات مهم روی صفحات وب به کار می روند از جمله اطلاعاتی مانند یادداشت های مهم، پیام های هشدار و غیره.
زیر به شما نشان خواهد داد که چگونه با استفاده از تویتر بوت استرپ برچسب های درون خطی ایجاد کنید.
مثال:
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
۵۲
۵۳
۵۴
۵۵
۵۶
۵۷
<h1>
Bootstrap heading <span class=”label label-default”>
New
</span>
</h1>
<h2>
Bootstrap heading <span class=”label label-default”>
New
</span>
</h2>
<h3>
Bootstrap heading <span class=”label label-default”>
New
</span>
</h3>
<h4>
Bootstrap heading <span class=”label label-default”>
New
</span>
</h4>
<h5>
Bootstrap heading <span class=”label label-default”>
New
</span>
</h5>
<h6>
Bootstrap heading
<span class=”label label-default”>New</span>
</h6>
خروجی مثال بالا مانند تصویر زیر می باشد:
Bootstrap
برخی گروه های متنی برای تاکید بر روی این برچسب های درون خطی وجود دارند.
مثال:
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
<p>This is a <span class=”label label-default”>Default</span> label.</p>
<p>This is a <span class=”label label-primary”>Primary</span> label.</p>
<p>This is a <span class=”label label-success”>Success</span> label.</p>
<p>This is an <span class=”label label-info”>Info</span> label.</p>
<p>This is an <span class=”label label-warning”>Warning</span> label.</p>
<p>This is an <span class=”label label-danger”>Danger</span> label.</p>
خروجی مثال بالا مانند تصویر زیر خواهد بود:
Bootstrap
ایجاد نشان های درون خطی:
به طور مشابه شما می توانید نشان های درون خطی را برای ارائه ی اطلاعیه های مهم به یوزر ایجاد کنید، اطلاعیه هایی مانند تعداد پیام های دریافت شده یا پیام های خوانده نشده، تعداد درخواست های دوستی و غیره. اینها به طور بسیار متداول در بخش ایمیل یا وب سایت های شبکه های اجتماعی پیدا می شوند.
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
<ul class=”nav nav-pills”>
<li><a href=”/Administrator/“#””>Home</a>
</li><li>
</li><li><a href=”/Administrator/“#””>Profile</a>
</li><li>
</li><li class=”active”><a href=”/Administrator/“#””>Messages <span class=”badge”>24</span></a>
</li><li>
</li><li><a href=”/Administrator/“#””>Notification <span class=”badge”>5</span></a>
</li><li>
</li></ul>
خروجی مثال بالا مانند تصویر زیر خواهد بود:
