پراخول · بوټسټریپ په پښتو

بوټسټریپ په خپل اصلي برخه کې د LESS سره جوړ شوی ، زموږ د ښه ملګري ، الیکسس سیلیر لخوا رامینځته شوی متحرک سټایل شیټ ژبه . دا د سیسټمونو پراساس 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 په اتوماتيک ډول بیا جوړ کړئ هرکله چې تاسو د بوټسټریپ لیب کې فایل ترمیم کړئ (دا اړتیا نلري، یوازې د اسانتیا طریقه).

د قوماندې کرښه

د کمانډ لاین وسیله د نوډ له لارې نصب کړئ او لاندې کمانډ چل کړئ:

$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 فایل له هر خوندي کولو وروسته محلي فایلونو ته کوډ تالیف کوي. که تاسو غواړئ، تاسو کولی شئ په اپلیکیشن کې غوره توبونه د اتوماتیک کمولو لپاره او په کوم ډایرکټر کې چې تالیف شوي فایلونه پای ته رسیږي.

نور پروګرامونه

کرنچ

کرنچ یو ښه ښکاري لږ ایډیټر او کمپیلر دی چې په Adobe Air کې جوړ شوی.

CodeKit

د غیر رسمي میک ایپ په څیر د ورته سړي لخوا رامینځته شوی ، کوډ کټ یو میک ایپ دی چې LESS ، SASS ، سټیلس ، او کافي سکریپټ تالیف کوي.

ساده

ماک، لینکس، او وینډوز ایپ د لږو فایلونو د ډریګ او ډراپ تالیف لپاره. برسیره پردې، د سرچینې کوډ په GitHub کې دی .

په تالیف شوي یا کوچني شوي CSS او JS کې په ښکته کولو سره هره ویب پروژه په چټکۍ سره پیل کړئ . د اسانه پرمختللو او ساتنې لپاره په جلا توګه په دودیز سټایلونو باندې پرت.

د فایل جوړښت تنظیم کړئ

وروستی تالیف شوی بوټسټریپ ډاونلوډ کړئ او په خپله پروژه کې ځای په ځای کړئ. د مثال په توګه، تاسو ممکن داسې یو څه ولرئ:

  اپلیکیشن/
      ترتیب/
      کينډۍ/
  عامه/
      css/
          bootstrap.min.css
      js/
          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" >  
  </ سر>
  <body>
    <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" >  
  </ سر>
  <body>
    <h1> سلام، نړۍ! </h1>
    <!-- بوټسټریپ -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- پروژه -->
    <script src = "public/js/application.js" ></script> 
  </body>
</html>

د بوټسټریپ پراخول

د لږ سره جوړ شوی