أشرطة W3.CSS
قضبان أفقية
الأشرطة الأفقية هي عناصر شائعة لتصميم الويب:
تُستخدم فئة w3-bar لتصميم شريط أفقي:
مثال
<div class="w3-bar w3-green">
<div class="w3-bar-item">London</div>
<div class="w3-bar-item">Paris</div>
<div class="w3-bar-item">Tokyo</div>
</div>
الغرض من فئة عنصر w3-bar-item هو توفير التباعد الصحيح ، والحشو ، والموضع.
قضبان عمودية
الأشرطة العمودية (الأشرطة الجانبية) شائعة أيضًا في تصميم الويب:
تُستخدم فئة w3-bar-block لتصميم شريط عمودي:
مثال
<div class="w3-bar-block w3-green">
<div class="w3-bar-item">London</div>
<div class="w3-bar-item">Paris</div>
<div class="w3-bar-item">Tokyo</div>
</div>
ألوان الشريط
يمكنك استخدام أي لون لتصميم شريط:
مثال
<div class="w3-bar w3-black">
<div class="w3-bar-item">London</div>
<div class="w3-bar-item">Paris</div>
<div class="w3-bar-item">Tokyo</div>
</div>
تحوم الألوان
يمكنك استخدام أي لون تحوم لتصميم شريط:
حرك الماوس فوق عناصر الشريط لرؤية التأثير:
مثال
<div class="w3-bar w3-black">
<div class="w3-bar-item w3-hover-red">London</div>
<div class="w3-bar-item w3-hover-green">Paris</div>
<div class="w3-bar-item w3-hover-blue">Tokyo</div>
</div>
روابط الشريط
يعد توفير التنقل استخدامًا نموذجيًا للأشرطة:
مثال
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-hover-green">London</a>
<a href="#" class="w3-bar-item w3-hover-green">Paris</a>
<a href="#" class="w3-bar-item w3-hover-green">Tokyo</a>
</div>
أزرار شريط
تعتبر فئة w3-button مثالية لتصفيف الروابط في شريط.
حرك الماوس فوق عناصر الشريط لرؤية التأثير:
مثال
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">London</a>
<a href="#" class="w3-bar-item w3-button">Paris</a>
<a href="#" class="w3-bar-item w3-button">Tokyo</a>
</div>
شريط مستجيب
تعتبر فئة w3-mobile مثالية لجعل عناصر الشريط مستجيبة.
قم بتغيير حجم النافذة لرؤية التأثير:
مثال
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button w3-mobile">London</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Paris</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Tokyo</a>
</div>
عناصر شريط محاذاة لليمين
تعتبر فئة w3-right مثالية لجعل عناصر الشريط بمحاذاة اليمين:
مثال
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">London</a>
<a href="#" class="w3-bar-item w3-button">Paris</a>
<a href="#" class="w3-bar-item w3-button w3-right">Tokyo</a>
</div>