بڑھائیں · بوٹسٹریپ اردو میں

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

کیوں کم؟

بوٹسٹریپ کے تخلیق کاروں میں سے ایک نے اس بارے میں ایک فوری بلاگ پوسٹ لکھی ، جس کا خلاصہ یہاں دیا گیا ہے:

بوٹسٹریپ Sass کے مقابلے کم کے ساتھ ~ 6x تیزی سے مرتب کرتا ہے۔
جاوا اسکرپٹ میں کم لکھا جاتا ہے، جس سے روبی کے ساتھ ساس کے مقابلے میں ڈائیونگ اور پیچ کرنا آسان ہوجاتا ہے۔
کم زیادہ ہے؛ ہم محسوس کرنا چاہتے ہیں کہ ہم CSS لکھ رہے ہیں اور بوٹسٹریپ کو سب کے لیے قابل رسائی بنا رہے ہیں۔

کیا شامل ہے؟

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

اورجانیے

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

چونکہ ہمارا CSS کم کے ساتھ لکھا گیا ہے اور متغیرات اور مکسنس کا استعمال کرتا ہے، اس لیے اسے حتمی پیداوار کے نفاذ کے لیے مرتب کرنے کی ضرورت ہے۔ یہ ہے کیسے۔

نوٹ: اگر آپ ترمیم شدہ 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 پر ہے ۔

کسی بھی ویب پروجیکٹ کو کمپائلڈ یا minified CSS اور JS میں چھوڑ کر جلدی سے شروع کریں۔ آگے بڑھنے میں آسان اپ گریڈ اور دیکھ بھال کے لیے الگ سے حسب ضرورت اسٹائل پر تہہ لگائیں۔

فائل کا ڈھانچہ ترتیب دیں۔

تازہ ترین مرتب شدہ بوٹسٹریپ ڈاؤن لوڈ کریں اور اپنے پروجیکٹ میں رکھیں۔ مثال کے طور پر، آپ کے پاس کچھ ایسا ہو سکتا ہے:

  ایپ/
      لے آؤٹ/
      ٹیمپلیٹس/
  عوام/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
           glyphicons-halflings.png
           glyphicons-halflings-white.png

Utilize starter template

Copy the following base HTML to get started.

<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="public/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- Bootstrap -->
    <script src="public/js/bootstrap.min.js"></script>
  </body>
</html>

Layer on custom code

Work in your custom CSS, JS, and more as necessary to make Bootstrap your own with your own separate CSS and JS files.

<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="public/css/bootstrap.min.css" rel="stylesheet">
    <!-- Project -->
    <link href="public/css/application.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- Bootstrap -->
    <script src="public/js/bootstrap.min.js"></script>
    <!-- Project -->
    <script src="public/js/application.js"></script>
  </body>
</html>

بوٹسٹریپ کو بڑھانا

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