درێژکردنەوە · بووتستراپ بە کوردی (سۆرانی)

بووتستراپ بە LESS لە ناوەڕۆکەکەیدا دروستکراوە، زمانێکی ستایلشیتی داینامیکی کە لەلایەن هاوڕێ باشمانەوە دروستکراوە، ئەلێکسیس سێلیێر . پەرەپێدانی CSS لەسەر بنەمای سیستەم خێراتر و ئاسانتر و خۆشتر دەکات.

بۆچی کەمتر؟

یەکێک لە دروستکەرانی Bootstrap پۆستێکی خێرای بلۆگی لەسەر ئەم بابەتە نووسیوە , لێرەدا کورتکراوەتەوە:

Bootstrap خێراتر ~6x خێراتر لەگەڵ Less بە بەراورد بە Sass کۆدەکاتەوە
کەمتر لە جاڤاسکڕێپتدا نووسراوە، ئەمەش ئاسانتر دەکات بۆ نوقمبوون و پاچکردن بە بەراورد بە Ruby لەگەڵ Sass.
کەمتر زۆرترە; ئێمە دەمانەوێت هەست بکەین کە ئێمە CSS دەنووسین و Bootstrap دەکەین کە نزیک بێتەوە بۆ هەمووان.

چی لەخۆدەگرێت؟

وەک درێژکراوەی CSS، LESS گۆڕاوەکان، میکسینەکان بۆ پارچە کۆدەکانی دووبارە بەکارهێنەرەوە، کارەکان بۆ بیرکاری سادە، هێلانەکردن و تەنانەت ئەرکەکانی ڕەنگ لەخۆدەگرێت.

زیاتر فێربە

بۆ زانیاری زیاتر سەردانی ماڵپەڕی فەرمی بکەن لە http://lesscss.org/ .

بەو پێیەی CSS ی ئێمە بە Less نووسراوە و گۆڕاو و میکسینەکان بەکاردەهێنێت، پێویستە بۆ جێبەجێکردنی بەرهەمهێنانی کۆتایی کۆبکرێتەوە. فەرموون چۆن...

تێبینی: ئەگەر داواکاری ڕاکێشان بە CSS دەستکاریکراوەوە پێشکەش بە GitHub دەکەیت، پێویستە CSS لە ڕێگەی هەریەکێک لەم ڕێگایانەوە کۆبکەیتەوە.

ئامرازەکان بۆ کۆمپایڵکردن

گرێ بە makefile

کۆمپایەری هێڵی فەرمانی LESS و JSHint و Recess و uglify-js بە شێوەیەکی جیهانی بە npm دابمەزرێنە بە جێبەجێکردنی ئەم فرمانەی خوارەوە:

$ npm دامەزراندن -g کەمتر jshint recess uglify-js

کاتێک دامەزرا تەنها makeلە ڕەگی دایرێکتۆری بووتستراپەکەتەوە ڕابکە و هەمووت ڕێکدەخرێت.

سەرەڕای ئەوە، ئەگەر watchrت دامەزراندووە، لەوانەیە کار بکەیت make watchبۆ ئەوەی bootstrap بە شێوەیەکی ئۆتۆماتیکی دووبارە دروست بکرێتەوە هەر جارێک کە دەستکاری فایلێک دەکەیت لە bootstrap lib (ئەمە پێویست نییە، تەنها ڕێگەیەکی ئاسانکارییە).

هێڵی فرمان

ئامرازی هێڵی فەرمانی LESS لە ڕێگەی Node دابمەزرێنە و ئەم فرمانەی خوارەوە جێبەجێ بکە:

$ lessc ./کەمتر/بوتستراپ.کەمتر > bootstrap.css

دڵنیابە لەو فرمانەدا بیخەیتە --compressناو ئەو فرمانەوە ئەگەر هەوڵی پاشەکەوتکردنی هەندێک بایت دەدەیت!

جاڤاسکڕێپت

نوێترین Less.js دابەزێنە و ڕێڕەوی بۆی (و Bootstrap) لە <head>.

<link rel = "stylesheet/less" href = "/ڕێڕەو/بۆ/bootstrap.less" > <script src = "/ڕێڕەو/بۆ/کەمتر.js" ></script>

