سبد (0)

صفحه بندی در W3.CSS

 

کلاس container

کلاس w3-container یک padding  چپ و راست به اندازه  16px  به هر عنصر HTML می افزاید.

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

<div>, <article>, <section>, <header>, <footer>, <form>,   و ....


container ها ویژگی های  مشابه برای عناصر فراهم میکنند

عنصری که شامل کلاس w3-container باشد، ویژگی های زیر برای آن تنظیم خواهد شد:

  • marginهای پیشفرض
  • paddingهای پیشفرض
  • تراز بندی های پیشفرض
  • فونت های پیشفرض
  • رنگ های پیشفرض

تنها لازم است کلاس w3-container را به هر عنصر اضافه کنید تا یک container  با ویژگی های تعیین شده داشته باشید.

مثال

<div class="w3-container">
  <p>The w3-container class is an important w3.CSS class.</p>
</div>
خودتان امتحان کنيد »

برای افزودن رنگ ،کلاس w3-color را اضافه کنید :

مثال

<div class="w3-container w3-red">
  <p>London is the capital city of England.</p>
</div>
خودتان امتحان کنيد »

سربرگ ها و پاصفحه ها (Header/Footer)

کلاس  w3-container میتواند برای سبک دهی به سربرگ ها مورد استفاده قرار گیرد:

مثال

<div class="w3-container w3-teal">
  <h1>Header</h1>
</div>
خودتان امتحان کنيد »

مثال

<header class="w3-container w3-teal">
  <h1>Header</h1>
</header>
خودتان امتحان کنيد »

فرقی میان  عملکرد عناصر <div> و <header>  نمی باشد. البته برای امروزه بیشتر از تگ header برای نمایش سربرگ یک مقاله استفاده می شود.

کلاس w3-container میتواند برای پا صفحه ها نیز مورد استفاده قرار گیرد.

مثال

<div class="w3-container w3-teal">
  <h5>Footer</h5>
  <p>Footer information goes here</p>
</div>
خودتان امتحان کنيد »

مثال

<footer class="w3-container w3-teal">
  <h5>Footer</h5>
  <p>Footer information goes here</p>
</footer>
خودتان امتحان کنيد »

بیشتر صفحات وب  از عناصر <header> و<footer > بجای div استفاده میکنند.


 مقالات و قسمت ها (Article/Section)

کلاس  w3-container میتواند برای سبک دهی به  <section> و <article> نیز مورد استفاده قرار گیرد :

مثال

<div class="w3-container">
  <h2>London</h2>
  <p>London is the most populous city in the United Kingdom,
  with a metropolitan area of over 9 million inhabitants.</p>
</div>

<article class="w3-container">
  <h2>Paris</h2>
  <p>The Paris area is one of the largest population centers in Europe,
  with more than 2 million inhabitants.</p>
</article>

<section class="w3-container">
  <h2>Tokyo</h2>
  <p>Tokyo is the center of the Greater Tokyo Area,
  and the most populous metropolitan area in the world.</p>
</section>
خودتان امتحان کنيد »

بیشتر صفحات وب به جای <article> و <section> از عنصر <div>  استفاده میکنند.


 مثال صفحه وب

مثال  استفاده از عناصر <div>

<div class="w3-container w3-red">
  <h1>Header</h1>
</div>

<img src="/img_car.jpg" alt="Car" style="width:100%">

<div class="w3-container">
  <p>A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</p>
</div>

<div class="w3-container w3-red">
  <h5>Footer</h5>
</div>
خودتان امتحان کنيد »

مثال استفاده از عناصر معنایی HTML

<header class="w3-container w3-teal">
  <h1>Header</h1>
</header>

<img src="/img_car.jpg" alt="Car" style="width:100%">

<article class="w3-container">
  <p>A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</p>
</article>

<footer class="w3-container w3-teal">
  <h5>Footer</h5>
</footer>
خودتان امتحان کنيد »

 فاصله Container

کلاس w3-container یک مقدار padding چپ و راست به اندازه 16px به عنصر میدهد ولی padding  بالا و پایین نمیدهد :

من padding بالا و پایین ندارم.

مثال

<div class="w3-container w3-blue">
I have no top or bottom padding.
</div>
خودتان امتحان کنيد »

به صورت نرمال نیازی به تغییرمقدار padding پیش فرض  عناصر نگهدارنده نیست، زیرا پاراگراف ها و سربرگ ها margin هایی فراهم میکنندکه  padding را شبیه سازی میکند.

من یک سربرگ هستم

مثال

<div class="w3-container w3-blue">
  <h1>I am a Heading</h1>
  <p>I am a paragraph.</p>
</div>
خودتان امتحان کنيد »
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه