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

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

بۆچی کەمتر؟

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

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

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

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

زیاتر فێربە

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

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

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

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

هێڵی فرمان

ڕێنماییەکانی ناو پڕۆژەی readme لە GitHub جێبەجێ بکە بۆ کۆمپایڵکردن لە ڕێگەی هێڵی فەرمانەوە.

جاڤاسکڕێپت

نوێترین 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 دروستکراوە