الشبكة الافتراضية

نظام الشبكة الافتراضي المقدم كجزء من Bootstrap هو شبكة ذات 16 عمودًا بعرض 940 بكسل. إنها نكهة لنظام الشبكة 960 الشهير ، ولكن بدون هامش / حشوة إضافية على الجانبين الأيسر والأيمن.

مثال على ترميز الشبكة

كما هو موضح هنا ، يمكن إنشاء تخطيط أساسي باستخدام "عمودين" ، يمتد كل منهما على عدد من الأعمدة الستة عشر التأسيسية التي حددناها كجزء من نظام الشبكة الخاص بنا. انظر الأمثلة أدناه لمزيد من الاختلافات.

<div class = "row"> class = "row" >
  <div class = "span6 عمود" > 
    ...
  </div>
  <div class = "span10 عمود" > 
    ...
  </div>
</div>

تخطيط ثابت

تخطيط حاوية أساسي بعرض 940 بكسل ومركزًا لأي موقع أو صفحة تقريبًا.

<الجسم>
  <div class = "container" > 
    ...
  </div>
</body>

تخطيط مرن

بنية صفحة سائلة أو سائلة مرنة ذات عرضين أدنى وأقصى وشريط جانبي يسار. عظيم للتطبيقات.

<الجسم>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "content" > 
      ...
    </div>
  </div>
</body>

العناوين ونسخة

تسلسل هرمي مطبعي قياسي لهيكلة صفحات الويب الخاصة بك.

h1. عنوان 1

h2. العنوان 2

h3. العنوان 3

h4. العنوان 4

h5. العنوان 5

h6. العنوان 6

فقرة مثال

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes، nascetur ridiculus mus. Nullam id dolor id nibh ultricies Vehiclesicula ut id elit.

عنوان مثال له عنوان فرعي ...

يمكنك أيضًا إضافة عناوين فرعية باستخدام <strong>و<em>

متفرقات عناصر

استخدام التركيز والعناوين والمختصرات

<strong> <em> <address> <abbr>

متى يجب استخدام

يجب استخدام علامات التأكيد ( <strong>و <em>) لإضافة تمييز مرئي بين كلمة أو عبارة والنسخة المحيطة بها. استخدمه للفت <strong>الانتباه القديم البسيط وللفت الانتباه والألقاب.<em>

التأكيد في فقرة

Fusce dapibus ، tellus ac cursus COMMODO ، tortor mauris condimentum nibh ، ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero ، augue pharetra.

عناوين

يتم addressاستخدام العنصر للعناوين - لقد خمنت ذلك! إليك كيف تبدو:

Twitter، Inc.
795 Folsom Ave، Suite 600
San Francisco، CA 94107
P: (123) 456-7890

ملاحظة:address يجب أن ينتهي كل سطر في سطر بفاصل سطر ( <br />) لهيكلة المحتوى بشكل صحيح كما تتم قراءته في الحياة الواقعية دون تطبيق أي أنماط.

الاختصارات

بالنسبة للاختصارات والمختصرات ، استخدم abbrالعلامة ( acronymتم إهمالها في HTML5 ). ضع نموذج الاختصار داخل العلامة وحدد عنوانًا للاسم الكامل.

كتلة الاقتباس

<blockquote> <p> <cite>

تأكد من التفاف blockquoteحولك paragraphوالعلامات cite. عند الاستشهاد بمصدر ، استخدم citeالعنصر. سيبدأ CSS تلقائيًا الاسم بشرطة em (& mdash؛).

Lorem ipsum dolor sit amet، consectetur adipisicing elit، sed do eiusmod tempor incidunt ut labore et dolore magna aliqua ...

الدكتور جوليوس هيبرت

غير مرتب<ul>

• جيريمي بيكسبي
• روبرت دزور
• جوش واشنطن
• انطون كابريسي
• زملائي في الفريق
  • جورج كاستانزا
  • جيري سينفيلد
  • كوزمو كرامر
  • إيلين بنيس
  • رجل جديد
• جون جاكوب
• بول بيرس
• كيفن جارنيت

غير منمق<ul.unstyled>

• جيريمي بيكسبي
• روبرت دزور
• جوش واشنطن
• انطون كابريسي
• زملائي في الفريق
  • جورج كاستانزا
  • جيري سينفيلد
  • كوزمو كرامر
  • إيلين بنيس
  • رجل جديد
