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

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

ڇو گهٽ؟

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

ڇا شامل آهي؟

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

وڌيڪ سکو

وڌيڪ سکڻ لاءِ سرڪاري ويب سائيٽ 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 ڪلاس وانگر لکيل آهن ۽ ڪٿي به سڏي سگهجن ٿا.

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

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

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

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

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

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

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

شامل ڪيل ميڪس

افاديت

ملائڻ	پيرا ميٽرز	استعمال
`.clearfix()`	ڪو به	ڪنهن به والدين کي شامل ڪريو اندر اندر floats صاف ڪرڻ لاء
`.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()`	ڪو به	هڪ عنصر ٺاهيو هڪ 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 فائل کي محفوظ ڪرڻ کان پوءِ.

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

LESS سان ٺهيل

ڇو گهٽ؟

ڇا شامل آهي؟

وڌيڪ سکو

متغير

ملائيندڙ

آپريشنز

Bootstrap variables LESS variables، انھن جا قدر، ۽ استعمال جون ھدايتون

ڇڪڻ ۽ ڳنڍڻ

گرڊ سسٽم

ٽائپوگرافي

ٽيبل

گراسڪيل رنگ

تلفظ رنگ

اجزاء

بٽڻ

فارم

فارم رياستون ۽ خبرداري

نوبار

ڊراپ ڊائونز

هيرو يونٽ

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

جي باري ۾ mixins

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

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

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

شامل ڪيل ميڪس

افاديت

فارم

ٽائپوگرافي

گرڊ سسٽم

CSS3 ملڪيت

پس منظر ۽ گريجوئيٽ

LESS سان گڏ بوٽ اسٽريپ گڏ ڪرڻ

گڏ ڪرڻ جو اوزار

ميڪ فائل سان نوڊ

ڪمانڊ لائن

جاوا اسڪرپٽ

غير رسمي ميڪ ايپ

وڌيڪ ميڪ ايپس

ڪڪڙ

ڪوڊ ڪٽ

سادو