مقدمة W3.CSS (حوض المطبخ)
ألوان W3.CSS
فئات w3-color مستوحاة من الألوان الحديثة المستخدمة في التسويق وعلامات الطريق والملاحظات اللاصقة:
حاويات W3.CSS
تعتبر فئة w3-container هي الأهم في فئات W3.CSS. يوفر المساواة مثل:
- الهوامش المشتركة
- حشوات مشتركة
- محاذاة عمودية مشتركة
- محاذاة أفقية مشتركة
- الخطوط الشائعة
- الألوان الشائعة
تُستخدم فئة الحاوية w3 عادةً مع عناصر حاوية HTML ، مثل:
<div> ، <header> ، <footer> ، <article> ، <section> ، <blockquote> ، <form> ، والمزيد.
هذا رأس
هذه المقالة باللون الرمادي الفاتح والنص بني. هذه المقالة باللون الرمادي الفاتح والنص بني. هذه المقالة باللون الرمادي الفاتح والنص بني. هذه المقالة باللون الرمادي الفاتح والنص بني. هذه المقالة باللون الرمادي الفاتح والنص بني.
هذا تذييل
لوحات W3.CSS والملاحظات والاقتباسات
يمكن لفئة w3-panel عرض جميع أنواع الملاحظات والاقتباسات:
لندن هي المدينة الأكثر اكتظاظًا بالسكان في المملكة المتحدة ، حيث يبلغ عدد سكانها أكثر من 9 ملايين نسمة.
لندن هي المدينة الأكثر اكتظاظًا بالسكان في المملكة المتحدة ، حيث يبلغ عدد سكانها أكثر من 9 ملايين نسمة.
تنبيهات W3.CSS
يمكن أيضًا استخدام فئة اللوحة w3 لجميع أنواع التنبيهات:
خطر!
غالبًا ما يشير اللون الأحمر إلى موقف خطير أو سلبي.
تحذير!
غالبًا ما يشير اللون الأصفر إلى تحذير قد يحتاج إلى الاهتمام.
نجاح!
غالبًا ما يشير اللون الأخضر إلى شيء ناجح أو إيجابي.
معلومات!
غالبًا ما يشير اللون الأزرق إلى تغيير أو إجراء إعلامي محايد.
مثال
<div class="w3-panel w3-yellow">
<h3>Warning!</h3>
<p>Yellow often indicates a warning that might need attention.</p>
</div>
بطاقات W3.CSS
فئات بطاقة w3 مناسبة لكل من الصور والملاحظات:
سيارة
السيارة عبارة عن مركبة آلية ذاتية التشغيل ذات عجلات تستخدم في النقل. تحدد معظم تعريفات المصطلح أن السيارات مصممة للتشغيل بشكل أساسي على الطرق ، وتتسع لجلوس واحد إلى ثمانية أشخاص ، وللحصول على أربع عجلات عادةً.
(ويكيبيديا)
مدهش
جبال الألب الفرنسية
مثال
<div class="w3-card-4">
<img src="img_snowtops.jpg" alt="Alps">
<div class="w3-container w3-center">
<p>French Alps</p>
</div>
</div>
جداول W3.CSS
يمكن لفئات جدول w3 التعامل مع جميع أنواع الجداول:
| الاسم الاول | اسم العائلة | نقاط |
|---|---|---|
| جيل | حداد | 50 |
| حواء | جاكسون | 94 |
| آدم | جونسون | 67 |
| أنجا | تجويف | 100 |
مثال
<table class="w3-table w3-striped w3-border">
قوائم W3.CSS
يمكن لفئة w3-ul التعامل مع جميع أنواع القوائم:
-
مايك
ويب مصمم -
دعم جيل
-
جين
محاسب -
جاك
مستشار
مثال
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
أزرار W3.CSS
توفر فئة w3-button و w3-btn أزرارًا من جميع الأحجام والأنواع.
أزرار عريضة:
أزرار دائرية أو مربعة:
علامات W3.CSS ، والتسميات ، والشارات ، والعلامات
يمكن لفئات w3-tag و w3-شارة عرض جميع أنواع العلامات والتسميات والشارات والعلامات:
2 8 أ ب
جديد تحذير خطر معلومات
تستنشق
تحت الماء
W3.CSS مستجيب
توفر فئات الشبكة المستجيبة استجابة لجميع أنواع الأجهزة: الكمبيوتر الشخصي والكمبيوتر المحمول والكمبيوتر اللوحي والجوال.
1/2
1/2
1/3
1/3
1/3
1/3
2/3
1/4
1/4
1/4
1/4
1/2
1/4
1/4
2/3
1/3
1/1
1/4
1/4
1/2
1/4
1/2
1/4
50 بكسل
راحة
1/4
راحة
100 بكسل
45 بكسل
راحة
يدعم W3.CSS أيضًا شبكة السوائل المتنقلة ذات 12 عمودًا بفئات صغيرة ومتوسطة وكبيرة.
عرض W3.CSS
تتيح لك فئات w3-display عرض عناصر HTML في مواضع محددة:
وسائط W3.CSS
توفر فئة w3- modal حوارًا مشروطًا بلغة HTML خالصة:
صورة مشروطة:
أشرطة تقدم W3.CSS
اقرأ المزيد في W3.CSS Progress Bars
القوائم المنسدلة W3.CSS
توفر فئات w3 المنسدلة قوائم منسدلة:
أكورديون W3.CSS
Read more at W3.CSS Accordions
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Accordion with Images:
French Alps
W3.CSS Tabs
Tabs are perfect for single page web applications, or for web pages capable of displaying different subjects.
London
London is the capital of England.
It is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Tabbed Image Gallery (Click on one of the pictures):
W3.CSS Navigation
The w3-bar class can be used to create a navigation bar:
Navigation bar with input:>
Navigation bar with dropdown:
The w3-sidebar class creates a side navigation:
W3.CSS Pagination
W3.CSS provides simple ways for page pagination.
Slideshows
W3.CSS provide slideshows for cycling through images or other content:
Lightbox
Combine Modals and Slideshows to create a lightbox (modal image gallery):
Nature and sunrise
❮ ❯
W3.CSS Animations
The w3-animate classes provide an easy way to slide and fade in elements:
W3.CSS Images
Styling images in W3CSS is easy:
W3.CSS Effects
Add special effects to any element:
Opacity
Grayscale
Sepia
W3.CSS Input Forms
The w3-input classes are for input forms:
Input Form
Input Form
W3.CSS Filters
Use W3.CSS Filters to search for a specific element inside a list, table, dropdown, etc:
| Name | Country |
|---|---|
| Alfreds Futterkiste | Germany |
| Berglunds snabbkop | Sweden |
| Island Trading | UK |
| Koniglich Essen | Germany |
| Laughing Bacchus Winecellars | Canada |
| Magazzini Alimentari Riuniti | Italy |
| North/South | UK |
| Paris specialites | France |
W3.CSS Fonts
With W3.CSS it is extremely easy to add fonts to a web page:
W3.CSS Tooltips
The w3-tooltip class can display all kinds of tooltips:
Hover over this text! Tooltip content
Hover over this text! Tooltip content
Color Themes
Color themes can easily be added to any web application:
Theme Indigo
Movies 2014
-
Frozen
The response to the animations was ridiculous
-
The Fault in Our Stars
Touching, gripping and genuinely well made
-
The Avengers
A huge success for Marvel and Disney
Theme Teal
Movies 2014
-
Frozen
The response to the animations was ridiculous
-
The Fault in Our Stars
Touching, gripping and genuinely well made
-
The Avengers
A huge success for Marvel and Disney
Color themes are a perfect match for mobile applications.