• جون جاكوب
• بول بيرس
• كيفن جارنيت

أمر<ol>

1. جيريمي بيكسبي
2. روبرت دزور
3. جوش واشنطن
4. انطون كابريسي
5. زملائي في الفريق
   1. جورج كاستانزا
   2. جيري سينفيلد
   3. كوزمو كرامر
   4. إيلين بنيس
   5. رجل جديد
6. جون جاكوب
7. بول بيرس
8. كيفن جارنيت

وصفdl

قوائم الوصف

قائمة وصف مثالية لتعريف المصطلحات.

يوسمود

الدهليز معرف ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

طاولات البناء

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

تعتبر الجداول رائعة - للعديد من الأشياء. ومع ذلك ، تحتاج الجداول الرائعة إلى القليل من الترميز لتكون مفيدة وقابلة للتطوير وقابلة للقراءة (على مستوى الكود). فيما يلي بعض النصائح للمساعدة.

قم دائمًا بلف رؤوس الأعمدة في theadمثل هذا التسلسل الهرمي thead>> .trth

على غرار رؤوس الأعمدة ، يجب أن يتم تغليف كل محتوى نص الجدول في tbodyالتسلسل الهرمي الخاص بك tbody>> .trtd

مثال: أنماط الجدول الافتراضية

سيتم تصميم جميع الجداول تلقائيًا بالحدود الأساسية فقط لضمان سهولة القراءة والحفاظ على الهيكل. لا حاجة لإضافة فئات أو سمات إضافية.

#	الاسم الاول	الكنية	لغة
1	بعض	واحد	إنجليزي
2	جو	تقسيمة عضلات البطن	إنجليزي
3	ستو	صدمه خفيفه	شفرة

<table class = "common-table"> class = "common-table" >
  ...
</table>

مثال: مخطط حمار وحشي

احصل على القليل من الهوى مع طاولاتك عن طريق إضافة مخطط حمار وحشي - فقط أضف .zebra-stripedالفصل.

#	الاسم الاول	الكنية	لغة
1	بعض	واحد	إنجليزي
2	جو	تقسيمة عضلات البطن	إنجليزي
3	ستو	صدمه خفيفه	شفرة

<table class = "common-table zebra-striped"> class = "مخطط حمار وحشي للطاولة المشتركة" >
...
</table>

مثال: مخطط Zebra-w / TableSorter.js

بأخذ المثال السابق ، نقوم بتحسين فائدة جداولنا من خلال توفير وظائف الفرز عبر jQuery والمكوِّن الإضافي Tablesorter . انقر فوق رأس أي عمود لتغيير الترتيب.

#	الاسم الاول	الكنية	لغة
1	لك	واحد	إنجليزي
2	جو	تقسيمة عضلات البطن	إنجليزي
3	ستو	صدمه خفيفه	شفرة

<script type = "text / javascript" src = "js / jquery / jquery.tablesorter.min.js"> </script> اكتب = "text / javascript" src = "js / jquery / jquery.tablesorter.min.js" > </script> 
<script type = "text / javascript" > 
  $ ( وثيقة ). جاهز ( وظيفة () { 
    $ ( "table # sortTableExample" ). tableorter ( { sortList : [[ 1 ، 0 ]]} )؛   
  }) ؛
</script>
<table class = "common-table zebra-striped" > 
  ...
</table>

الأنماط الافتراضية

يتم إعطاء جميع النماذج أنماطًا افتراضية لتقديمها بطريقة قابلة للقراءة وقابلة للقياس. يتم توفير أنماط لإدخالات النص ، وتحديد القوائم ، ومناطق النص ، وأزرار الاختيار ومربعات الاختيار ، والأزرار.

مثال على أسطورة الشكل

إدخال X-Large

يختار

1 2 3 4 5

يختار

1 2 3 4 5

إدخال غير قابل للتحرير

بعض القيمة هنا

المدخلات المعطلة

إدخال X-Large

مقتطف صغير من نص المساعدة

مثال على أسطورة الشكل

نص مسبق

@

مربع الاختيار المسبق

خانة اختيار ملحقة

إدخال الملف

