فئة الحاويات
الطبقة W3-الحاويات هي أهم الطبقات W3.CSS.
يتم استخدام الفئة W3-حاوية لجميع أنواع العناصر الحاوية HTML مثل:
<div> <رأس>، <تذييل>، <المادة>، <القسم>، <اقتباس فقرة>، <شكل>، وأكثر من ذلك.
هذا رأس هو الأخضر.
هذا تذييل أحمر.
هذا المقال هو ضوء رمادي والنص هو اللون البني.
حاويات يوفر المساواة
الطبقة W3-الحاويات هامة لتقديم المساواة:
- هوامش مشتركة
- سائد المشتركة
- اصطفافات عمودية المشتركة
- التحالفات الأفقية المشتركة
- الخطوط المشتركة
- الألوان الشائعة
مثال
<div class="w3-container">
<p>London is the most populous city in the United Kingdom.</p>
</div>
انها محاولة لنفسك » لإضافة اللون، فقط إضافة فئة اللون w3-:
مثال
<div class="w3-container w3-red">
<p>London is the most populous city in the United Kingdom.</p>
</div>
انها محاولة لنفسك » الرؤوس والتذييلات
الطبقة W3-حاوية يمكن استخدامها لأسلوب رأس:
عنوان 1
الطبقة W3-حاوية يمكن استخدامها لأسلوب تذييل:
مثال
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
انها محاولة لنفسك » المقالات والأقسام
الطبقة W3-حاوية يمكن استخدامها لأسلوب <المادة> و <القسم> عناصر هي:
مثال
<article class="w3-container">
<h1>London</h1>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</article>
<section class="w3-container">
<h1>London</h1>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</section>
<div class="w3-container">
<h1>London</h1>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</div> انها محاولة لنفسك »  | العديد من صفحات الويب تستخدم <div> العناصر بدلا من <المادة> و <القسم> العناصر. |
|---|
الملاحظات، لوحات، وأسعار
الطبقة W3-حاوية يمكن استخدامها لعرض جميع أنواع الملاحظات:
مثال
<div class="w3-container w3-pale-blue w3-leftbar w3-border-blue">
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</div> انها محاولة لنفسك » الطبقة W3-حاوية يمكن استخدامها لعرض جميع أنواع لوحات:
لندن هي عاصمة إنجلترا. وهي المدينة الأكثر اكتظاظا بالسكان في المملكة المتحدة، مع المنطقة الحضرية لأكثر من 13 مليون نسمة.
مثال
<div class="w3-container w3-light-grey w3-border">
<p>London is the
most populous city in the United Kingdom,
with a metropolitan area
of over 13 million inhabitants.</p>
</div> انها محاولة لنفسك » الطبقة W3-حاوية يمكن استخدامها لعرض جميع أنواع الاقتباس:
مثال
<div class="w3-container w3-leftbar w3-light-grey">
<p><i>"Make it as simple as possible, but not simpler."</i></p>
<p>Albert Einstein</p>
</div>
انها محاولة لنفسك » انتقل إلى الفصل W3.CSS حدود لمعرفة المزيد حول الملاحظات التي تظهر، والألواح، والاقتباس.
تركيبات
رأس
سيارة هي للسيارات التي تعمل بالطاقة الذاتية عجلات تستخدم للنقل. معظم التعريفات لهذا المصطلح تحدد أن السيارات مصممة لتشغيل في المقام الأول على الطرق. (ويكيبيديا)
المثال باستخدام HTML <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-red">
<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-red">
<h5>Footer</h5>
</footer> انها محاولة لنفسك » حاوية الحشو
الطبقةW3-الحاويات لديها 16px الافتراضي اليسار والحشو الصحيح، وليس أعلى أو أسفل الحشو:
عادة ما لا يكون لديك لتغيير الحشو الافتراضي حاوية، لأن الفقرات وعنوان توفر الهوامش التي سوف محاكاة الحشو.
أنا عنوان 1
أنا فقرة.
مثال
<div class="w3-container w3-blue">
<h1>I am Heading 1</h1>
<p>I am a paragraph.</p>
</div>
انها محاولة لنفسك » حاوية باجتزاء
الطبقةW3-الحاوية ليس لديها أعلى الافتراضي أو الهامش السفلي.
حاويتين سيتم عرض wothout هامش بينهما:
أنا عنوان 1
أنا فقرة.
أنا عنوان 1
أنا فقرة.
الطبقةالقسم W3 يمكن استخدامها لفصل الحاويات.لديها 16px العلوي والهامش السفلي:
أنا عنوان 1
أنا فقرة.
أنا عنوان 1
أنا فقرة.
مثال
<div class="w3-container w3-section w3-blue">
<h1>I am Heading 1</h1>
<p>I am a paragraph.</p>
</div>
<div class="w3-container w3-section
w3-green">
<h1>I am Heading 1</h1>
<p>I am a paragraph.</p>
</div>
انها محاولة لنفسك » إخفاء (إغلاق) حاويات
إخفاء أو إغلاق الحاوية من السهل:
لإغلاق هذه الحاوية، انقر على X في الزاوية اليمنى العليا.
مثال
<div class="w3-container w3-red">
<span class="w3-closebtn" onclick="this.parentElement.style.display='none'">X</span>
<p>To close this container, click on the X in the upper right corner.</p>
</div>
انها محاولة لنفسك » فتح الحاويات
فتح حاويات مغلقة من السهل:
مثال
<div id="id01"class="w3-container w3-margin-top w3-green" style="display:none">
<span onclick="this.parentElement.style.display='none'"
class="w3-closebtn">X</span>
<p>London is the capital city of
England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
انها محاولة لنفسك »