د بوټسټریپ سره لږ کارول

بوټسټریپ د LESS سره تنظیم او پراخه کړئ ، د CSS پری پروسیسر ، ترڅو د بوټسټریپ CSS جوړولو لپاره د متغیرونو ، مکسینونو او نورو څخه ګټه پورته کړي.

ولې لږ؟

بوټسټریپ په خپل اصلي برخه کې د LESS سره جوړ شوی ، زموږ د ښه ملګري ، الیکسس سیلیر لخوا رامینځته شوی متحرک سټایل شیټ ژبه . دا د سیسټمونو پراساس CSS ګړندی ، اسانه او ډیر ساتیري رامینځته کوي.

څه پکې شامل دي؟

د CSS د تمدید په توګه، LESS کې متغیرونه، د کوډ د بیا کارونې وړ ټوټې لپاره مکسینونه، د ساده ریاضیاتو لپاره عملیات، ځړول، او حتی د رنګ افعال شامل دي.

نور زده کړئ

د لا زیاتو معلوماتو لپاره http://lesscss.org/ رسمي ویب پاڼه وګورئ .

متغیرات

په CSS کې د رنګونو او پکسل ارزښتونو اداره کول یو څه درد کیدی شي ، معمولا د کاپي او پیسټ څخه ډک وي. که څه هم لږ سره نه - رنګونه یا د پکسل ارزښتونه د متغیر په توګه وټاکئ او یوځل یې بدل کړئ.

مکسین

هغه درې سرحدی ریډیس اعالمیه چې تاسو اړتیا لرئ په منظم ډول CSS کې جوړ کړئ؟ اوس دوی د مکسین په مرسته یوې کرښې ته ښکته شوي، د کوډ ټوټې چې تاسو یې هرچیرې بیا کارولی شئ.

عملیات

د عملیاتو سره په الوتنه کې ریاضی کولو سره خپل گرډ ، مخکښ او ډیر انعطاف وړ کړئ. د CSS هوښیارتیا ته خپل لاره ضرب کړئ، ویشئ، اضافه کړئ او کم کړئ.

سکفولډنګ او لینکونه

`@bodyBackground`	`@white`	د مخ پس منظر رنګ
`@textColor`	`@grayDark`	د ټول بدن، سرلیکونو او نورو لپاره د ډیفالټ متن رنګ
`@linkColor`	`#08c`	د ډیفالټ لینک متن رنګ
`@linkColorHover`	`darken(@linkColor, 15%)`	د ډیفالټ لینک متن هوور رنګ

گرډ سیسټم

`@gridColumns`	12
`@gridColumnWidth`	60px
`@gridGutterWidth`	20px
`@fluidGridColumnWidth`	6.382978723٪
`@fluidGridGutterWidth`	2.127659574٪

ټایپوګرافي

`@sansFontFamily`	"Helvetica Neue"، Helvetica، Arial، sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	مینلو، موناکو، "کوریر نیو"، مونوسپیس
`@baseFontSize`	13px	باید پکسلز وي
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px	باید پکسلز وي
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

میزونه

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

خړ رنګونه