مثال على أسطورة الشكل

قائمة الخيارات

• الخيار الأول هو هذا وذاك — تأكد من تضمين سبب روعة هذا الخيار
• يمكن أيضًا التحقق من الخيار الثاني وإدراجه في نتائج النموذج
• يمكن أيضًا التحقق من الخيار الثالث وإدراجه في نتائج النموذج - نعم ، لقد خمنت ذلك
• لا يمكن التحقق من الخيار الرابع لأنه معطل.

ملاحظة: تُحيط الملصقات بجميع الخيارات الخاصة بمساحات نقر أكبر بكثير ونموذج أكثر قابلية للاستخدام.

نطاق الموعد

إلى يتم عرض جميع الأوقات بتوقيت المحيط الهادئ (GMT -08: 00).

تيكستاريا

كتلة نص المساعدة لوصف الحقل أعلاه إذا لزم الأمر.

قائمة الخيارات

• الخيار الأول هو هذا وذاك — تأكد من تضمين سبب روعة هذا الخيار
• يمكن أيضًا التحقق من الخيار الثاني وإدراجه في نتائج النموذج

حفظ التغييرات يلغي

أشكال مكدسة

أضف .form-stackedإلى HTML الخاص بالنموذج وستحصل على تسميات أعلى الحقول بدلاً من يسارها. يعمل هذا بشكل رائع إذا كانت النماذج الخاصة بك قصيرة أو لديك عمودين من المدخلات للنماذج الثقيلة.

مثال على أسطورة الشكل

إدخال X-Large

يختار

1 2 3 4 5

مثال على أسطورة الشكل

قائمة الخيارات

• الخيار الأول هو هذا وذاك — تأكد من تضمين سبب روعة هذا الخيار
• يمكن أيضًا التحقق من الخيار الثاني وإدراجه في نتائج النموذج

ملاحظة: تُحيط الملصقات بجميع الخيارات الخاصة بمساحات نقر أكبر بكثير ونموذج أكثر قابلية للاستخدام.

حفظ التغييرات يلغي

أزرار

كمصطلح ، يتم استخدام الأزرار للإجراءات بينما يتم استخدام الروابط للكائنات. على سبيل المثال ، يمكن أن يكون "تنزيل" زرًا ويمكن أن يكون "النشاط الأخير" رابطًا.

يتم تعيين جميع الأزرار بشكل افتراضي على نمط رمادي فاتح ، ولكن .primaryتتوفر فئة زرقاء. بالإضافة إلى ذلك ، فإن دحرجة الأنماط الخاصة بك أمر سهل للغاية.

أزرار المثال

يمكن تطبيق أنماط الأزرار على أي شيء .btnمطبق عليه. عادة سترغب في تطبيق هذه العناصر فقط على a، buttonواختيار input. إليك كيف تبدو:

مقاسات بديلة

يتوهم أزرار أكبر أو أصغر؟ هل لديك في ذلك!

دولة المعوقين

بالنسبة للأزرار غير النشطة أو التي تم تعطيلها بواسطة التطبيق لسبب أو لآخر ، استخدم حالة التعطيل. هذا .disabledللروابط :disabledوالعناصر button.

الروابط

أزرار

ما هذا

شريطنا العلوي عبارة عن شريط ثابت يحتوي على شعار أو اسم موقع ويب والتنقل الأساسي ونموذج البحث.

قابل للتخصيص

جميع العناصر الموجودة بالداخل والشريط العلوي بأكمله اختيارية أيضًا. يمكنك اختيار تضمين شعار / اسم ، والتنقل ، والبحث ، والتنقل الثانوي - أو أي مزيج من ذلك.

وشملت القوائم المنسدلة

كجزء من التنقل الرئيسي ، قمنا بتضمين القدرة على إضافة قوائم منسدلة إلى التنقل الخاص بك. تحقق من التنقل الثانوي أعلاه (المحاذاة إلى اليمين) لترى كيف يتم ذلك.

أقراص وحبوب

قم بإنشاء تنقل ثانوي بسيط باستخدام ملف ul. قم بالتبديل بين علامات التبويب أو الأقراص عن طريق إضافة الفئة المناسبة.

