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

بوٹسٹریپ کو اس کے بنیادی حصے میں 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 فائل کے ہر محفوظ کرنے کے بعد کوڈ کو مقامی فائلوں میں مرتب کرتی ہے۔ اگر آپ چاہیں تو، آپ خودکار منفائنگ کے لیے ایپ میں ترجیحات کو ٹوگل کر سکتے ہیں اور مرتب کی گئی فائلیں کس ڈائرکٹری میں ختم ہوتی ہیں۔

زیادہ اطلاقات

کرنچ

Crunch is a great looking LESS editor and compiler built on Adobe Air.

CodeKit

Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.

Simpless

Mac, Linux, and Windows app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.

Quickly start any web project by dropping in the compiled or minified CSS and JS. Layer on custom styles separately for easy upgrades and maintenance moving forward.

Setup file structure

Download the latest compiled Bootstrap and place into your project. For example, you might have something like this:

   app/
       layouts/
       templates/
   public/
       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>

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

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