صفحه بندی واکنشگرا

کلاسهای 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.

مثال.

<div class="w3-container w3-red">
<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 .

مثال

<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>

خودتان امتحان کنيد »

چیدمان Container

کلاس w3-layout-container یک container برای سلول ها (ستون ها)در w3.css است.

عرض یک container مربوط به چیدمان را به اندازه عرض کل عناصر چیدمان تعریف کند.

عرض پیش فرض container مربوط به چیدمان 100% است:

سلام چیدمان W3.CSS.

سلام چیدمان w3.CSS.

مثال

<div class="w3-layout-container">

<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-layout-container" style="width:75%">

<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

مثال

<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. Hello W3.CSS Layout.</p>
</div>

خودتان امتحان کنيد »

چیدمان سلول ها به اندازه طول موردنیاز تنظیم میشوند

عناصر w3-layout-cell کنار هم به صورت اتوماتیک ،خود تنظیم به طول مورد نیاز هستند:

سلام چیدمان 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>
<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.

مثال

<div class="w3-container w3-red w3-layout-col">
<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.

مثال

<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>

خودتان امتحان کنيد »

کلاس w3-layout-container عناصر را به اندازه صفحه میکند :

مثال

<div class="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-layout-container" style="border-spacing:16px">
<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>

خودتان امتحان کنيد »

: نوشته شده توسط زهرا داوودی; بازدید: 3608

برای درج دیدگاه، ابتدا باید وارد بیاموز شوید.