رائعة للأقسام الفرعية للمحتوى مثل صفحات إعدادات الحساب والجداول الزمنية للمستخدم للتبديل بين الصفحات ذات المحتوى المتشابه. متوفر في أنماط مبوبة أو حبوب.

• مسكن
• الملف الشخصي
• رسائل
• إعدادات
• اتصال

<ul class = "tabs"> class = "tabs" >
  <li class = "active" > <a href = ""> الصفحة الرئيسية </a> </li>  
  <li> <a href = ""> الملف الشخصي </a> < /li> 
  <li> <a href = ""> الرسائل </a> < /li> 
  <li> <a href = ""> الإعدادات </a> < /li> 
  <li> <a href = ""> جهة اتصال </a> < /li> 
</ul>

• مسكن
• الملف الشخصي
• رسائل
• إعدادات
• اتصال

<ul class = "pills"> class = "حبوب" >
  <li class = "active" > <a href = ""> الصفحة الرئيسية </a> </li>  
  <li> <a href = ""> الملف الشخصي </a> < /li> 
  <li> <a href = ""> الرسائل </a> < /li> 
  <li> <a href = ""> الإعدادات </a> < /li> 
  <li> <a href = ""> جهة اتصال </a> < /li> 
</ul>

ترقيم الصفحات

ترقيم الصفحات شديد التبسيط وذو تصميم بسيط مستوحى من Rdio. من الصعب تفويت الكتلة الكبيرة ، وقابلة للتطوير بسهولة ، وتوفر مساحات كبيرة للنقر.

<div class = "pagination"> class = "pagination" >
  <ul>
    <li class = "prev تعطيل" > <a href = ""> & larr؛ السابق </a> </li>  
    <li class = "active" > <a href = ""> 1 </a> < /li>  
    <li> <a href = ""> 2 </a> < /li> 
    <li> <a href = ""> 3 </a> < /li> 
    <li> <a href = ""> 4 </a> < /li> 
    <li> <a href = ""> 5 </a> < /li> 
    <li class = "next" > <a href = ""> التالي & rarr؛ </a> </li>  
  </ul>
</div>

تنبيهات أساسية

رسائل من سطر واحد لإبراز الفشل أو الفشل المحتمل أو نجاح إجراء ما. مفيد بشكل خاص للنماذج.

حظر الرسائل

بالنسبة للرسائل التي تتطلب القليل من الشرح ، لدينا تنبيهات نمط الفقرة. هذه مثالية لنشر رسائل خطأ أطول ، وتحذير المستخدم من إجراء معلق ، أو مجرد تقديم معلومات لمزيد من التركيز على الصفحة.

وسائط

تعد الوسائط - مربعات الحوار أو الصناديق المبسطة - رائعة بالنسبة للإجراءات السياقية في المواقف التي يكون فيها من المهم الحفاظ على سياق الخلفية.

بوبوفرز

استخدم العناصر المنبثقة لتوفير معلومات نصية للصفحة دون التأثير على التخطيط.

تم تصميم Bootstrap باستخدام Preboot ، وهو عبارة عن حزمة مفتوحة المصدر من المزيجات والمتغيرات لاستخدامها جنبًا إلى جنب مع Less ، وهو معالج CSS أولي لتطوير الويب بشكل أسرع وأسهل.

اكتشف كيف استخدمنا Preboot في Bootstrap وكيف يمكنك الاستفادة منه إذا اخترت تشغيل Less في مشروعك التالي.

كيفية استخدامها

استخدم هذا الخيار للاستفادة الكاملة من متغيرات Bootstrap ومزجها وتداخلها في CSS عبر جافا سكريبت في متصفحك.

<link rel = "stylesheet / less" type = "text / css" href = "less / bootstrap.less" media = "all" /> rel = "stylesheet / less" type = "text / css" href = "less / bootstrap.less" media = "all" />    
<script type = "text / javascript" src = "js / less-1.0.41.min.js" > </script>  

ألا تشعر بحل .js؟ جرب تطبيق Less Mac أو استخدم Node.js للترجمة عند نشر التعليمات البرمجية الخاصة بك.

ما يحتويه

فيما يلي بعض النقاط البارزة لما يتضمنه Twitter Bootstrap كجزء من Bootstrap. توجه إلى موقع Bootstrap الإلكتروني أو صفحة مشروع Github للتنزيل ومعرفة المزيد.

