متن واکنشگرا
همترازی متون
کلاس های w3-left-align و w3-right-align برای ترازبندی متون مورد استفاده قرار میگیرند.
مثال
<div class="w3-container w3-border w3-large">
<div class="w3-left-align"><p>Left aligned text.</p></div>
<div class="w3-right-align"><p>Right aligned text.</p></div>
</div>
خودتان امتحان کنيد »<div class="w3-left-align"><p>Left aligned text.</p></div>
<div class="w3-right-align"><p>Right aligned text.</p></div>
</div>
عناصر وسط
کلاس w3-center برای وسط چین کردن عناصر استفاده میشود:
مثال
<div class="w3-container w3-center">
<h2>Centered Content</h2>
<img src="/img_car.jpg" alt="car" style="width:80%;max-width:320px">
<p>Some centered text.</p>
</div>
خودتان امتحان کنيد »<h2>Centered Content</h2>
<img src="/img_car.jpg" alt="car" style="width:80%;max-width:320px">
<p>Some centered text.</p>
</div>
متون ضخیم و نازک
کلاس w3-wide متن با فاصله بیشتر ایجاد میکند، درحالی که کلاس w3-slim متن با فاصله کمتر ایجاد میکند(توجه فرمایید که کلاس های این قسمت بیشتر برای زبان انگلیسی کاربرد دارد):
مثال
<p class="w3-wide">The w3-wide class specifies a wider text.</p>
<p class="w3-slim">The w3-slim class specifies a slimmer text.</p>
خودتان امتحان کنيد »<p class="w3-slim">The w3-slim class specifies a slimmer text.</p>
سایه متون
کلاس w3-text-shadowبرای کار با تمام رنگ ها طراحی شده است:
سایه متن
سایه متن
سایه متن
مثال
<div class="w3-panel w3-light-grey">
<h2 class="w3-text-shadow">Text Shadow</h2>
</div>
خودتان امتحان کنيد »<h2 class="w3-text-shadow">Text Shadow</h2>
</div>
وضوح متن
کلاس w3-opacity برای کار با تمام رنگ ها طراحی شده است:
وضوح متن
وضوح متن
وضوح متن
وضوح متن
مثال
<div class="w3-panel w3-pink">
<h2 class="w3-opacity">Text Opacity</h2>
</div>
خودتان امتحان کنيد »<h2 class="w3-opacity">Text Opacity</h2>
</div>
افکت های خاص
وضوح متن + Bold
متن زرد رنگ +سایه + Bold
متن نارنجی+ سایه+ Bold
مثال
<div class="w3-panel w3-pink">
<h1 class="w3-opacity"><b>Text Opacity + Bold</b></h1>
</div>
<div class="w3-panel w3-amber">
<h1 class="w3-text-shadow w3-text-yellow"><b>Yellow Text + Shadow + Bold</b></h1>
</div>
<div class="w3-panel w3-blue">
<h1 class="w3-text-shadow w3-text-orange"><b>Orange Text + Shadow + Bold</b></h1>
</div>
خودتان امتحان کنيد »<h1 class="w3-opacity"><b>Text Opacity + Bold</b></h1>
</div>
<div class="w3-panel w3-amber">
<h1 class="w3-text-shadow w3-text-yellow"><b>Yellow Text + Shadow + Bold</b></h1>
</div>
<div class="w3-panel w3-blue">
<h1 class="w3-text-shadow w3-text-orange"><b>Orange Text + Shadow + Bold</b></h1>
</div>
- نوشته شده توسط زهرا داوودی
- بازدید: 3419
