استخدام LESS مع Bootstrap

قم بتخصيص Bootstrap وتوسيعه باستخدام LESS ، وهو معالج CSS مسبق ، للاستفادة من المتغيرات والمزج وأكثر استخدامًا لبناء CSS الخاص بـ Bootstrap.

لماذا أقل؟

يتكون Bootstrap من LESS في جوهره ، وهي لغة أنماط ديناميكية أنشأها صديقنا العزيز Alexis Sellier . يجعل تطوير CSS المستندة إلى الأنظمة أسرع وأسهل وأكثر متعة.

ما يحتويه؟

كإمتداد لـ CSS ، يتضمن LESS المتغيرات والمزج لمقتطفات التعليمات البرمجية القابلة لإعادة الاستخدام والعمليات للرياضيات البسيطة والتداخل وحتى وظائف الألوان.

يتعلم أكثر

قم بزيارة الموقع الرسمي على http://lesscss.org/ لمعرفة المزيد.

المتغيرات

قد تكون إدارة الألوان وقيم البكسل في CSS نوعًا من الألم ، وعادة ما تكون مليئة بالنسخ واللصق. ليس مع LESS - عيّن الألوان أو قيم البكسل كمتغيرات وقم بتغييرها مرة واحدة.

الخلطات

تلك التصريحات الثلاثة لنصف قطر الحدود التي تحتاج إلى إجرائها في ol 'CSS العادي؟ الآن أصبحوا في سطر واحد بمساعدة mixins ، مقتطفات من التعليمات البرمجية التي يمكنك إعادة استخدامها في أي مكان.

عمليات

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

السقالات والوصلات

`@bodyBackground`	`@white`	لون خلفية الصفحة
`@textColor`	`@grayDark`	لون النص الافتراضي لكامل النص والعناوين والمزيد
`@linkColor`	`#08c`	اللون الافتراضي لنص الارتباط
`@linkColorHover`	`darken(@linkColor, 15%)`	لون التمرير الافتراضي لنص الارتباط

نظام الشبكة

`@gridColumns`	12
`@gridColumnWidth`	60 بكسل
`@gridGutterWidth`	20 بكسل
`@fluidGridColumnWidth`	6.382978723٪
`@fluidGridGutterWidth`	2.127659574٪

الطباعة

`@sansFontFamily`	"Helvetica Neue" ، Helvetica ، Arial ، sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	مينلو ، موناكو ، "Courier New" ، monospace
`@baseFontSize`	13 بكسل	يجب أن يكون بكسل
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18 بكسل	يجب أن يكون بكسل
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

الجداول

`@tableBackground`	`transparent`
`@tableBackgroundAccent`	`#f9f9f9`
`@tableBackgroundHover`	`#f5f5f5`
`@tableBorder`	`ddd`

ألوان تدرج الرمادي

`@black`	# 000
`@grayDarker`	# 222
`@grayDark`	# 333
`@gray`	# 555
`@grayLight`	# 999
`@grayLighter`	#إيييي
`@white`	#fff

ألوان مميزة

`@blue`	# 049cdb
`@green`	# 46a546
`@red`	# 9d261d
`@yellow`	# ffc40d
`@orange`	# f89406
`@pink`	# c3325f
`@purple`	# 7a43b6

عناصر

أزرار

`@btnBackground`	`@white`
`@btnBackgroundHighlight`	`darken(@white, 10%)`
`@btnBorder`	`darken(@white, 20%)`
`@btnPrimaryBackground`	`@linkColor`
`@btnPrimaryBackgroundHighlight`	`spin(@btnPrimaryBackground, 15%)`
`@btnInfoBackground`	`#5bc0de`
`@btnInfoBackgroundHighlight`	`#2f96b4`
`@btnSuccessBackground`	`#62c462`
`@btnSuccessBackgroundHighlight`	`51a351`
`@btnWarningBackground`	`lighten(@orange, 15%)`
`@btnWarningBackgroundHighlight`	`@orange`
`@btnDangerBackground`	`#ee5f5b`
`@btnDangerBackgroundHighlight`	`#bd362f`
`@btnInverseBackground`	`@gray`
`@btnInverseBackgroundHighlight`	`@grayDarker`

