مسج موبايل تخطيط شبكات
يوفر مسج موبايل مجموعة من تخطيطات العمود المغلق القائم. ومع ذلك، لا ينصح تخطيطات العمود عموما على جهاز محمول، وذلك بسبب عرض شاشة الهاتف المحمول ل.
ولكن هناك أوقات كنت ترغب في وضع عناصر أصغر، مثل الأزرار أو علامات التبويب الملاحة، جنبا إلى جنب كما لو كان في جدول. ثم، والأعمدة هي مثالية.
الأعمدة في شبكة هي متساوية العرض (و 100٪ على نطاق واسع في المجموع)، مع عدم وجود border, background, margin أو padding .
هناك خمس شبكات تخطيط التي يمكن استخدامها:
| فئة الشبكة | الأعمدة | عرض العمود | يتوافق مع | مثال |
|---|---|---|---|---|
| ui-grid-solo | 1 | 100% | ui-block-a | Try it |
| ui-grid-a | 2 | 50% / 50% | ui-block-a|b | Try it |
| ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a|b|c | Try it |
| ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a|b|c|d | Try it |
| ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a|b|c|d|e | Try it |
داخل حاوية العمود، يمكن أن عناصر تابعة لديهم درجة ui-block-a|b|c|d|e ، اعتمادا على عدد من الأعمدة. سوف الأعمدة تطفو جنبا إلى جنب.
مثال 1: لواجهة المستخدم الشبكة-فئة (والذي هو تخطيط عمودين)، يجب تحديد اثنين من العناصر التابعة لل ui-block-a و ui-block-b .
مثال 2: للحصول على ui-grid-b (تخطيط ثلاثة أعمدة)، إضافة ثلاثة عناصر الطفل من ui-block-a, ui-block-b و ui-block-c .
تخصيص شبكات
يمكنك تخصيص كتل العمود باستخدام CSS:
مثال
<style>
.ui-block-a, .ui-block-b, .ui-block-c {
background-color: lightgray;
border: 1px solid black;
height:
100px;
font-weight: bold;
text-align: center;
padding: 30px;
}
</style>
انها محاولة لنفسك » يمكنك أيضا تخصيص كتل باستخدام أساليب مضمنة:
<div class="ui-block-a" style="border:1px solid
black;"><span>Text..</span></div>
صفوف متعددة
ومن الممكن أيضا أن يكون لديهم عدة صفوف داخل الأعمدة.
ملاحظة: ui-block-a-class سيخلق دائما خط جديد:
مثال
<div class="ui-grid-b">
<div class="ui-block-a"><span>Some
Text</span></div>
<div class="ui-block-b"><span>Some
Text</span></div>
<div class="ui-block-c"><span>Some
Text</span></div>
<div class="ui-block-a"><span>Some
Text</span></div>
<div class="ui-block-b"><span>Some
Text</span></div>
<div class="ui-block-a"><span>Some
Text</span></div>
</div>
انها محاولة لنفسك » شبكات تستجيب
على الشاشات الصغيرة، فمن غير المستحسن أن يكون أزرار كثيرة جدا مع جنبا إلى جنب النص على صف واحد - كما نص قد تحصل على تقصير.
لشبكات الاستجابة، إضافة فئة واجهة المستخدم استجابة إلى الحاوية: