Bootstrap سان گهٽ استعمال ڪندي

LESS سان بوٽ اسٽريپ کي ترتيب ڏيو ۽ وڌايو ، سي ايس ايس پري پروسيسر، متغيرن جو فائدو وٺڻ لاءِ، ميڪسينس، ۽ وڌيڪ استعمال ڪيو بوٽ اسٽريپ جي سي ايس ايس ٺاهڻ لاءِ.

ڇو گهٽ؟

بوٽ اسٽريپ LESS سان ٺهيل آهي بنيادي طور تي، هڪ متحرڪ اسٽائل شيٽ ٻولي جيڪا اسان جي سٺي دوست، Alexis Sellier پاران ٺاهي وئي آهي . اهو ترقي ڪندڙ سسٽم تي ٻڌل CSS کي تيز، آسان ۽ وڌيڪ مزو ڏئي ٿو.

ڇا شامل آهي؟

CSS جي توسيع جي طور تي، LESS ۾ متغير شامل آهن، ڪوڊ جي ٻيهر استعمال لائق اسنپٽس لاءِ ميڪسين، سادي رياضي لاءِ آپريشن، nesting، ۽ حتي رنگ جا ڪم.

وڌيڪ سکو

گھٽ CSS

وڌيڪ سکڻ لاءِ سرڪاري ويب سائيٽ http://lesscss.org/ تي وڃو.

متغير

CSS ۾ رنگن ۽ پکسل جي قيمتن کي منظم ڪرڻ ۾ ٿورڙو درد ٿي سگھي ٿو، عام طور تي ڪاپي ۽ پيسٽ سان ڀريل. گهٽ سان نه جيتوڻيڪ - رنگن يا پکسل ويلز کي متغير طور تفويض ڪريو ۽ انهن کي هڪ ڀيرو تبديل ڪريو.

ملائيندڙ

اهي ٽي سرحد ريڊيس بيان جيڪي توهان کي باقاعده ol' CSS ۾ ڪرڻ گهرجن؟ ھاڻي اھي ھڪڙي لڪير تي ھيٺ آھن mixins جي مدد سان، ڪوڊ جا ٽڪرا توھان ڪٿي به استعمال ڪري سگھو ٿا.

آپريشنز

پنھنجي گرڊ، اڳواٽ، ۽ وڌيڪ سپر لچڪدار ٺاھيو رياضي تي عملن سان. ضرب ڪريو، ورهايو، شامل ڪريو، ۽ گھٽايو پنھنجي طريقي سان 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 #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 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

جي باري ۾ mixins

بنيادي مرکبات

هڪ بنيادي ميڪسين لازمي طور تي هڪ شامل يا جزوي طور تي CSS جي هڪ ٽڪڙي لاءِ آهي. اهي صرف هڪ CSS ڪلاس وانگر لکيل آهن ۽ ڪٿي به سڏي سگهجن ٿا.

  1. . عنصر {
  2. . صاف فڪس ()؛
  3. }

پيرا ميٽرڪ ميڪس

ھڪڙو پيرا ميٽرڪ ميڪسين ھڪڙو بنيادي ميڪسين وانگر آھي، پر اھو پڻ اختياري ڊفالٽ قدرن سان پيرا ميٽرز (ان ڪري نالو) قبول ڪري ٿو.

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

آساني سان پنهنجو پاڻ کي شامل ڪريو

بوٽ اسٽريپ جون لڳ ڀڳ سڀئي ميڪسينز mixins.less ۾ محفوظ ٿيل آهن، هڪ شاندار افاديت .less فائل جيڪا توهان کي ٽول ڪٽ ۾ موجود .less فائلن مان ڪنهن ۾ به ميڪسين استعمال ڪرڻ جي قابل بڻائي ٿي.

تنهن ڪري، اڳتي وڌو ۽ موجوده استعمال ڪريو يا پنهنجو پاڻ کي شامل ڪرڻ لاء آزاد محسوس ڪريو جيئن توهان کي ضرورت آهي.

شامل ڪيل ميڪس

افاديت