نماذج

`@placeholderText`	`@grayLight`
`@inputBackground`	`@white`
`@inputBorder`	`#ccc`
`@inputBorderRadius`	`3px`
`@inputDisabledBackground`	`@grayLighter`
`@formActionsBackground`	`#f5f5f5`

حالات النموذج والتنبيهات

`@warningText`	# c09853
`@warningBackground`	# f3edd2
`@errorText`	# b94a48
`@errorBackground`	# f2dede
`@successText`	# 468847
`@successBackground`	# dff0d8
`@infoText`	# 3a87ad
`@infoBackground`	# d9edf7

نافبار

`@navbarHeight`	40 بكسل
`@navbarBackground`	`@grayDarker`
`@navbarBackgroundHighlight`	`@grayDark`
`@navbarText`	`@grayLight`
`@navbarLinkColor`	`@grayLight`
`@navbarLinkColorHover`	`@white`
`@navbarLinkColorActive`	`@navbarLinkColorHover`
`@navbarLinkBackgroundHover`	`transparent`
`@navbarLinkBackgroundActive`	`@navbarBackground`
`@navbarSearchBackground`	`lighten(@navbarBackground, 25%)`
`@navbarSearchBackgroundFocus`	`@white`
`@navbarSearchBorder`	`darken(@navbarSearchBackground, 30%)`
`@navbarSearchPlaceholderColor`	`#ccc`
`@navbarBrandColor`	`@navbarLinkColor`

هبوط قطرة

`@dropdownBackground`	`@white`
`@dropdownBorder`	`rgba(0,0,0,.2)`
`@dropdownLinkColor`	`@grayDark`
`@dropdownLinkColorHover`	`@white`
`@dropdownLinkBackgroundHover`	`@linkColor`
`@@dropdownDividerTop`	`#e5e5e5`
`@@dropdownDividerBottom`	`@white`

وحدة البطل

`@heroUnitBackground`	`@grayLighter`
`@heroUnitHeadingColor`	`inherit`
`@heroUnitLeadColor`	`inhereit`

حول الخلطات

الخلطات الأساسية

مزيج أساسي هو في الأساس تضمين أو جزء من مقتطف من CSS. لقد تمت كتابتها تمامًا مثل فئة CSS ويمكن استدعاؤها في أي مكان.

. العنصر {
  . clearfix () ؛
}

الخلطات البارامترية

المزيج البارامترى يشبه المزيج الأساسي تمامًا ، ولكنه يقبل أيضًا المعلمات (ومن هنا الاسم) بقيم افتراضية اختيارية.

. العنصر {
  . الحد - نصف القطر ( 4 بكسل ) ؛
}

أضف بنفسك بسهولة

يتم تخزين جميع ملفات mixins الخاصة بـ Bootstrap تقريبًا في mixins.less ، وهو ملف بدون أداة مساعدة رائعة يمكّنك من استخدام مزيج في أي من ملفات .less في مجموعة الأدوات.

لذا ، انطلق واستخدم القائمة الموجودة أو لا تتردد في إضافة ما تريد.

الخلطات المضمنة

خدمات

ميكسين	المعلمات	إستعمال
`.clearfix()`	لا أحد	أضف إلى أي والد لمسح العوامات بداخله
`.tab-focus()`	لا أحد	قم بتطبيق نمط التركيز Webkit ومخطط Firefox المستدير
`.center-block()`	لا أحد	مركز تلقائي لعنصر على مستوى الكتلة باستخدام`margin: auto`
`.ie7-inline-block()`	لا أحد	استخدم بالإضافة إلى العادي `display: inline-block`للحصول على دعم IE7
`.size()`	`@height @width`	اضبط الارتفاع والعرض بسرعة على سطر واحد
`.square()`	`@size`	يبني على `.size()`تعيين العرض والارتفاع بنفس القيمة
`.opacity()`	`@opacity`	تعيين نسبة التعتيم في الأعداد الصحيحة (على سبيل المثال ، "50" أو "75")

