شبكة مؤسسة أمثلة
أدناه التي جمعناها بعض الأمثلة من الشبكة المشتركة.
ثلاثة أعمدة متساوية
يوضح هذا المثال كيفية إنشاء ثلاثة أعمدة متساوية (33.3٪ / 33.3٪ / 33.3٪)، والتي تبين ثلاثة أعمدة على المعدات المتوسطة والكبيرة الحجم، التراص التلقائي على أجهزة صغيرة:
أمثلة
<فئة الدرجة = "متوسطة 4 أعمدة" على غرار = "لون الخلفية: أصفر؛">
<P> .medium-4 </ P>
</ div>
<فئة الدرجة = "متوسطة 4 أعمدة" على غرار = "لون الخلفية: الوردي؛">
<P> .medium-4 </ P>
</ div>
<فئة الدرجة = "متوسطة 4 أعمدة" على غرار = "لون الخلفية: أصفر؛">
<P> .medium-4 </ P>
</ div>
</ div>
محاولة »
ثلاثة أعمدة غير المتكافئ
يوضح هذا المثال كيفية إنشاء ثلاثة أعمدة عدم المساواة (25٪ / 50٪ / 25٪)، والتي تبين ثلاثة أعمدة على المعدات المتوسطة والكبيرة الحجم، التراص التلقائي على أجهزة صغيرة:
أمثلة
<فئة الدرجة = "متوسطة 3 أعمدة" على غرار = "لون الخلفية: أصفر؛">
<P> .medium 3 </ P>
</ div>
<فئة الدرجة = "متوسطة 6 أعمدة" على غرار = "لون الخلفية: الوردي؛">
<P> .medium 6 </ P>
</ div>
<فئة الدرجة = "متوسطة 3 أعمدة" على غرار = "لون الخلفية: أصفر؛">
<P> .medium 3 </ P>
</ div>
</ div>
محاولة »
عمودين متساوية
يوضح هذا المثال كيفية إنشاء عمودين متساوية (50٪ / 50٪)، ونسبة الصغيرة والمتوسطة والمعدات الكبيرة هي دائما فوق 50٪ / 50٪:
أمثلة
<div الطبقة = "صغيرة 6 أعمدة" على غرار = "لون الخلفية: أصفر؛">
<P>. الصغيرة-6 </ P>
</ div>
<div الطبقة = "صغيرة 6 أعمدة" على غرار = "لون الخلفية: الوردي؛">
<P>. الصغيرة-6 </ P>
</ div>
</ div>
محاولة »
عمودين غير متكافئة
يوضح هذا المثال كيفية إنشاء عمودين غير المتكافئة (33.3٪ / 66.6٪)، ونسبة الصغيرة والمتوسطة والمعدات الكبيرة هي دائما فوق 33.3٪ / 66.6٪:
أمثلة
<div الطبقة = "الصغيرة 8 أعمدة" على غرار = "لون الخلفية: أصفر؛">
<P>. الصغيرة-8 </ P>
</ div>
<div الطبقة = "الصغيرة 4 أعمدة" على غرار = "لون الخلفية: الوردي؛">
<P>. الصغيرة-4 </ P>
</ div>
</ div>
محاولة »
تعديل ترتيب الأعمدة
باستخدام .small|medium|large-push-* و .small|medium|large-pull-* فئة لتعديل ترتيب الأعمدة:
أمثلة
<div الطبقة = "الصغيرة 4 أعمدة صغيرة-8-دفع" على غرار = "لون الخلفية: أصفر؛">
<P>. الصغيرة-4 .small- 8-دفع </ P>
</ div>
<div الطبقة = "الصغيرة 8 أعمدة صغيرة-4-سحب" على غرار = "لون الخلفية: الوردي؛">
<P>. الصغيرة-8 .small- 4-سحب </ P>
</ div>
</ div>
محاولة »
عمود متداخل
يمكنك استخدام الشبكات المتداخلة (عمود إدراج عمود):
أمثلة
<div الطبقة = "الصغيرة 8 أعمدة">. الصغيرة-8
<فئة الدرجة = "الصف">
<div الطبقة = "الصغيرة 8 أعمدة">. الصغيرة-8 متداخلة
<فئة الدرجة = "الصف">
<div الطبقة = "الصغيرة 8 أعمدة">. الصغيرة-8 متداخلة مرة أخرى </ div>
<div الطبقة = "الصغيرة 4 أعمدة">. الصغيرة-4 </ div>
</ div>
</ div>
<div الطبقة = "الصغيرة 4 أعمدة">. الصغيرة-4 </ div>
</ div>
</ div>
<div الطبقة = "الصغيرة 4 أعمدة">. الصغيرة-4 </ div>
</ div>
محاولة »
مختلطة: المحمول، سطح المكتب،
نظام شبكة مؤسسة على ثلاثة أعمدة: .small-* (الهاتف الخليوي)، .medium-* (شقة)، و .large-* (سطح المكتب). هذه الفئات يمكن استخدامها حيوي في الجمع، وجعل التخطيط أكثر مرونة:
نصيحة: كل فئة يمكن تكبير، إذا كنت ترغب في عرض شاشة الجهاز الصغيرة والكبيرة يمكن أن تكون على النحو المحدد .small-* .
أمثلة
<div الطبقة = "صغيرة 6 اسعة 8 أعمدة">. الصغيرة-6 .large-8 </ div>
<div الطبقة = "صغيرة 6 اسعة 4 أعمدة">. الصغيرة-6 .large-4 </ div>
</ div>
<فئة الدرجة = "الصف">
<div الطبقة = "الصغيرة 2 كبيرة 4 أعمدة">. الصغيرة-2 .large-2 </ div>
<div الطبقة = "الصغيرة 4 كبيرة 4 أعمدة">. الصغيرة-4 .large-2 </ div>
<div الطبقة = "صغيرة 6 اسعة 4 أعمدة">. الصغيرة-6 .large-2 </ div>
</ div>
<فئة الدرجة = "الصف">
<div الطبقة = "صغيرة 3 كبيرة 5 أعمدة">. الصغيرة-3 .large 5 </ div>
<div الطبقة = "صغيرة-9 واسعة 7 أعمدة">. الصغيرة-9 .large-7 </ div>
</ div>
محاولة »
مختلطة: المحمول، والكمبيوتر اللوحية وأجهزة سطح المكتب
أمثلة
<div الطبقة = "متوسطة 6 اسعة 8 أعمدة"> .medium 6 .large-8 </ div>
<div الطبقة = "متوسطة 6 اسعة 4 أعمدة"> .medium 6 .large-4 </ div>
</ div>
<فئة الدرجة = "الصف">
<div الطبقة = "صغيرة 4 متوسطة 3 كبيرة 7-الأعمدة">. الصغيرة-4 .medium 3 .large-7 </ div>
<div الطبقة = "صغيرة 4 متوسطة 6 كبيرة 3-الأعمدة">. الصغيرة-4 .medium 6 .large 3 </ div>
<div الطبقة = "صغيرة 4 متوسطة 3 2 كبيرة الأعمدة">. الصغيرة-4 .medium 3 .large-2 </ div>
</ div>
محاولة »
العمود الأوسط
يمكنك استخدام العمود الأوسط .small-centered الطبقة. المتوسطة والمعدات الكبيرة يمكن أن تكون موروثة تركز الأجهزة الصغيرة، ولكن تحتاج إلى تعيين فئة يتركز على المعدات الكبيرة .large-centered .
أمثلة
<div الطبقة = "الصغيرة 4 أعمدة صغيرة محورها"> صغيرة 4 صغيرة محورها </ div>
</ div>
<فئة الدرجة = "الصف">
<div الطبقة = "صغيرة 6 أعمدة صغيرة محورها"> صغيرة 6 الصغيرة التي تركز </ div>
</ div>
<فئة الدرجة = "الصف">
<div الطبقة = "صغيرة 6 أعمدة كبيرة محورها"> صغيرة 6 الكبيرة التي تركز </ div>
</ div>
<فئة الدرجة = "الصف">
<div الطبقة = "الصغيرة 8 أعمدة كبيرة uncentered صغيرة محورها"> صغيرة 8 الصغيرة التي تركز على نطاق واسع، uncentered </ div>
</ div>
<فئة الدرجة = "الصف">
<div الطبقة = "الصغيرة 10 أعمدة صغيرة محورها"> صغيرة 10 الصغيرة التي تركز </ div>
</ div>
محاولة »
العمود أوفست
يمكنك استخدام .large-offset-* (أو .small-offset-* ) فئة، تعيين العمود إلى اليمين. عدد الأعمدة على الهامش الأيسر للسيطرة على استخدام علامة النجمة:
أمثلة
<div الطبقة = "كبيرة 1 الأعمدة"> 1 </ div>
<فئة الدرجة = "كبيرة 11 الأعمدة"> 11 </ div>
</ div>
<فئة الدرجة = "الصف">
<div الطبقة = "كبيرة 1 الأعمدة"> 1 </ div>
<div الطبقة = "كبيرة 10 كبيرة لموازنة-1 الأعمدة"> 10، ويقابل 1 </ div>
</ div>
<فئة الدرجة = "الصف">
<div الطبقة = "كبيرة 1 الأعمدة"> 1 </ div>
<div الطبقة = "كبيرة 9 كبيرة لموازنة-2 الأعمدة"> 9، ويقابل 2 </ div>
</ div>
<فئة الدرجة = "الصف">
<div الطبقة = "كبيرة 1 الأعمدة"> 1 </ div>
<div الطبقة = "كبيرة 8 كبيرة لموازنة-3 أعمدة"> 8، ويقابل 3 </ div>
</ div>
محاولة »
عمود غير مكتمل
وإذا كان عدد الأعمدة في صف واحد وليس 12، ومؤسسة بشكل تلقائي آخر من تعويم الصحيح، وفارغة لتعبئة الأعمدة المتبقية.
خيارات .end فئة عنصر لمجموعة واحدة الماضي لتعويم الأيسر:
أمثلة
<div الطبقة = "متوسطة 3 أعمدة"> .medium 3 </ div>
<div الطبقة = "متوسطة 3 أعمدة"> .medium 3 </ div>
<div الطبقة = "متوسطة 3 أعمدة"> .medium 3 </ div>
</ div>
<فئة الدرجة = "الصف">
<div الطبقة = "متوسطة 3 أعمدة"> .medium 3 </ div>
<div الطبقة = "متوسطة 3 أعمدة"> .medium 3 </ div>
<فئة الدرجة = "متوسطة 3 أعمدة تنتهي"> .medium 3 .end </ div>
</ div>
عريضة
شبكة ( .row ) الحد الأقصى لحجم (ماكس العرض) هو 62.5rem. على عريضة قد يكون حجم أكبر من 62.5rem، فإن هذا العمود لا يكون ملء كامل الصفحة، حتى إذا تم تعيين العرض إلى 100٪. ولكن يمكننا وضع جديد ماكس العرض عن طريق CSS:
إذا كنت ترغب في استخدام الافتراضي ماكس العرض، ولكن لون الخلفية من بين صفحة كاملة، ثم تستخدمها على عنصر حاوية .row الطبقة، وتحتاج إلى تحديد لون الخلفية:
أمثلة
<فئة الدرجة = "الصف">
<div الطبقة = "صغيرة 6 أعمدة" على غرار = "لون الخلفية: أصفر؛">. الصغيرة-6 </ div>
<div الطبقة = "صغيرة 6 أعمدة" على غرار = "لون الخلفية: الوردي؛">. الصغيرة-6 </ div>
</ div>
</ div>
محاولة »