تاريخ

في الأيام الأولى لتويتر ، استخدم المهندسون تقريبًا أي مكتبة كانوا على دراية بها لتلبية متطلبات الواجهة الأمامية. بدأ Bootstrap كإجابة على التحديات التي طرحت وسرعان ما تسارع التطور خلال أول Hackweek على تويتر.

بمساعدة وتعليقات العديد من المهندسين في Twitter ، نما Bootstrap بشكل كبير ليشمل ليس فقط الأنماط الأساسية ، ولكن أنماط تصميم الواجهة الأمامية الأكثر أناقة ودائمة.

اقرأ المزيد على dev.twitter.com ›

دعم المتصفح

تم اختبار Bootstrap ودعمه في المتصفحات الحديثة الرئيسية مثل Chrome و Safari و Internet Explorer و Firefox.

• أحدث سفاري
• أحدث جوجل كروم
• Firefox 4+
• Internet Explorer 7+
• أوبرا 11

ما يحتويه

يأتي Bootstrap كاملاً مع قوالب CSS مجمعة وقوالب غير مجمعة ونماذج.

• جميع الملفات الأصلية
• CSS مجمعة ومُصغَّرة بالكامل
• توثيق دليل النمط الكامل
• نموذج صفحة نموذجية (المزيد قريباً)

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

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

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

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

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

تخطيط ثابت

التصميم الافتراضي والبسيط الذي يبلغ عرضه 940 بكسل والمتمركز في أي موقع ويب أو صفحة يتم توفيرها بواسطة شخص واحد <div.container>.

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

تخطيط مرن

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

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

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

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

تعتمد الشبكة المطبعية بأكملها على متغيرين أقل في ملف preboot.less الخاص بنا: @basefontو @baseline. الأول هو حجم الخط الأساسي المستخدم طوال الوقت والثاني هو ارتفاع الخط الأساسي.

نحن نستخدم هذه المتغيرات ، وبعض الرياضيات ، لإنشاء الهوامش ، والحشوات ، وارتفاعات الخطوط لجميع أنواعنا وأكثر.

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> <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.

ملاحظة: لا يزال من المقبول استخدام العلامات في HTML5 <b>وليس <i>من الضروري تنسيقها بخط غامق ومائل ، على التوالي (على الرغم من وجود عنصر دلالي أكثر ، فاستخدمه). <b>يهدف إلى إبراز الكلمات أو العبارات دون نقل أهمية إضافية ، بينما <i>هو في الغالب للصوت والمصطلحات الفنية وما إلى ذلك.

عناوين

يتم <address>استخدام العنصر للحصول على معلومات الاتصال لأقرب سلف ، أو مجموعة العمل بأكملها. إليك كيف تبدو:

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

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

الاختصارات

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

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

<blockquote> <p> <small>

كيف اقتبس

لتضمين اقتباس blockquote ، قم <blockquote>بالالتفاف <p>والعلامات <small>. استخدم <small>العنصر للإشارة إلى مصدرك وستحصل على شرطة em —قبله.

Lorem ipsum dolor sit amet، consectetur adipiscing elit. عدد صحيح موجود في فترة زمنية سابقة.

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

غير مرتب<ul>

• أبجد هوز دولور الجلوس امات
• Consectetur adipiscing النخبة
• عدد صحيح molestie lorem في ماسا
• Facilisis في فترة ما قبل nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • الدهليز laoreet porttitor sem
  • AC tristique Libero volutpat أت
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

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

• أبجد هوز دولور الجلوس امات
• Consectetur adipiscing النخبة
• عدد صحيح molestie lorem في ماسا
• Facilisis في فترة ما قبل nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • الدهليز laoreet porttitor sem
  • AC tristique Libero volutpat أت
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

أمر<ol>

1. أبجد هوز دولور الجلوس امات
2. Consectetur adipiscing النخبة
3. عدد صحيح molestie lorem في ماسا
4. Facilisis في فترة ما قبل nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

وصف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>>> .<tr><th>

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

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

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

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

<جدول>
  ...
</table>

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

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

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

ملاحظة: Zebra-striping هو تحسين تدريجي غير متاح للمتصفحات القديمة مثل IE8 وما دونه.

<table class = "zebra-striped" > 
...
</table>

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

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

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

<script src = "js / jquery / jquery.tablesorter.min.js" > </script> 
<البرنامج النصي > 
  $ ( الوظيفة () { 
    $ ( "table # sortTableExample" ). tableorter ({ sortList : [[ 1 ، 0 ]] })؛  
  }) ؛
</script>
<table class = "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

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

إدخال X-Large

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

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

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

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

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

أزرار

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

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

أزرار المثال

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

مقاسات بديلة

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

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

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

الروابط

أزرار

ما هذا

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

قابل للتخصيص

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

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

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

أقراص وحبوب

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

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

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

<ul 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" > 
  <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" > 
  <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>

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

div.alert-message

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

حظر الرسائل

div.alert-message.block-message

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

وسائط

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

تلميحات الأدوات

تعد Twipsies مفيدة للغاية لمساعدة المستخدم المرتبك وتوجيهه في الاتجاه الصحيح.

بوبوفرز

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

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

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

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

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

<link rel = "stylesheet / less" href = "less / bootstrap.less" media = "all" />    
<script src = "js / less-1.1.3.min.js" > </script> 

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

ما يحتويه

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

المتغيرات

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

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

التعليق

يوفر 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    
    الخلفية - الصورة : خطي - الانحدار ( يسار ، 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   
    الخلفية - الصورة : خطي - الانحدار ( startColor ، endColor ) ؛ // المعيار  
  }
  . الاتجاه ( startColor : # 555 ،endColor: # 333 ،deg: 45 درجة) { 
    ...
  }
  . عمودي - ثلاثة - ألوان ( startColor : # 00b3ee،midColor: # 7a43b6،colorStop: 50٪،endColor: # c3325f) { 
    ...
  }
}

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

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

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