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

بوٹسٹریپ کی سی ایس ایس بنانے کے لیے استعمال ہونے والے متغیرات، مکسنس اور مزید کا فائدہ اٹھانے کے لیے 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
@@dropdownDividerTop #e5e5e5
@@dropdownDividerBottom @white

ہیرو یونٹ

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

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

بنیادی مکسنس

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

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

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

ایک پیرامیٹرک مکسین بالکل بنیادی مکس کی طرح ہوتا ہے، لیکن یہ اختیاری ڈیفالٹ اقدار کے ساتھ پیرامیٹرز (اس لیے نام) کو بھی قبول کرتا ہے۔

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

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

بوٹسٹریپ کے تقریباً تمام مکسینز mixins.less میں محفوظ ہیں، یہ ایک شاندار افادیت .less فائل ہے جو آپ کو ٹول کٹ میں موجود .less فائلوں میں سے کسی میں بھی مکسین استعمال کرنے کے قابل بناتی ہے۔

لہذا، آگے بڑھیں اور موجودہ کو استعمال کریں یا اپنی ضرورت کے مطابق بلا جھجھک اپنا اضافہ کریں۔

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

افادیت

مکسین پیرامیٹرز استعمال
.clearfix() کوئی نہیں اندر اندر فلوٹس صاف کرنے کے لیے کسی بھی والدین کو شامل کریں۔
.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 دائیں اور نیچے کسی بھی عنصر کو دوبارہ سائز کے قابل بنائیں
.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ہر بار بوٹسٹریپ 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 فائل کے ہر محفوظ کرنے کے بعد کوڈ کو مقامی فائلوں میں مرتب کرتی ہے۔

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

مزید میک ایپس

کرنچ

کرنچ ایک بہترین نظر آنے والا کم ایڈیٹر اور کمپائلر ہے جو ایڈوب ایئر پر بنایا گیا ہے۔

کوڈ کٹ

غیر سرکاری Mac ایپ کے طور پر اسی آدمی کے ذریعہ تخلیق کیا گیا، CodeKit ایک Mac ایپ ہے جو LESS، SASS، Stylus، اور CoffeeScript کو مرتب کرتی ہے۔

سادہ

میک، لینکس، اور پی سی ایپ کم فائلوں کو ڈریگ اینڈ ڈراپ کمپائل کرنے کے لیے۔ اس کے علاوہ، سورس کوڈ GitHub پر ہے ۔