متغيرات اللون

تعد المتغيرات في Less مثالية للحفاظ على صداع CSS وتحديثه مجانًا. عندما تريد تغيير قيمة لون أو قيمة مستخدمة بشكل متكرر ، قم بتحديثها في مكان واحد وستكون جاهزًا.

// الروابط
linkColor : # 8b59c2 ؛         
LinkColorHover :     darken ( linkColor ، 10 ) ؛ 
// غرايز
@ أسود : # 000 ؛             
grayDark :           تفتيح ( black ، 25 ٪) ؛ 
@ gray :               تفتيح ( @ أسود ، 50 ٪) ؛ 
grayLight :          تفتيح ( @ أسود ، 70 ٪) ؛ 
grayLighter :        تفتيح ( @ أسود ، 90 ٪) ؛ 
@ أبيض : #fff ؛             
// ألوان التمييز
@ أزرق : # 08b5fb ؛              
green : # 46a546 ؛             
@ red : # 9d261d ؛               
yellow : # ffc40d ؛            
@ أورانج : # f89406 ؛            
@ وردي : # c3325f ؛              
@ الأرجواني : # 7a43b6 ؛            
// حدود
@ baseline : 20 بكسل ؛          

التعليق

يوفر Less أيضًا أسلوبًا آخر للتعليق بالإضافة إلى /* ... */بناء جملة CSS العادي.

// هذا تعليق
/ * هذا أيضًا تعليق * /

يمزج حتى wazoo

يتم تضمين Mixins بشكل أساسي أو أجزاء منه لـ CSS ، مما يسمح لك بدمج كتلة من التعليمات البرمجية في واحدة. إنها رائعة لخصائص البائع المسبوقة مثل box-shadowالتدرجات عبر المستعرضات ومجموعات الخطوط والمزيد. يوجد أدناه عينة من الخلطات المضمنة في Bootstrap.

مكدسات الخطوط

# خط {
  . Shorthand ( weight : normal ، size : 14px ، lineHeight : 20px ) {     
    الخط - الحجم : @ الحجم ؛ 
    الخط - الوزن : weight ؛ 
ارتفاع     الخط : lineHeight ؛ _ 
  }
  . sans - serif ( weight : normal ، size : 14px ، lineHeight : 20px ) {     
    الخط - العائلة : "Helvetica Neue" ، Helvetica ، Arial ، sans - serif ؛   
    الخط - الحجم : @ الحجم ؛ 
    الخط - الوزن : weight ؛ 
ارتفاع     الخط : lineHeight ؛ _ 
  }
  . serif ( weight : normal ، size : 14px ، lineHeight : 20px ) {     
    الخط - العائلة : "Georgia" ، Times New Roman ، Times ، sans - serif ؛     
    الخط - الحجم : @ الحجم ؛ 
    الخط - الوزن : weight ؛ 
ارتفاع     الخط : lineHeight ؛ _ 
  }
  . monospace ( weight : normal ، size : 12px ، lineHeight : 20px ) {     
    الخط - العائلة : "Monaco" ، Courier New ، monospace ؛   
    الخط - الحجم : @ الحجم ؛ 
    الخط - الوزن : weight ؛ 
ارتفاع     الخط : lineHeight ؛ _ 
  }
}

التدرجات

