ولادت حضرت معصومه (س) و روز دختر مبارک، (کد تخفیف 35%: rozedokhtar)

سبد خرید (0)

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

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

مثال.

<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

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

مثال

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

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

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

سلام چیدمان 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>
خودتان امتحان کنيد »