فئات فائدة
بنيت معظم W3.CSS حول المرافق طبقات توفير الحشو، والهوامش، والأحجام، وتحديد المواقع.
فئات الحشو
الطبقاتالحجم W3 padding- تضيف الحشو إلى أي عنصر HTML:
الطبقة W3-الحشو-جامبو يضيف 32px أعلى وأسفل و64px اليسار واليمين.
الطبقة W3-الحشو-xxlarge يضيف 24px أعلى وأسفل و48px اليسار واليمين.
الطبقة W3-الحشو-كسلارغي يضيف 16px أعلى وأسفل و32px اليسار واليمين.
الطبقة W3-الحشو واسع يضيف 12px أعلى وأسفل و24px اليسار واليمين.
وتضيف الطبقة W3-الحشو المتوسطة 8px العلوي والسفلي و16px اليسار واليمين.
الطبقة W3-الحشو الصغيرة يضيف 4PX أعلى وأسفل و8px اليسار واليمين.
الطبقة W3-الحشو-صغير يضيف 2px أعلى وأسفل و4PX اليسار واليمين.
مثال
<div class="w3-container w3-padding-xlarge">
<p>I have 16px top and bottom padding and 32px left and right padding.</p>
</div>
انها محاولة لنفسك » الطبقاتعدد hor- W3-الحشو-يضيف الأفقي (العلوي والسفلي) الحشو إلى أي عنصر HTML:
وتضيف الطبقة W3-الحشو-هور-4 4PX الحشو العلوي والسفلي.
وتضيف الطبقة W3-الحشو-هور-8 8px الحشو العلوي والسفلي.
الطبقة W3-الحشو-هور-16 يضيف 16px العلوي والسفلي الحشو.
الطبقة W3-الحشو-هور-32 يضيف 32px العلوي والسفلي الحشو.
الطبقة W3-الحشو-هور-64 يضيف 64px العلوي والسفلي الحشو.
مثال
<div class="w3-container w3-padding-hor-16">
I have 16px top and bottom padding
</div>
انها محاولة لنفسك » الطبقاتعدد W3-الحشو-ver- يضيف العمودي (اليسار واليمين) الحشو إلى أي عنصر HTML:
يضيف-VER-4 W3-الحشو الطبقة 4PX الحشو اليسار واليمين.
يضيف-VER-8 W3-الحشو الطبقة 8px الحشو اليسار واليمين.
وW3-الحشو-VER-16 درجة يضيف 16X الحشو اليسار واليمين.
وW3-الحشو-VER-32 درجة يضيف 32px الحشو اليسار واليمين.
وتضيف الطبقة W3-الحشو-هور-48 64px الحشو اليسار واليمين.
مثال
<div class="w3-container w3-padding-ver-16">
<p>I have 16px left and right padding</p>
</div>
انها محاولة لنفسك » فئات هامش
الطبقاتW3-هامش إضافة الهوامش إلى عنصر:
وتضيف الطبقة W3-هامش 16px الهامش لجميع الاطراف عنصر.
وتضيف الطبقة W3-هامش القاع والهامش السفلي 16px إلى عنصر.
وW3-هامش يسار الطبقة يضيف 16px ترك هامش للعنصر.
وتضيف الطبقة W3-الهامش الأيمن والهامش الأيمن 16px إلى عنصر.
وتضيف الطبقة W3-هامش قمة بهامش كبير 16px إلى عنصر.
مثال
<div class="w3-container w3-margin">
I have 16px margin on all sides
</div>
انها محاولة لنفسك » التحجيم فئات
الطبقة حجم w3- بتغيير حجم الخط عنصر:
أنا صغيرة (باستخدام-W3 صغيرة)
أنا صغيرة (باستخدام-W3 صغير)
أنا المتوسطة. الافتراضي.
أنا كبيرة (باستخدام-W3 كبير)
أنا كسلارغي (باستخدام W3-كسلارغي)
مثال
<p class="w3-small">I'm small (using w3-small)</p>
<p>I'm medium. The default.</p>
<p class="w3-large">I'm
large (using w3-large)</p>
<p class="w3-xlarge">I'm xlarge (using
w3-xlarge)</p> انها محاولة لنفسك » يمكنك قراءة المزيد حول التحجيم الفئات في الفصل الطباعة W3.CSS .
التقريب فئات
الطبقة الحجم W3 الحبيبات يضيف اعتقلت الحدود لعنصر:
مثال
<div class="w3-round w3-teal w3-padding">Round</div>
<div class="w3-round-large w3-teal w3-padding">Rounder</div>
<div class="w3-round-xlarge w3-teal w3-padding">Rounder</div>
<div class="w3-round-jumbo w3-teal w3-padding">Roundest</div>
انها محاولة لنفسك » فئة الدائرة
فئة مركز
مراكز الطبقة الوسط W3 عنصر:
مثال
<div class="w3-container w3-center w3-green">
<img
class="w3-circle"
src="img_car.jpg" alt="Car">
</div> انها محاولة لنفسك » العائمة فئات
الطبقة يسار W3 يطفو عنصر إلى اليسار، وفئة W3 الصحيح يطفو عنصر إلى اليمين:
مثال
<div class="w3-container w3-light-grey">
<div class="w3-left
w3-red">Float left</div>
<div class="w3-right w3-blue">Float
right</div>
</div> انها محاولة لنفسك » إظهار / إخفاء الطبقات
وW3-مخبأ صغير | المتوسط | فئة كبيرة يخفي عنصرا على حجم الشاشة معين.
ملاحظة: تغيير حجم نافذة المتصفح لفهم كيف يعمل:
مثال
<p class="w3-hide-small">I will be hidden on small screens (phone)</p>
<p class="w3-hide-medium">I will be hidden on medium screens (tablet)</p>
<p class="w3-hide-large">I will be hidden
on large screens (laptop/desktop)</p> انها محاولة لنفسك »