آموزش بج ها در بوت استرپ

4 سال پیش

امتیاز دهید post

آموزش بج ها در بوت استرپ

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش بج ها در بوت استرپ خواهیم پرداخت.

در این فصل در مورد بج بوت استرپ بحث خواهد شد. نشان ها مشابه برچسب ها هستند. تفاوت اصلی این است که گوشه ها گردتر هستند.

نشان ها عمدتا برای برجسته سازی موارد جدید یا خوانده نشده استفاده می شوند. برای استفاده از بج ها ، فقط <span class = “badge”> را به لینک ها ، Navs Bootstrap و موارد دیگر اضافه کنید.

مثال زیر این را نشان می دهد –

&lt;a href = "#"&gt;Mailbox &lt;span class = "badge"&gt;50&lt;/span&gt;&lt;/a&gt;

1	<a href = "#">Mailbox <span class = "badge">50</span></a>

وقتی مورد جدید یا خوانده نشده ای وجود داشته باشد ، بج ها به سادگی از طریق CSS سقوط می کنند: انتخابگر خالی ، به شرطی که محتوایی در آن وجود نداشته باشد.

می توانید بج ها را در حالت فعال استفاده از قرص ها و لیست ها قرار دهید. این را می توانید با قرار دادن <span class = “badge”> در پیوندهای فعال ، همانطور که در مثال زیر نشان داده شده است ، بدست آورید –

&lt;h4&gt;Example for Active State in Pill &lt;/h4&gt;

&lt;ul class = "nav nav-pills"&gt;
   &lt;li class = "active"&gt;&lt;a href = "#"&gt;Home &lt;span class ="badge"&gt;42&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;Profile&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;Messages &lt;span class = "badge"&gt;3&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;br&gt;

&lt;h4&gt;Example for Active State in navigations&lt;/h4&gt;

&lt;ul class = "nav nav-pills nav-stacked" style = "max-width: 260px;"&gt;
   &lt;li class = "active"&gt;
      &lt;a href = "#"&gt;
         &lt;span class = "badge pull-right"&gt;42&lt;/span&gt;
         Home
      &lt;/a&gt;
   &lt;/li&gt;
    
   &lt;li&gt;&lt;a href = "#"&gt;Profile&lt;/a&gt;&lt;/li&gt;
    
   &lt;li&gt;
      &lt;a href = "#"&gt;
         &lt;span class = "badge pull-right"&gt;3&lt;/span&gt;
         Messages
      &lt;/a&gt;
   &lt;/li&gt;
&lt;/ul&gt;

<h4>Example for Active State in Pill </h4>

<li><a href = "#">Profile</a></li>

<li><a href = "#">Messages <span class = "badge">3</span></a></li>

</ul>

<br>

<h4>Example for Active State in navigations</h4>

Home

</a>

</li>

<li><a href = "#">Profile</a></li>

<li>

Messages

</a>

</li>

</ul>

منبع.

لیست جلسات قبل آموزش بوت استرپ

امتیاز دهید post

برچسب ها : آموزش بوت استرپ آموزش طراحی وب سایت

نویسنده مطلب saber

آموزش بج ها در بوت استرپ

آموزش بج ها در بوت استرپ

لیست جلسات قبل آموزش بوت استرپ

دیدگاه شما

بدون دیدگاه

آموزش بج ها در بوت استرپ

لیست جلسات قبل آموزش بوت استرپ

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه