علامتگذاری واکنشگرا
9 6 8 33 66 99
کلاس های نشان درW3.CSS :
W3.CSS تنها یک کلاس برای نمایش نشان ها دارد:
| کلاس | تعریف |
|---|---|
| w3-badge | نشان مشکی دایره ای |
نشان ها
کلاس w3-badge یک نشان دایره ای ایجاد میکند . رنگ پیش فرض مشکی است.
بروزرسانی ها 9
نشان های رنگی
کلاس 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>
خودتان امتحان کنيد »<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>
خودتان امتحان کنيد »<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>
نشان ها در لیست ها
- 1 Jill
- 2 Eve
- 3 Adam
مثال
<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>
خودتان امتحان کنيد »<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 یک عنصر را سمت راست قرار میدهد.
این برای لیست ها با نشان ها بسیار مناسب است:
- Jill1
- Eve2
- Adam3
مثال
<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>
خودتان امتحان کنيد »<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>
خودتان امتحان کنيد »<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>
خودتان امتحان کنيد »<span class="w3-badge w3-jumbo w3-red w3-padding">66</span>
نشان هایUTF-8
از زمانی که html5 ازکاراکترهای utf8 پشتیبانی میکنند. شما میتوانید از Dingbats برای نشان های دیجیتالی تکی استفاده کنید:
❶ ❷ ❸ ❹ ❺ ➅ ➆ ➇ ➈ ➉
❶ ❷ ❸ ❹ ❺ ➅ ➆ ➇ ➈ ➉
مثال
<div class="w3-xxlarge">
❶ ❷ ❸ ❹ ❺ ➅ ➆ ➇ ➈ ➉
</div>
<div class="w3-xxlarge w3-text-red">
❶ ❷ ❸ ❹ ❺ ➅ ➆ ➇ ➈ ➉
</div>
خودتان امتحان کنيد »❶ ❷ ❸ ❹ ❺ ➅ ➆ ➇ ➈ ➉
</div>
<div class="w3-xxlarge w3-text-red">
❶ ❷ ❸ ❹ ❺ ➅ ➆ ➇ ➈ ➉
</div>
- نوشته شده توسط زهرا داوودی
- بازدید: 3253
