الأيونية الشبكة (شبكة)
الأيونية الشبكة (الشبكة) ومعظم أطر أخرى مختلفة، ويستخدم نموذج مربع مرن (مرنة صندوق نموذج). وفي محطة متنقلة، في الأساس معتمدة الهواتف. الصف أسلوب الصف المحدد، على غرار العقيد العمود المحدد.
نفس الشبكة حجم
في الصف مع عناصر النمط في أسلوب إذا قمت بتضمين عمود، سيتم تعيين العقيد لنفس الحجم.
يحتوي على أمثلة أسلوب الصف التالي 5 أسلوب العقيد، كل عرض عمود من 20٪.
<div class="row"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> </div>
يحدد عرض عمود
يمكنك تعيين أحجام العينات لكل عمود في صف واحد. افتراضيا، سيتم تقسيم العمود في متساوية في الحجم. ولكن يمكنك أيضا أن تحدد كنسبة مئوية من عرض العمود (شبكة السلوك 12).
<div class="row"> <div class="col col-50">.col.col-50</div> <div class="col">.col</div> <div class="col">.col</div> </div> <div class="row"> <div class="col col-75">.col.col-75</div> <div class="col">.col</div> </div> <div class="row"> <div class="col">.col</div> <div class="col col-75">.col.col-75</div> </div> <div class="row"> <div class="col">.col</div> <div class="col">.col</div> </div>
ملاحظة: سيتم إضافة أمثلة من كل نمط تلقائيا إلى العقيد الحدود وخلفية رمادية.
وفيما يلي بعض من العمود المحدد اسم نسبة العرض نمط:
| .col 10 | 10٪ |
| .col 20 | 20٪ |
| .col-25 | 25٪ |
| .col-33 | 33.3333٪ |
| .col-50 | 50٪ |
| .col-67 | 66.6666٪ |
| .col-75 | 75٪ |
| .col-80 | 80٪ |
| .col-90 | 90٪ |
هناك تعويض الشبكة
يمكنك تعيين تعويض العمود الأيسر الأمثلة هي على النحو التالي:
<div class="row"> <div class="col col-33 col-offset-33">.col</div> <div class="col">.col</div> </div> <div class="row"> <div class="col col-33">.col</div> <div class="col col-33 col-offset-33">.col</div> </div> <div class="row"> <div class="col col-33 col-offset-67">.col</div> </div>
هنا بعض نسبة تعويض اسم النمط:
| .col إزاحة 10 | 10٪ |
| .col إزاحة-20 | 20٪ |
| .col إزاحة-25 | 25٪ |
| .col إزاحة-33 | 33.3333٪ |
| .col إزاحة-50 | 50٪ |
| .col إزاحة-67 | 66.6666٪ |
| .col إزاحة-75 | 75٪ |
| .col إزاحة-80 | 80٪ |
| .col إزاحة-90 | 90٪ |
صورة انطباق على الشبكة
نموذج الصندوق مرنا يمكن بسهولة تحديد العمود محاذاة طوليا. تضم أعلى محاذاة طوليا، الجزء الأوسط من أسفل، فإنه يمكن تطبيقها على كل صف من الأعمدة، أو العمود المحدد.
سبيل المثال، تعيين آخر واحد يصل محتوى تجريبي لتحسين شبكة المحاذاة الطولية.
<div class="row"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">1<br>2<br>3<br>4</div> </div> <div class="row"> <div class="col col-top">.col</div> <div class="col col-center">.col</div> <div class="col col-bottom">.col</div> <div class="col">1<br>2<br>3<br>4</div> </div> <div class="row row-top"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">1<br>2<br>3<br>4</div> </div> <div class="row row-center"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">1<br>2<br>3<br>4</div> </div> <div class="row row-bottom"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">1<br>2<br>3<br>4</div> </div>
الشبكة تستجيب
الشاشة المحمولة عند التبديل، على سبيل المثال، شاشة أفقي، عمودي الشاشة وهلم جرا. نحن بحاجة لضبط شبكة ليمكن تنفيذها اعتمادا على عرض من حجم التكيف كل صف.
أجهزة مختلفة أسلوب استجابة للطبقة على النحو التالي:
| الفئة المستجيبة | وصف |
| .responsive-SM | أصغر من شاشة الهاتف المحمول عبر |
| .responsive-MD | أقل من الشاشة العمودية المسطحة |
| .responsive-جي | أقل من شاشة أفقية مسطحة |
<div class="row responsive-sm"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> </div>