عرض بطاقات
يوحنا
مهندس معماري ومهندس
| صف مدرسي | يعرف |
|---|---|
| W3-بطاقة | حاوية عن أي محتوى HTML (مع الحدود) |
| W3-بطاقة-2 | حاوية عن أي محتوى HTML (2px الظل يحدها) |
| W3-بطاقة-4 | حاوية عن أي محتوى HTML (4PX الظل يحدها) |
| W3-بطاقة-8 | حاوية عن أي محتوى HTML (8px الظل يحدها) |
| W3-بطاقة-12 | حاوية عن أي محتوى HTML (12px تحدها الظل) |
| W3-بطاقة-16 | حاوية عن أي محتوى HTML (16px تحدها الظل) |
| W3-بطاقة-24 | حاوية عن أي محتوى HTML (24px تحدها الظل) |
بطاقات ملونة
إنشاء بطاقات ورقة تشبه مع الطبقات W3-بطاقة، واستخدام فئة W3-اللون لإضافة اللون:
W3-بطاقة-2
W3-بطاقة-4
W3-بطاقة-8
بطاقة صور
لسان ترول في Hardanger، النرويج
مثال
<div class="w3-card-12">
<img src="img_fjords.jpg"
alt="Norway">
<div class="w3-container w3-center">
<p>The Troll's tongue in Hardanger, Norway</p>
</div>
</div> انها محاولة لنفسك » بطاقة المحتوى
رأس
بعض النصوص .. أبجد هوز دولور الجلوس امات، consectetur adipisicing إيليت، حوار لا tempor eiusmod التحرير incididunt labore آخرون غير مؤلمة ماجنا aliqua. التحرير ENIM إعلان قطرة veniam، quis nostrud exercitation ullamco رقة العمل احترازيا التحرير aliquip السابق عصام commodo consequat.
مثال
<div class="w3-card-4">
<header class="w3-container
w3-blue">
<h1>Header</h1>
</header>
<div class="w3-container">
<p>Lorem ipsum...</p>
<button
class="w3-btn">Button</button>
</div>
<footer class="w3-container
w3-blue">
<h5>Footer</h5>
</footer>
</div> انها محاولة لنفسك » تحوم تأثير
الطبقة W3-تحوم الظل يضيف تأثير الظل على تحوم - وهذا سيجعل أي عنصر تبدو وكأنها بطاقة على الفأرة فوق (نفس النمط كما W3-بطاقة-4).
تحوم فوق لي!
مثال
<div class="w3-green w3-hover-shadow w3-center">
<p>Hover over
me!</p>
</div> انها محاولة لنفسك » المزيد من الأمثلة
طلب صداقة
فلان الفلاني
مثال
<div class="w3-card-8 w3-dark-grey">
<div class="w3-container
w3-center">
<h3>Friend request</h3>
<img src="img_avatar3.png"
alt="Avatar" style="width:80%">
<h5>John
Doe</h5>
<button class="w3-btn w3-green">Accept</button>
<button class="w3-btn w3-red">Decline</button>
</div>
</div> انها محاولة لنفسك » فلان الفلاني
1 طلب صديق جديد
الرئيس التنفيذي لشركة مدارس العزيز. التسويق والإعلان. البحث عن وظيفة جديدة وفرص جديدة.
مثال
<div class="w3-card-4">
<header class="w3-container w3-light-grey">
<h3>John Doe</h3>
</header>
<div
class="w3-container">
<p>1 new friend request</p>
<hr>
<img src="img_avatar3.png" alt="Avatar" class="w3-left w3-circle">
<p>President/CEO at Mighty Schools...</p>
</div>
<button class="w3-btn-block
w3-dark-grey">+ Connect</button>
</div> انها محاولة لنفسك »