بۆ دووبارە کۆکردنەوەی فایلەکانی .less تەنها پاشەکەوتیان بکە و لاپەڕەکەت دووبارە باربکەرەوە. Less.js کۆیان دەکاتەوە و لە کۆگای ناوخۆییدا هەڵیاندەگرێت.

ئەپی ماکی نافەرمی

ئەپی نافەرمی ماک سەیری بەڕێوەبەرایەتییەکانی فایلەکانی .less دەکات و کۆدەکان کۆدەکاتەوە بۆ فایلە ناوخۆییەکان دوای هەر پاشەکەوتکردنی فایلێکی .less کە سەیری دەکرێت. ئەگەر حەزت لێیە دەتوانیت هەڵبژاردەکان لە ئەپەکەدا بگۆڕیت بۆ بچووککردنەوەی ئۆتۆماتیکی و فایلە کۆکراوەکان لە کام بەڕێوەبەرایەتیدا کۆتایی دێت.

به‌رنامه‌ی زیاتر

کرانچ

کرانچ مۆنتاژ و کۆمپایەرێکی LESS ی نایاب و سەرنجڕاکێشە کە لەسەر ئەدۆبی ئایر دروستکراوە.

کۆدکیت

لەلایەن هەمان کابرای ئەپی نافەرمی ماکەوە دروستکراوە، CodeKit ئەپێکی ماکە کە LESS و SASS و Stylus و CoffeeScript کۆدەکاتەوە.

بێ سادە

ئەپی ماک و لینوکس و ویندۆز بۆ کۆکردنەوەی فایلەکانی LESS ڕاکێشان و دابەزاندن. لەگەڵ ئەوەشدا، کۆدی سەرچاوە لە GitHub دایە .

بە خێرایی دەست بە هەر پرۆژەیەکی وێب بکە بە دابەزاندنی CSS و JS ی کۆکراوە یان بچووککراو. چین لەسەر ستایلە تایبەتەکان بە جیا بۆ بەرزکردنەوەی ئاسان و چاککردنەوە بەرەو پێشەوە.

پێکهاتەی پەڕگە ڕێکبخە

نوێترین Bootstrap ی کۆکراوە دابەزێنە و بیخە ناو پرۆژەکەتەوە. بۆ نموونە لەوانەیە شتێکی لەم شێوەیەت هەبێت:

  ئەپ/
      شێوازەکان/
      قاڵبەکان/
  گشتی/
      css/
          بۆتستراپ.min.css
      js/
          bootstrap.min.js
      img/
          گلیفیکۆنەکان-نیوەدانە.png
          glyphicons-نیوە-سپی.png

بەکارهێنانی قاڵبی دەستپێکەر

بۆ دەستپێکردن ئەم HTML بنەڕەتییەی خوارەوە کۆپی بکە.

<html>
  <سەر>
    <title> قاڵبی بووتستراپ ١٠١ </title>
    <!-- بووتستراپ -->
    <link href = "public/css/bootstrap.min.css" rel = "لاپەڕەی ستایل" >  
  </head>
  <جەستە>
    <h1> سڵاو، جیهان! </h1>
    <!-- بووتستراپ -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </body>
</html>

چین لەسەر کۆدی تایبەت

بەپێی پێویست لە CSS و JS و زۆر شتی تردا کار بکە بۆ ئەوەی Bootstrap بکەیتە هی خۆت بە فایلە جیاوازەکانی CSS و JS ی تایبەت بە خۆت.

<html>
  <سەر>
    <title> قاڵبی بووتستراپ ١٠١ </title>
    <!-- بووتستراپ -->
    <link href = "public/css/bootstrap.min.css" rel = "لاپەڕەی ستایل" >  
    <!-- پڕۆژە -->
    <link href = "public/css/application.css" rel = "لاپەڕەی ستایل" >  
  </head>
  <جەستە>
    <h1> سڵاو، جیهان! </h1>
    <!-- بووتستراپ -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- پڕۆژە -->
    <script src = "public/js/application.js" ></script> 
  </body>
</html>

درێژکردنەوەی بووتستراپ

بە LESS دروستکراوە