#الانحدار {
  . أفقي ( startColor : # 555،endColor: # 333) { 
    الخلفية - اللون : endColor ؛ 
    الخلفية - كرر : كرر - x ؛
    الخلفية - الصورة : - khtml - الانحدار ( خطي ، أعلى اليسار ، أعلى يمين ، من ( startColor ) ، إلى ( endColor )) ؛ // كونكيورر   
    الخلفية - الصورة : - moz - الخطي - التدرج ( يسار ، startColor ، endColor ) ؛ // FF 3.6+    
    الخلفية - الصورة : - ms - الخطي - الانحدار ( يسار ، startColor ، endColor ) ؛ // IE10    
    الخلفية - الصورة : - webkit - التدرج ( خطي ، أعلى اليسار ، أعلى يمين ، لون - توقف ( 0 ٪ ، startColor ) ، لون - توقف ( 100 ٪ ، endColor )) ؛ // Safari 4+ و Chrome 2+    
    الخلفية - الصورة : - webkit - الخطي - الانحدار ( يسار ، startColor ، endColor ) ؛ // Safari 5.1+ و Chrome 10+    
    الخلفية - الصورة : - o - الخطي - الانحدار ( يسار ، startColor ، endColor ) ؛ // أوبرا 11.10    
    - مللي ثانية - عامل التصفية : ٪ ( "progid: DXImageTransform.Microsoft.gradient (startColorstr = '٪ d'، endColorstr = '٪ d'، GradientType = 1)" ، startColor ، endColor )؛ // IE8 +  
    عامل التصفية : e (٪ ( "progid: DXImageTransform.Microsoft.gradient (startColorstr = '٪ d'، endColorstr = '٪ d'، GradientType = 1)" ، startColor ، endColor ))؛ // IE6 & IE7 
    الخلفية - الصورة : خطي - الانحدار ( يسار ، startColor ، endColor ) ؛ // لو قياسي   
  }
  . عمودي ( startColor : # 555 ،endColor: # 333) { 
    الخلفية - اللون : endColor ؛ 
    الخلفية - كرر : كرر - x ؛
    الخلفية - الصورة : - khtml - الانحدار ( خطي ، أعلى اليسار ، أسفل اليسار ، من ( startColor ) ، إلى ( endColor )) ؛ // كونكيورر   
    الخلفية - الصورة : - moz - الخطي - التدرج ( startColor ، endColor ) ؛ // FF 3.6+   
    الخلفية - الصورة : - ms - الخطي - الانحدار ( startColor ، endColor ) ؛ // IE10   
    الخلفية - الصورة : - مجموعة الويب - التدرج ( خطي ، أعلى يسار ، أسفل يسار ، لون - توقف ( 0 ٪ ، @ لون البداية ) ، لون - توقف ( 100 ٪ ، endColor )) ؛ // Safari 4+ و Chrome 2+    
    الخلفية - الصورة : - webkit - الخطي - الانحدار ( startColor ، endColor ) ؛ // Safari 5.1+ و Chrome 10+   
    الخلفية - الصورة : - o - الخطي - الانحدار ( startColor ، endColor ) ؛ // أوبرا 11.10   
    - مللي ثانية - عامل التصفية : ٪ ( "progid: DXImageTransform.Microsoft.gradient (startColorstr = '٪ d'، endColorstr = '٪ d'، GradientType = 0)" ، startColor ، endColor )؛ // IE8 +  
    عامل التصفية : e (٪ ( "progid: DXImageTransform.Microsoft.gradient (startColorstr = '٪ d'، endColorstr = '٪ d'، GradientType = 0)" ، startColor ، endColor ))؛ // IE6 & IE7 
    الخلفية - الصورة : خطي - الانحدار ( startColor ، endColor ) ؛ // المعيار  
  }
  . الاتجاه ( startColor : # 555 ،endColor: # 333 ،deg: 45 درجة) { 
    ...
  }
  . عمودي - ثلاثة - ألوان ( startColor : # 00b3ee ،midColor: # 7a43b6 ،colorStop: 0.5 ،endColor: # c3325f) { 
    ...
  }
}

العمليات ونظام الشبكة

كن خياليًا وقم بإجراء بعض الرياضيات لتوليد مزيج مرن وقوي مثل المزيج أدناه.

// Griditude
gridColumns : 16 ؛       
gridColumnWidth : 40 بكسل ؛   
gridGutterWidth : 20 بكسل ؛   
 
// نظام الشبكة
. حاوية {
  العرض : siteWidth ؛ 
  الهامش : 0 تلقائي ؛  
  . clearfix () ؛
}
. أعمدة ( columnSpan : 1 ) {  
  عرض : مضمنة ؛ 
  تعويم : يسار ؛
  العرض : ( gridColumnWidth * columnSpan ) + ( gridGutterWidth * ( columnSpan - 1 )) ؛         
  الهامش - يسار : gridGutterWidth ؛ 
  &: أول - طفل {
    الهامش - اليسار : 0 ؛ 
  }
}
. offset ( columnOffset : 1 ) {  
  الهامش - يسار : ( gridColumnWidth * columnOffset ) + ( gridGutterWidth * ( columnOffset - 1 )) ! هام .          
}