صفحه بندی واکنشگرا
کلاسهای Layout در W3.CSS
کلاس های layout در w3.css عناصر HTML را مانند عناصر جدول میکند.
| Class | توضیحات |
|---|---|
| w3-layout-container |
با استفاده از این کلاس یک container برای چیدمان ردیف ها و سلول ها تعریف می شود. |
| w3-layout-row | یک container برای چیدمان سلول ها. |
| w3-layout-cell | عناصر HTML، block را به صورت افقی نمایش میدهد(مانند سلول های جدول) |
| w3-layout-col |
مانند w3-layout-cell عمل میکند تنها واکنشگرا است.(عناصر HTML در صفحه نمایشگرهای کوچک /موبایل به صورت عمودی و در نمایشگرهای متوسط/بزرگ به صورت افقی نمایش میدهد.) |
| w3-layout-top | محتوایHTML در بالای یک سلول قرار میدهد. |
| w3-layout-middle | محتوای HTML در میانه از نظر عمودی در یک سلول قرار میگیرد. |
| w3-layout-bottom | محتوای HTML در پایین یک سلول قرار میدهد. |
عناصرBlock در HTML
عناصر block در HTML به صورت طبیعی به صورت بلاک های عمودی نمایش داده می شوند.(مانند عناصر <p> و <div>):
سلام چیدمانW3.CSS.
سلام چیدمانW3.CSS.
مثال.
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green">
<p>Hello W3.CSS Layout.</p>
</div>
چیدمان سلول ها
کلاس w3-layout-cell عناصر به صورت block را برای نمایش به صورت افقی بازتعریف می کنند(مانند عناصر جدول)
سلام چیدمان W3.CSS
سلام چیدمان W3.CSS .
مثال
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-layout-cell">
<p>Hello W3.CSS Layout.</p>
</div>
چیدمان Container
کلاس w3-layout-container یک container برای سلول ها (ستون ها)در w3.css است.
عرض یک container مربوط به چیدمان را به اندازه عرض کل عناصر چیدمان تعریف کند.
عرض پیش فرض container مربوط به چیدمان 100% است:
سلام چیدمان W3.CSS.
سلام چیدمان w3.CSS.
مثال
<div class="w3-container w3-red w3-layout-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-layout-cell">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
اگر شما اندازه عرض container مربوط به چیدمان را تغییر دهید، اندازه کلی سلول های چیدمان را کمتر میکند:
سلام چیدمان w3.CSS
سلام چیدمان w3.CSS.
مثال
<div class="w3-container w3-red w3-layout-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-layout-cell">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
چیدمان سلول ها به صورت خودکار تنظیم می شوند
کلاسw3-layout-cell یک خود تنظیمی استاندارد درونی بسیار زیبا دارد. عناصر کنار همدیگر به اندازه عرض ( و طول)لازم به صورت اتوماتیک تنظیم میشوند:
سلام چیدمان w3.CSS
سلام چیدمان W3.CSS. سلام چیدمان w3.CSS
مثال
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-layout-cell">
<p>Hello W3.CSS Layout. Hello W3.CSS Layout.</p>
</div>
چیدمان سلول ها به اندازه طول موردنیاز تنظیم میشوند
عناصر w3-layout-cell کنار هم به صورت اتوماتیک ،خود تنظیم به طول مورد نیاز هستند:
سلام چیدمان w3.CSS.
سلام چیدمان w3.CSS
سلام چیدمان w3.CSS
سلام چیدمان w3.CSS
سلام چیدمان w3.CSS
مثال
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-layout-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
چیدمان واکنشگرا
کلاس w3-layout-col ، مانند w3-layout-cell عمل میکند،تنها واکنشگراست. این کلاس ، عناصرHTML را در نمایشگرهای کوچک و موبایل ها به صورت عمودی و درنمایشگرهای بزرگ و متوسط نمایش میدهد:
.سلام چیدمان w3.CSS
سلام چیدمان w3.CSS.
سلام چیدمان w3.CSS.
درنمایشگرهای کوچک:
سلام چیدمان w3.CSS.
سلام چیدمان w3.CSS.
سلام چیدمان w3.CSS.
مثال
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-layout-col">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-blue w3-layout-col">
<p>Hello W3.CSS Layout.</p>
</div>
چیدمان ساده
کلاس w3-layout-cell ،تراز بندی متن را ساده میکند.
سه کلاس ترازبندی متفاوت وجود دارد:
- w3-layout-top (پیشفرض)
- w3-layout-middle
- w3-layout-bottom
سلام چیدمان W3.CSS
سلام چیدمان W3.CSS.
سلام چیدمان W3.CSS.
سلام چیدمان W3.CSS.
سلام چیدمان W3.CSS.
سلام چیدمان W3.CSS.
مثال
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-layout-cell w3-layout-middle">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-blue w3-layout-cell w3-layout-bottom">
<p>Hello W3.CSS Layout.</p>
</div>
کلاس w3-layout-container عناصر را به اندازه صفحه میکند :
مثال
<div class="w3-container w3-red w3-layout-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-layout-cell w3-layout-middle">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-blue w3-layout-cell w3-layout-bottom">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
مرزهای آسان
کلاس w3-layout-container مرزها وفاصله از مرز را به عنصر می افزاید .
سلام چیدمان W3.CSS.
سلام چیدمان w3.CSS.
مثال
<div class="w3-container w3-border w3-layout-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-border w3-layout-cell">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
- نوشته شده توسط زهرا داوودی
- بازدید: 3402
