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

بوټسټریپ د 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 ټولګي په څیر لیکل شوي او هرچیرې بلل کیدی شي.

  1. . عنصر {
  2. . clearfix ();
  3. }

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

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

  1. . عنصر {
  2. . سرحد - شعاع ( 4px
  3. }

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

د بوټسټریپ نږدې ټول مکسینونه په 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 فایل له هر خوندي کولو وروسته محلي فایلونو ته کوډ تالیف کوي.

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

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

کرنچ

کرنچ یو ښه ښکاري لږ ایډیټر او کمپیلر دی چې په Adobe Air کې جوړ شوی.

CodeKit

د غیر رسمي میک ایپ په څیر د ورته سړي لخوا رامینځته شوی ، کوډ کټ یو میک ایپ دی چې LESS ، SASS ، سټیلس ، او کافي سکریپټ تالیف کوي.

ساده

ماک، لینوکس، او د PC ایپ د لږو فایلونو د ډریګ او ډراپ تالیف لپاره. برسیره پردې، د سرچینې کوډ په GitHub کې دی .