ملائڻ پيرا ميٽرز استعمال
.clearfix() ڪو به ڪنهن به والدين کي شامل ڪريو اندر اندر floats صاف ڪرڻ لاء
.tab-focus() ڪو به لاڳو ڪريو ويب ڪٽ فوڪس انداز ۽ گول فائر فاڪس آئوٽ لائن
.center-block() ڪو به خودڪار مرڪز هڪ بلاڪ-سطح عنصر استعمال ڪنديmargin: auto
.ie7-inline-block() ڪو به display: inline-blockIE7 سپورٽ حاصل ڪرڻ لاء باقاعده کان علاوه استعمال ڪريو
.size() @height @width ھڪڙي لڪير تي اوچائي ۽ چوٽي کي جلدي سيٽ ڪريو
.square() @size ويڪر .size()۽ اوچائي کي ساڳي قدر مقرر ڪرڻ لاءِ ٺاهي ٿو
.opacity() @opacity سيٽ ڪريو، مڪمل انگن ۾، اوپيسيٽي سيڪڙو (مثال طور، "50" يا "75")

فارم

ملائڻ پيرا ميٽرز استعمال
.placeholder() @color: @placeholderText placeholderان پٽن لاءِ متن جو رنگ مقرر ڪريو

ٽائپوگرافي

ملائڻ پيرا ميٽرز استعمال
#font > #family > .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 فونٽ فيملي کي سيرف تي سيٽ ڪريو، ۽ ڪنٽرول سائيز، وزن، ۽ اڳواڻي
#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 ساڄي ۽ تري ۾ ڪنهن به عنصر کي resizable بڻائي
.content-columns() @columnCount, @columnGap: @gridGutterWidth ڪنهن به عنصر جو مواد ٺاهيو CSS3 ڪالمن استعمال ڪريو
.hyphens() @mode: auto CSS3 hyphenation جڏهن توهان چاهيو ٿا (شامل آهي 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، ۽ ugliify-js عالمي سطح تي npm سان ھيٺ ڏنل حڪم هلائڻ سان:

$npm install -g less jshint recess ugliify-js

هڪ دفعو انسٽال ٿيل صرف makeتوهان جي بوٽ اسٽريپ ڊاريڪٽري جي روٽ مان هلايو ۽ توهان سڀ سيٽ آهيو.

اضافي طور تي، جيڪڏهن توهان وٽ واچر نصب ڪيو آهي، توهان هلائي سگهو ٿا make watchبوٽ اسٽريپ خودڪار طريقي سان ٻيهر تعمير ڪيو جڏهن توهان بوٽ اسٽريپ ليب ۾ فائل کي ايڊٽ ڪيو (اهو گهربل ناهي، صرف هڪ سهولت جو طريقو).

ڪمانڊ لائن

انسٽال ڪريو LESS ڪمانڊ لائن ٽول نوڊ ذريعي ۽ ھيٺ ڏنل حڪم ھلايو:

$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 فائل کي محفوظ ڪرڻ کان پوءِ.

جيڪڏھن توھان چاھيو، توھان ترجيحات کي ٽوگل ڪري سگھو ٿا ايپ ۾ خودڪار گھٽائڻ لاءِ ۽ ڪھڙي ڊاريڪٽري ۾ مرتب ٿيل فائلون ختم ٿين ٿيون.

وڌيڪ ميڪ ايپس

ڪڪڙ

Crunch Adobe Air تي ٺهيل هڪ بهترين ڏسندڙ LESS ايڊيٽر ۽ مرتب ڪندڙ آهي.

ڪوڊ ڪٽ

ساڳئي ماڻهوءَ پاران ٺاهيل غير رسمي Mac ايپ، CodeKit هڪ Mac ايپ آهي جيڪا LESS، SASS، Stylus، ۽ CoffeeScript کي گڏ ڪري ٿي.

سادو

ميڪ، لينڪس، ۽ پي سي ايپ ڊريگ ۽ ڊراپ گڏ ڪرڻ لاءِ گھٽ فائلون. پلس، ماخذ ڪوڊ GitHub تي آهي .