نماذج

ميكسين	المعلمات	إستعمال
`.placeholder()`	`@color: @placeholderText`	اضبط `placeholder`لون النص للمدخلات

الطباعة

ميكسين	المعلمات	إستعمال
`#font > #family > .serif()`	لا أحد	اجعل عنصرًا يستخدم مكدس خطوط Serif
`#font > #family > .sans-serif()`	لا أحد	اجعل عنصرًا يستخدم مكدس خطوط sans-serif
`#font > #family > .monospace()`	لا أحد	اجعل عنصرًا يستخدم مكدس خطوط أحادية المسافة
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	يمكنك بسهولة تعيين حجم الخط والوزن والمسافة البادئة
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	عيّن عائلة الخط على serif ، وتحكم في الحجم والوزن والمسافة البادئة
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	عيّن عائلة الخط على sans-serif ، وتحكم في الحجم والوزن والمسافة البادئة
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	عيّن عائلة الخط على مسافة أحادية ، وتحكم في الحجم والوزن والمسافة البادئة

نظام الشبكة

ميكسين	المعلمات	إستعمال
`.container-fixed()`	لا أحد	قم بإنشاء حاوية مركزها أفقيًا للاحتفاظ بالمحتوى الخاص بك
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	قم بإنشاء نظام شبكة بكسل (حاوية ، وصف ، وأعمدة) مع n من الأعمدة ومزراب عرض x بكسل
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	قم بإنشاء نظام شبكة بنسبة n من الأعمدة و x ٪ هامش عريض
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	قم بإنشاء نظام شبكة البكسل `input`للعناصر ، مع مراعاة الحشو والحدود
`.makeColumn`	`@columns: 1, @offset: 0`	تحويل أي `div`إلى عمود شبكة بدون `.span*`الفئات

خصائص CSS3

ميكسين	المعلمات	إستعمال
`.border-radius()`	`@radius`	قم بتدوير زوايا العنصر. يمكن أن تكون قيمة واحدة أو أربع قيم مفصولة بمسافات
`.box-shadow()`	`@shadow`	أضف الظل المسقط إلى عنصر
`.transition()`	`@transition`	إضافة تأثير انتقال CSS3 (على سبيل المثال ، `all .2s linear`)
`.rotate()`	`@degrees`	قم بتدوير عنصر n درجة
`.scale()`	`@ratio`	مقياس عنصر إلى عدد n من حجمه الأصلي
`.translate()`	`@x, @y`	انقل عنصرًا على المستويين x و y
`.background-clip()`	`@clip`	قص خلفية عنصر (مفيد لـ `border-radius`)
`.background-size()`	`@size`	التحكم في حجم صور الخلفية عبر CSS3
`.box-sizing()`	`@boxmodel`	تغيير نموذج الصندوق لعنصر (على سبيل المثال ، `border-box`لعرض كامل `input`)
`.user-select()`	`@select`	التحكم في اختيار المؤشر للنص على الصفحة
`.backface-visibility()`	`@visibility: visible`	منع وميض المحتوى عند استخدام تحويلات CSS ثلاثية الأبعاد
`.resizable()`	`@direction: both`	اجعل أي عنصر يمكن تغيير حجمه في اليمين والأسفل
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	اجعل محتوى أي عنصر يستخدم أعمدة CSS3
`.hyphens()`	`@mode: auto`	واصلة CSS3 عندما تريدها (تشمل `word-wrap: break-word`)

الخلفيات والتدرجات

