شامل طرزوں اور اجزاء کے ساتھ ساتھ کم متغیرات اور مکسنس سے فائدہ اٹھانے کے لیے بوٹسٹریپ کو بڑھا دیں۔
بوٹسٹریپ کو اس کے بنیادی حصے میں LESS کے ساتھ بنایا گیا ہے، یہ ایک متحرک اسٹائل شیٹ زبان ہے جسے ہمارے اچھے دوست، Alexis Sellier نے بنایا ہے۔ یہ ڈیولپنگ سسٹم پر مبنی CSS کو تیز تر، آسان اور مزید تفریحی بناتا ہے۔
بوٹسٹریپ کے تخلیق کاروں میں سے ایک نے اس بارے میں ایک فوری بلاگ پوسٹ لکھی ، جس کا خلاصہ یہاں دیا گیا ہے:
CSS کی توسیع کے طور پر، LESS میں متغیرات، کوڈ کے دوبارہ قابل استعمال ٹکڑوں کے لیے مکسز، سادہ ریاضی کے لیے آپریشنز، نیسٹنگ، اور یہاں تک کہ رنگ کے افعال شامل ہیں۔
مزید جاننے کے لیے سرکاری ویب سائٹ http://lesscss.org/ پر جائیں۔
چونکہ ہمارا CSS کم کے ساتھ لکھا گیا ہے اور متغیرات اور مکسنس کا استعمال کرتا ہے، اس لیے اسے حتمی پیداوار کے نفاذ کے لیے مرتب کرنے کی ضرورت ہے۔ یہ ہے کیسے۔
کمانڈ لائن کے ذریعے مرتب کرنے کے لیے گٹ ہب پر پروجیکٹ ریڈمی میں دی گئی ہدایات پر عمل کریں ۔
تازہ ترین 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
شروع کرنے کے لیے درج ذیل بیس ایچ ٹی ایم ایل کو کاپی کریں۔
- <html>
- <head>
- <title> بوٹسٹریپ 101 ٹیمپلیٹ </title>
- <!-- بوٹسٹریپ -->
- <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
- </head>
- <body>
- <h1> ہیلو، دنیا! </h1>
- <!-- بوٹسٹریپ -->
- <script src = "public/js/bootstrap.min.js" ></script>
- </body>
- </html>
اپنی الگ الگ CSS اور JS فائلوں کے ساتھ بوٹسٹریپ کو اپنا بنانے کے لیے اپنی مرضی کے مطابق CSS، JS اور مزید بہت کچھ میں کام کریں۔
- <html>
- <head>
- <title> بوٹسٹریپ 101 ٹیمپلیٹ </title>
- <!-- بوٹسٹریپ -->
- <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
- <!-- پروجیکٹ -->
- <link href = "public/css/application.css" rel = "stylesheet" >
- </head>
- <body>
- <h1> ہیلو، دنیا! </h1>
- <!-- بوٹسٹریپ -->
- <script src = "public/js/bootstrap.min.js" ></script>
- <!-- پروجیکٹ -->
- <script src = "public/js/application.js" ></script>
- </body>
- </html>