بوٹسٹریپ کے ساتھ کم استعمال کرنا

بوٹسٹریپ کی سی ایس ایس بنانے کے لیے استعمال ہونے والے متغیرات، مکسنس اور مزید کا فائدہ اٹھانے کے لیے LESS ، ایک CSS پری پروسیسر کے ساتھ بوٹسٹریپ کو حسب ضرورت بنائیں اور بڑھا دیں۔

کیوں کم؟

بوٹسٹریپ کو اس کے بنیادی حصے میں LESS کے ساتھ بنایا گیا ہے، یہ ایک متحرک اسٹائل شیٹ زبان ہے جسے ہمارے اچھے دوست، Alexis Sellier نے بنایا ہے۔ یہ ڈیولپنگ سسٹم پر مبنی CSS کو تیز تر، آسان اور مزید تفریحی بناتا ہے۔

کیا شامل ہے؟

CSS کی توسیع کے طور پر، LESS میں متغیرات، کوڈ کے دوبارہ قابل استعمال ٹکڑوں کے لیے مکسز، سادہ ریاضی کے لیے آپریشنز، نیسٹنگ، اور یہاں تک کہ رنگ کے افعال شامل ہیں۔

اورجانیے

مزید جاننے کے لیے سرکاری ویب سائٹ http://lesscss.org/ پر جائیں۔

متغیرات

CSS میں رنگوں اور پکسل کی قدروں کا نظم کرنا تھوڑا سا تکلیف دہ ہوسکتا ہے، عام طور پر کاپی اور پیسٹ سے بھرا ہوتا ہے۔ اگرچہ کم کے ساتھ نہیں — رنگوں یا پکسل کی قدروں کو متغیر کے طور پر تفویض کریں اور انہیں ایک بار تبدیل کریں۔

مکسنس

وہ تین بارڈر ریڈیئس ڈیکلریشنز جو آپ کو باقاعدہ ol' 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`	#222
`@grayDark`	#333
`@gray`	#555
`@grayLight`	#999
`@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`

ہیرو یونٹ

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

مکسنس کے بارے میں

بنیادی مکسنس

بنیادی مکس سی ایس ایس کے ٹکڑوں کے لیے بنیادی طور پر شامل یا جزوی ہوتا ہے۔ وہ بالکل سی ایس ایس کلاس کی طرح لکھے گئے ہیں اور انہیں کہیں بھی بلایا جا سکتا ہے۔

. عنصر {
  . 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()`	کوئی نہیں	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 کالم استعمال کریں۔

پس منظر اور میلان

مکسین	پیرامیٹرز	استعمال
`#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 کمانڈ لائن کمپائلر اور uglify-js کو عالمی سطح پر npm کے ساتھ انسٹال کریں۔

$npm install -g less ugliify-js

ایک بار انسٹال ہونے makeکے بعد آپ کی بوٹسٹریپ ڈائرکٹری کی جڑ سے چلائیں اور آپ بالکل تیار ہیں۔

مزید برآں، اگر آپ نے واچر انسٹال کر رکھا ہے، تو آپ make watchہر بار بوٹسٹریپ lib میں کسی فائل میں ترمیم کرنے کے بعد بوٹسٹریپ خود بخود دوبارہ تعمیر کر سکتے ہیں (اس کی ضرورت نہیں ہے، صرف ایک سہولت کا طریقہ)۔

کمانڈ لائن

نوڈ کے ذریعے 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 فائل کے ہر محفوظ کرنے کے بعد کوڈ کو مقامی فائلوں میں مرتب کرتی ہے۔

اگر آپ چاہیں تو، آپ خودکار منفائنگ کے لیے ایپ میں ترجیحات کو ٹوگل کر سکتے ہیں اور مرتب کی گئی فائلیں کس ڈائرکٹری میں ختم ہوتی ہیں۔

کم کے ساتھ بنایا گیا ہے۔

کیوں کم؟

کیا شامل ہے؟

اورجانیے

متغیرات

مکسنس

آپریشنز

بوٹسٹریپ متغیرات کم متغیرات، ان کی قدریں، اور استعمال کے رہنما خطوط

سہاروں اور لنکس

گرڈ سسٹم

نوع ٹائپ

میزیں

گرے اسکیل رنگ

لہجے کے رنگ

اجزاء

بٹن

فارمز

فارم اسٹیٹس اور الرٹس

نوبار

ڈراپ ڈاؤن

ہیرو یونٹ

بوٹسٹریپ مکسنس

مکسنس کے بارے میں

بنیادی مکسنس

پیرامیٹرک مکسنس

آسانی سے اپنا شامل کریں۔

مکسز شامل ہیں۔

افادیت

فارمز

نوع ٹائپ

گرڈ سسٹم

CSS3 کی خصوصیات

پس منظر اور میلان

کم کے ساتھ بوٹسٹریپ مرتب کرنا

مرتب کرنے کے اوزار

میک فائل کے ساتھ نوڈ

کمانڈ لائن

جاوا اسکرپٹ

غیر سرکاری میک ایپ

مزید میک ایپس

کرنچ

کوڈ کٹ

سادہ