ميكسين	المعلمات	إستعمال
`#translucent > .background()`	`@color: @white, @alpha: 1`	امنح عنصرًا لون خلفية شفافًا
`#translucent > .border()`	`@color: @white, @alpha: 1`	امنح عنصرًا لون حد شبه شفاف
`#gradient > .vertical()`	`@startColor, @endColor`	قم بإنشاء تدرج خلفية عمودي عبر المستعرضات
`#gradient > .horizontal()`	`@startColor, @endColor`	قم بإنشاء تدرج خلفية أفقي عبر المستعرضات
`#gradient > .directional()`	`@startColor, @endColor, @deg`	قم بإنشاء تدرج خلفية اتجاهي عبر المتصفح
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	قم بإنشاء تدرج خلفية ثلاثي الألوان عبر المتصفح
`#gradient > .radial()`	`@innerColor, @outerColor`	قم بإنشاء تدرج خلفية شعاعي عبر المستعرضات
`#gradient > .striped()`	`@color, @angle`	قم بإنشاء تدرج خلفية مخطط عبر المتصفح
`#gradientBar()`	`@primaryColor, @secondaryColor`	يستخدم للأزرار لتعيين حد متدرج وأغمق قليلاً

ملاحظة: إذا كنت ترسل طلب سحب إلى GitHub باستخدام CSS معدل ، فيجب إعادة ترجمة CSS عبر أي من هذه الطرق.

أدوات للترجمة

العقدة مع makefile

قم بتثبيت مترجم سطر أوامر LESS و JSHint و Recess و uglify-js عالميًا باستخدام npm عن طريق تشغيل الأمر التالي:

$ npm install -g أقل jshint recess uglify-js

بمجرد التثبيت ، قم فقط بتشغيل makeجذر دليل التمهيد الخاص بك وستكون جاهزًا تمامًا.

بالإضافة إلى ذلك ، إذا كان لديك watchr مثبتًا ، فيمكنك تشغيله make watchلإعادة بناء bootstrap تلقائيًا في كل مرة تقوم فيها بتحرير ملف في bootstrap lib (هذا ليس مطلوبًا ، فقط طريقة ملائمة).

سطر الأوامر

قم بتثبيت أداة سطر الأوامر LESS عبر Node وقم بتشغيل الأمر التالي:

lessc $ /less/bootstrap.less> bootstrap.css

تأكد من تضمين --compressهذا الأمر إذا كنت تحاول حفظ بعض البايت!

جافا سكريبت

قم بتنزيل أحدث إصدار من Less.js وقم بتضمين المسار إليه (و Bootstrap) في ملف <head>.

<link rel = "stylesheet / less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" > </script>

لإعادة تجميع ملفات .less ، ما عليك سوى حفظها وإعادة تحميل صفحتك. يقوم Less.js بتجميعها وتخزينها في التخزين المحلي.

تطبيق Mac غير رسمي

يراقب تطبيق Mac غير الرسمي أدلة من ملفات .less ويجمع الكود إلى الملفات المحلية بعد كل حفظ لملف بدون مشاهدة.

إذا كنت ترغب في ذلك ، يمكنك تبديل التفضيلات في التطبيق للتصغير التلقائي والدليل الذي تنتهي به الملفات المترجمة.

بنيت مع أقل

لماذا أقل؟

ما يحتويه؟

يتعلم أكثر

المتغيرات

الخلطات

عمليات

متغيرات Bootstrap متغيرات LESS وقيمها وإرشادات الاستخدام

السقالات والوصلات

نظام الشبكة

الطباعة

الجداول

ألوان تدرج الرمادي

ألوان مميزة

عناصر

أزرار

نماذج

حالات النموذج والتنبيهات

نافبار

هبوط قطرة

وحدة البطل

الخلطات التمهيدية

حول الخلطات

الخلطات الأساسية

الخلطات البارامترية

أضف بنفسك بسهولة

الخلطات المضمنة

خدمات

نماذج

الطباعة

نظام الشبكة

خصائص CSS3

الخلفيات والتدرجات

تجميع Bootstrap مع LESS

أدوات للترجمة

العقدة مع makefile

سطر الأوامر

جافا سكريبت

تطبيق Mac غير رسمي

المزيد من تطبيقات Mac

سحق

CodeKit

بسيط