W3.CSS تخطيط
مرحبًا W3.CSS تخطيط.
مرحبًا W3.CSS تخطيط.
مرحبًا W3.CSS تخطيط.
مرحبًا W3.CSS تخطيط.
مرحبًا W3.CSS تخطيط.
مرحبًا W3.CSS تخطيط.
فئات تخطيط W3.CSS
قدم W3.CSS الإصدار 2.90 / 2.91 الفئات التالية لتخطيط "يشبه العمود":
| فصل | وصف |
|---|---|
| w3- صف الخلية | حاوية للخلايا (أعمدة). |
| W3- خلية | خلية التخطيط (العمود). |
| w3- أعلى الخلية | يحاذي المحتوى في أعلى خلية (عمود). |
| w3- وسط الخلية | يحاذي المحتوى في الوسط الرأسي لخلية (عمود). |
| w3- الخلية القاع | يحاذي المحتوى أسفل خلية (عمود). |
| w3 موبايل | يضيف استجابة الجوال أولاً إلى خلية (عمود). يعرض العناصر كعناصر حظر على الأجهزة المحمولة. |
تحل فئات التخطيط محل فئات التخطيط المهملة.
يعتبر مصنف التخطيط الجديد أكثر تنوعًا وأسهل في الاستخدام.
يتم سرد فئات التخطيط المهملة في الجزء السفلي من هذه الصفحة.
عناصر كتلة HTML
في الأصل ، يتم عرض عناصر كتلة HTML (مثل عناصر <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 تعريف عناصر الكتلة لعرضها أفقيًا (مثل خلايا الجدول):
مرحبًا W3.CSS تخطيط.
مرحبًا W3.CSS تخطيط.
مثال
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
حاوية التخطيط
صف خلية w3 عبارة عن حاوية للخلايا (أعمدة).
يحدد عرض حاوية صف الخلية w3 العرض الإجمالي لجميع الخلايا المضمنة.
العرض الافتراضي هو 100٪:
مرحبًا W3.CSS تخطيط.
مرحبًا W3.CSS تخطيط.
مثال
<div class="w3-cell-row">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
إذا قمت بتغيير عرض حاوية الخلية ، فسيؤدي ذلك إلى تقليل العرض الإجمالي للخلايا المضمنة:
مرحبًا W3.CSS تخطيط.
مرحبًا W3.CSS تخطيط.
مثال
<div class="w3-cell-row"
style="width:75%">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
خلايا التخطيط ذاتية الضبط
تتميز فئة w3-cell بمعيار ضبط ذاتي مدمج لطيف للغاية. سيتم ضبط العناصر جنبًا إلى جنب تلقائيًا حسب العرض المطلوب:
مرحبًا W3.CSS تخطيط.
مرحبًا W3.CSS تخطيط. مرحبًا W3.CSS تخطيط.
مثال
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout. Hello W3.CSS Layout.</p>
</div>
يتم ضبط خلايا التخطيط على ارتفاع متساوٍ
ستعمل عناصر الخلية W3 جنبًا إلى جنب أيضًا على الضبط الذاتي تلقائيًا لارتفاع متساوٍ:
مرحبًا W3.CSS تخطيط.
مرحبًا W3.CSS تخطيط.
مرحبًا W3.CSS تخطيط.
مرحبًا W3.CSS تخطيط.
مرحبًا W3.CSS تخطيط.
مثال
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-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-mobile استجابة أولى للجوّال لأي عنصر HTML.
عند استخدامه مع w3-cell ، سيعرض أعمدة التخطيط عموديًا على الشاشات الصغيرة / الهواتف المحمولة وأفقياً على الشاشات المتوسطة / الكبيرة.
على الشاشات المتوسطة والكبيرة:
مرحبًا W3.CSS تخطيط.
مرحبًا W3.CSS تخطيط.
مرحبًا W3.CSS تخطيط.
على الشاشات الصغيرة:
مرحبًا W3.CSS تخطيط.
مرحبًا W3.CSS تخطيط.
مرحبًا W3.CSS تخطيط.
مثال
<div class="w3-container w3-red
w3-cell w3-mobile">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell
w3-mobile">
<p>Hello W3.CSS Layout.</p>
</div>
<div
class="w3-container w3-blue w3-cell w3-mobile">
<p>Hello
W3.CSS Layout.</p>
</div>
محاذاة سهلة
تجعل فئة w3-cell من السهل جدًا محاذاة النص.
هناك ثلاث فئات مختلفة من المحاذاة:
- w3-cell-top (افتراضي)
- w3- وسط الخلية
- w3- الخلية القاع
مرحبًا W3.CSS تخطيط.
مرحبًا W3.CSS تخطيط.
مرحبًا W3.CSS تخطيط.
مرحبًا W3.CSS تخطيط.
مرحبًا W3.CSS تخطيط.
مرحبًا W3.CSS تخطيط.
مثال
<div class="w3-container w3-red w3-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-cell
w3-cell-middle">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-blue w3-cell
w3-cell-bottom">
<p>Hello W3.CSS Layout.</p>
</div>
تمد فئة صف الخلية w3 العناصر لتناسب عرض الصفحة:
مرحبًا W3.CSS تخطيط.
مرحبًا W3.CSS تخطيط.
مرحبًا W3.CSS تخطيط.
مرحبًا W3.CSS تخطيط.
مرحبًا W3.CSS تخطيط.
مرحبًا W3.CSS تخطيط.
مثال
<div class="w3-cell-row">
<div class="w3-container w3-red w3-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-cell
w3-cell-middle">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-blue w3-cell
w3-cell-bottom">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
تم إيقاف فئات تخطيط جدول W3.CSS
| w3- تخطيط-حاوية | استخدم w3-cell-row بدلاً من ذلك. |
| w3- تخطيط الصف | |
| w3- تخطيط الخلية | استخدم w3-cell بدلاً من ذلك. |
| w3 التخطيط الأعلى | استخدم w3-cell-top بدلاً من ذلك. |
| w3 التخطيط الأوسط | استخدم w3-cell-middle بدلاً من ذلك. |
| w3- تخطيط القاع | استخدم w3-cell-bottom بدلاً من ذلك. |
| w3 تخطيط العمود | استخدم w3-mobile بدلاً من ذلك. |
ستتم إزالة الفئات المهملة من W3.CSS في الإصدار 4.0.