علامتگذاری واکنشگرا

چاپ

9 6 8 33 66 99


کلاس های نشان درW3.CSS :

W3.CSS  تنها یک کلاس برای نمایش نشان ها دارد:

کلاس تعریف
w3-badge نشان مشکی دایره ای

نشان ها

کلاس w3-badge یک نشان دایره ای ایجاد میکند . رنگ پیش فرض مشکی است.

بروزرسانی ها 9

مثال

<p>Updates <span class="w3-badge">9</span></p>
خودتان امتحان کنيد »

نشان های رنگی

کلاس w3-color برای تغییر رنگ نشان ها استفاده میشود.

اخبار 6نظرات 8

مثال

<p>News <span class="w3-badge w3-green">6</span></p>
<p>Comments <span class="w3-badge w3-red">8</span></p>
خودتان امتحان کنيد »

نشان ها در دکمه ها

کلاس w3-badge میتواند درون دیگر عناصر قرار گیرد:

مثال

<p><button class="w3-btn w3-black">Button
<span class="w3-badge w3-margin-left w3-white">1</span>
</button></p>

<p><button class="w3-btn w3-red">Button
<span class="w3-badge w3-margin-left">2</span>
</button></p>
خودتان امتحان کنيد »

نشان ها در لیست ها

مثال

<ul class="w3-ul">
  <li><span class="w3-badge">1</span> Jill</li>
  <li><span class="w3-badge">2</span> Eve</li>
  <li><span class="w3-badge">3</span> Adam</li>
</ul>
خودتان امتحان کنيد »

کلاس w3-right  یک عنصر را سمت راست قرار میدهد.

این برای لیست ها با نشان ها بسیار مناسب است:

مثال

<ul class="w3-ul w3-border">
  <li>Jill <span class="w3-badge w3-right w3-margin-right">1</span></li>
  <li>Eve <span class="w3-badge w3-right w3-margin-right">2</span></li>
  <li>Adam <span class="w3-badge w3-right w3-margin-right">3</span></li>
</ul>
خودتان امتحان کنيد »

نشان ها در جداول

نام نام خانوادگی نقاط
Jill Smith 50
Eve Jackson 1 94
Adam Johnson 2 67
Bo Nilsson 50
Mike Ross 35

مثال

<tr>
  <td>Eve</td>
  <td>Jackson <span class="w3-badge">1</span></td>
  <td>94</td>
</tr>
<tr>
  <td>Adam</td>
  <td>Johnson <span class="w3-badge">2</span></td>
  <td>67</td>
</tr>
خودتان امتحان کنيد »

اندازه های نشان ها

به صورت پیش فرض یک نشان اندازه اش را از عنصر والدش میگیرد.

کلاسهای  (w3-tiny, w3-small, w3-large, w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-jumbo) برای تغییر اندازه نشان ها استفاده می شود:

6 6 6

66 66 66

66 66

شما میتوانید padding  های زیادتری به نشان های بزرگ بدهید:

مثال

<span class="w3-badge w3-jumbo w3-red">66</span>
<span class="w3-badge w3-jumbo w3-red w3-padding">66</span>
خودتان امتحان کنيد »

 نشان هایUTF-8

از زمانی که html5 ازکاراکترهای utf8 پشتیبانی میکنند. شما میتوانید از  Dingbats برای نشان های دیجیتالی تکی  استفاده کنید:

❶ ❷ ❸ ❹ ❺ ➅ ➆ ➇ ➈ ➉
❶ ❷ ❸ ❹ ❺ ➅ ➆ ➇ ➈ ➉

مثال

<div class="w3-xxlarge">
&#x2776; &#x2777; &#x2778; &#x2779; &#x277A; &#x2785; &#x2786; &#x2787; &#x2788; &#x2789;
</div>

<div class="w3-xxlarge w3-text-red">
&#x2776; &#x2777; &#x2778; &#x2779; &#x277A; &#x2785; &#x2786; &#x2787; &#x2788; &#x2789;
</div>
خودتان امتحان کنيد »