وڌايو · بوٽ اسٽريپ سنڌي ۾

بوٽ اسٽريپ LESS سان ٺهيل آهي بنيادي طور تي، هڪ متحرڪ اسٽائل شيٽ ٻولي جيڪا اسان جي سٺي دوست، Alexis Sellier پاران ٺاهي وئي آهي . اهو ترقي ڪندڙ سسٽم تي ٻڌل CSS کي تيز، آسان ۽ وڌيڪ مزو ڏئي ٿو.

ڇو گهٽ؟

بوٽ اسٽريپ جي تخليق ڪندڙن مان هڪ هن بابت هڪ تڪڙو بلاگ پوسٽ لکيو ، هتي خلاصو:

بوٽ اسٽريپ تيز ~ 6x تيز مرتب ڪري ٿو ساس جي مقابلي ۾ گھٽ سان
جاوا اسڪرپٽ ۾ گهٽ لکيو ويو آهي، ساس سان روبي جي مقابلي ۾ اسان کي ڊيو ڪرڻ ۽ پيچ ڪرڻ آسان بڻائي ٿي.
گهٽ آهي وڌيڪ؛ اسان محسوس ڪرڻ چاهيون ٿا ته اسان سي ايس ايس لکي رهيا آهيون ۽ بوٽ اسٽريپ کي سڀني جي قابل بڻائي رهيا آهيون.

ڇا شامل آهي؟

CSS جي توسيع جي طور تي، LESS ۾ متغير شامل آهن، ڪوڊ جي ٻيهر استعمال لائق اسنپٽس لاءِ ميڪسين، سادي رياضي لاءِ آپريشن، nesting، ۽ حتي رنگ جا ڪم.

وڌيڪ سکو

وڌيڪ سکڻ لاءِ سرڪاري ويب سائيٽ http://lesscss.org/ تي وڃو.

جيئن ته اسان جو سي ايس ايس گهٽ سان لکيو ويو آهي ۽ متغير ۽ ميڪسين کي استعمال ڪري ٿو، ان کي حتمي پيداوار جي عمل درآمد لاء مرتب ڪرڻ جي ضرورت آهي. هتي ڪيئن آهي.

نوٽ: جيڪڏهن توهان تبديل ٿيل CSS سان GitHub ڏانهن ڇڪڻ جي درخواست جمع ڪري رهيا آهيو، توهان کي انهن طريقن مان ڪنهن به ذريعي CSS کي ٻيهر ترتيب ڏيڻ گهرجي .

گڏ ڪرڻ جو اوزار

ميڪ فائل سان نوڊ

انسٽال ڪريو LESS ڪمانڊ لائن ڪمپلر، JSHint، Recess، ۽ ugliify-js عالمي سطح تي npm سان ھيٺ ڏنل حڪم هلائڻ سان:

$npm install -g less jshint recess ugliify-js

هڪ دفعو انسٽال ٿيل صرف makeتوهان جي بوٽ اسٽريپ ڊاريڪٽري جي روٽ مان هلايو ۽ توهان سڀ سيٽ آهيو.

اضافي طور تي، جيڪڏهن توهان وٽ واچر نصب ڪيو آهي، توهان هلائي سگهو ٿا make watchبوٽ اسٽريپ خودڪار طريقي سان ٻيهر تعمير ڪيو جڏهن توهان بوٽ اسٽريپ ليب ۾ فائل کي ايڊٽ ڪيو (اهو گهربل ناهي، صرف هڪ سهولت جو طريقو).

ڪمانڊ لائن

انسٽال ڪريو 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 Adobe Air تي ٺهيل هڪ بهترين ڏسندڙ LESS ايڊيٽر ۽ مرتب ڪندڙ آهي.

ڪوڊ ڪٽ

ساڳئي ماڻهوءَ پاران ٺاهيل غير رسمي Mac ايپ، CodeKit هڪ Mac ايپ آهي جيڪا LESS، SASS، Stylus، ۽ CoffeeScript کي گڏ ڪري ٿي.

سادو

ميڪ، لينڪس، ۽ ونڊوز ايپ ڊريگ ۽ ڊراپ گڏ ڪرڻ لاءِ گھٽ فائلون. پلس، ماخذ ڪوڊ GitHub تي آهي .

ڪنهن به ويب پروجيڪٽ کي جلدي شروع ڪريو مرتب ڪيل يا گھٽ ۾ گھٽ CSS ۽ JS ۾ ڇڏڻ سان. آسان اپ گريڊ ۽ سار سنڀال لاءِ الڳ الڳ ڪسٽم اسٽائل تي پرت اڳتي وڌڻ.

فائل جي جوڙجڪ کي ترتيب ڏيو

ڊائون لوڊ ڪريو تازو مرتب ٿيل بوٽ اسٽراپ ۽ پنھنجي پروجيڪٽ ۾ جڳھ ڪريو. مثال طور، توھان کي ڪجھھ ھجي سگھي ٿو:

  ايپ/
      ترتيب/
      ٽيمپليٽ/
  عوامي/
      css/
          bootstrap.min.css
      جي ايس/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

اسٽارٽر ٽيمپليٽ استعمال ڪريو

شروع ڪرڻ لاءِ ھيٺ ڏنل بنيادي HTML کي نقل ڪريو.

<html>
  <سر>
    <title> Bootstrap 101 Template </title>
    <!-- بوٽ اسٽريپ -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
  </head>
  <جسم>
    <h1> هيلو، دنيا! </h1>
    <!-- بوٽ اسٽريپ -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </body>
</html>

ڪسٽم ڪوڊ تي پرت

توهان جي ڪسٽم CSS، JS، ۽ وڌيڪ ۾ ڪم ڪريو جيئن ته بوٽ اسٽريپ کي توهان جي پنهنجي الڳ CSS ۽ JS فائلن سان ٺاهيو.

<html>
  <سر>
    <title> Bootstrap 101 Template </title>
    <!-- بوٽ اسٽريپ -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
    <!-- پروجيڪٽ -->
    <link href = "public/css/application.css" rel = "stylesheet" >  
  </head>
  <جسم>
    <h1> هيلو، دنيا! </h1>
    <!-- بوٽ اسٽريپ -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- پروجيڪٽ -->
    <script src = "public/js/application.js" ></script> 
  </body>
</html>

بوٽ اسٽريپ وڌائڻ

LESS سان ٺهيل