`@black`	#000
`@grayDarker`	#۲۲۲
`@grayDark`	#۳۳۳
`@gray`	#555
`@grayLight`	#۹۹۹
`@grayLighter`	#eeee
`@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`	40px
`@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 ();
}

پارامیټریک مکسونه

د پیرامیټریک مکسین یوازې د لومړني مکسین په څیر دی ، مګر دا د اختیاري ډیفالټ ارزښتونو سره پیرامیټرې (له همدې امله نوم) هم مني.

. عنصر {
  . سرحد - شعاع ( 4px )؛
}

په اسانۍ سره خپل ځان اضافه کړئ

د بوټسټریپ نږدې ټول مکسینونه په mixins.less کې زیرمه شوي دي ، یو په زړه پوری افادیت .less فایل چې تاسو ته دا وړتیا درکوي چې په تولک کټ کې په هر .less فایلونو کې مکسین وکاروئ.

نو، مخکې لاړشئ او موجود یې وکاروئ یا د اړتیا په صورت کې خپل ځان اضافه کړئ.

مخلوط شامل دي

اسانتیاوې

مکسین	پیرامیټونه	کارول
`.clearfix()`	هیڅ نه	په دننه کې د فلوټس پاکولو لپاره کوم پلار ته اضافه کړئ
`.tab-focus()`	هیڅ نه	د ویبکیټ تمرکز سټایل پلي کړئ او د فایرفاکس خاکه ګرد کړئ
`.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()`	هیڅ نه	یو عنصر جوړ کړئ د سیرف فونټ سټیک څخه کار واخلئ
`#font > #family > .sans-serif()`	هیڅ نه	یو عنصر جوړ کړئ د سینز سیرف فونټ سټیک څخه کار واخلئ
`#font > #family > .monospace()`	هیڅ نه	یو عنصر جوړ کړئ د مونوسپیس فونټ سټیک څخه کار واخلئ
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	په اسانۍ سره د فونټ اندازه ، وزن او مخکښ تنظیم کړئ
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	د فونټ کورنۍ سیرف ته تنظیم کړئ، او اندازه، وزن، او مخکښ کنټرول کړئ
`#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 3D بدلونونو کارولو په وخت کې د مینځپانګې د چټلو مخه ونیسئ
`.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`	د تڼیو لپاره د تدریجي او یو څه تیاره سرحد ټاکلو لپاره کارول کیږي

یادونه: که تاسو د بدل شوي CSS سره GitHub ته د پلټ غوښتنه وسپارئ ، نو تاسو باید د دې هرې میتود له لارې CSS بیا تنظیم کړئ.

د راټولولو لپاره وسایل

نوډ د میک فایل سره

د لاندې کمانډ په چلولو سره د LESS کمانډ لاین کمپیلر، JSHint، Recess، او uglify-js په نړیواله کچه د npm سره نصب کړئ:

$ npm install -g less jshint recess ugliify-js

یوځل نصب شو یوازې makeستاسو د بوټسټریپ لارښود له ریښې څخه وګرځئ او تاسو ټول چمتو یاست.

برسیره پردې، که تاسو څارونکی نصب کړی وي، تاسو کولی شئ د بوټسټریپmake watch په اتوماتيک ډول بیا جوړ کړئ هرکله چې تاسو د بوټسټریپ لیب کې فایل ترمیم کړئ (دا اړتیا نلري، یوازې د اسانتیا طریقه).

د قوماندې کرښه

د کمانډ لاین وسیله د نوډ له لارې نصب کړئ او لاندې کمانډ چل کړئ:

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

ډاډ ترلاسه کړئ چې پدې --compressکمانډ کې شامل کړئ که تاسو هڅه کوئ چې ځینې بایټونه خوندي کړئ!

جاوا سکرپٹ

وروستی Less.js ډاونلوډ کړئ او د هغې لپاره لاره (او بوټسټریپ) کې شامل کړئ <head>.

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

د .less فایلونو د بیا تنظیم کولو لپاره، یوازې خوندي کړئ او خپل پاڼه بیا پورته کړئ. Less.js دوی تالیف کوي او په محلي ذخیره کې یې ذخیره کوي.

غیر رسمي میک اپلیکیشن

غیر رسمي میک اپلیکیشن د .less فایلونو لارښودونه ګوري او د کتل شوي .less فایل له هر خوندي کولو وروسته محلي فایلونو ته کوډ تالیف کوي.

که تاسو غواړئ، تاسو کولی شئ په اپلیکیشن کې غوره توبونه د اتوماتیک کمولو لپاره او په کوم ډایرکټر کې چې تالیف شوي فایلونه پای ته رسیږي.

د لږ سره جوړ شوی

ولې لږ؟

څه پکې شامل دي؟

نور زده کړئ

متغیرات

مکسین

عملیات

د بوټسټریپ متغیرات لږ متغیرونه، د دوی ارزښتونه، او د کارونې لارښوونې

سکفولډنګ او لینکونه

گرډ سیسټم

ټایپوګرافي

میزونه

خړ رنګونه

تلفظ رنګونه

اجزا

تڼۍ

فورمې

فارم ریاستونه او خبرتیاوې

نوبار

ښکته کول

د اتل واحد

د بوټسټریپ مکسونه

د مخلوط په اړه

اساسي مخلوطونه

پارامیټریک مکسونه

په اسانۍ سره خپل ځان اضافه کړئ

مخلوط شامل دي

اسانتیاوې

فورمې

ټایپوګرافي

گرډ سیسټم

د CSS3 ملکیتونه

شالید او تدریجي

د کم سره د بوټسټریپ تالیف کول

د راټولولو لپاره وسایل

نوډ د میک فایل سره

د قوماندې کرښه

جاوا سکرپٹ

غیر رسمي میک اپلیکیشن

د ماک نور اطلاقات

کرنچ

CodeKit

ساده