گسترش · توییتر بوت استرپ به فارسی

بوت استرپ با LESS در هسته خود ساخته شده است، یک زبان صفحه سبک پویا که توسط دوست خوب ما، Alexis Sellier ایجاد شده است. توسعه CSS مبتنی بر سیستم را سریع‌تر، آسان‌تر و سرگرم‌کننده‌تر می‌کند.

چرا کمتر؟

یکی از سازندگان بوت استرپ یک پست وبلاگ سریع در این مورد نوشت که در اینجا خلاصه شده است:

Bootstrap سریعتر ~6 برابر سریعتر با Less در مقایسه با Sass کامپایل می شود
کمتر در جاوا اسکریپت نوشته شده است، و در مقایسه با Ruby با Sass، شیرجه زدن و وصله کردن را برای ما آسان تر می کند.
کمتر است بیشتر؛ ما می خواهیم احساس کنیم که داریم CSS می نویسیم و Bootstrap را برای همه قابل دسترس می کنیم.

شامل چه چیزی است؟

به عنوان یک توسعه CSS، LESS شامل متغیرها، میکسین ها برای تکه های کد قابل استفاده مجدد، عملیات برای ریاضیات ساده، تو در تو و حتی توابع رنگی است.

بیشتر بدانید

برای کسب اطلاعات بیشتر به وب سایت رسمی در http://lesscss.org/ مراجعه کنید .

از آنجایی که CSS ما با Less نوشته شده است و از متغیرها و میکسین ها استفاده می کند، باید برای اجرای نهایی تولید کامپایل شود. در اینجا چگونه است.

توجه: اگر با CSS تغییر یافته درخواست کشش را به GitHub ارسال می کنید، باید CSS را از طریق هر یک از این روش ها دوباره کامپایل کنید.

ابزارهای کامپایل

گره با میکفایل

با اجرای دستور زیر، کامپایلر خط فرمان LESS، JSHint، Recess و uglify-js را به صورت سراسری با npm نصب کنید:

$ npm install -g less jshint recess uglify-js

پس از نصب فقط makeاز ریشه دایرکتوری بوت استرپ خود را اجرا کنید و همه چیز آماده است.

علاوه بر این، اگر واچر را نصب کرده‌اید، ممکن است make watchهر بار که فایلی را در فهرست راه‌انداز ویرایش می‌کنید، بوت استرپ را به‌طور خودکار بازسازی کنید (این مورد نیاز نیست، فقط یک روش راحت است).

خط فرمان

ابزار خط فرمان LESS را از طریق Node نصب کنید و دستور زیر را اجرا کنید:

$ lessc ./less/bootstrap.less > bootstrap.css

اگر می‌خواهید مقداری بایت ذخیره کنید، حتماً --compressآن دستور را وارد کنید!

جاوا اسکریپت

آخرین نسخه Less.js را دانلود کنید و مسیر دسترسی به آن (و Bootstrap) را در قسمت وارد <head>کنید.

<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>

برای کامپایل مجدد فایل های .less، کافی است آنها را ذخیره کنید و صفحه خود را مجدداً بارگیری کنید. Less.js آنها را کامپایل کرده و در حافظه محلی ذخیره می کند.

برنامه غیر رسمی مک

برنامه غیررسمی Mac فهرست‌های فایل‌های .less را تماشا می‌کند و پس از هر ذخیره فایل .less، کد را در فایل‌های محلی کامپایل می‌کند. اگر دوست دارید، می‌توانید تنظیمات برگزیده برنامه را برای کوچک‌سازی خودکار تغییر دهید و فایل‌های کامپایل‌شده را در کدام فهرست قرار دهید.

برنامه های بیشتر

کروچیدن

Crunch یک ویرایشگر و کامپایلر LESS عالی است که بر روی Adobe Air ساخته شده است.

کدکیت

CodeKit که توسط همان برنامه غیر رسمی مک ایجاد شده است، یک برنامه مک است که LESS، SASS، Stylus و CoffeeScript را کامپایل می کند.

ساده

برنامه مک، لینوکس و ویندوز برای کامپایل کردن فایل‌های کمتر. به علاوه، کد منبع در GitHub است.

به سرعت هر پروژه وب را با انداختن CSS و JS کامپایل شده یا کوچک شده شروع کنید. برای ارتقا و نگهداری آسان به طور جداگانه روی سبک های سفارشی قرار دهید.

راه اندازی ساختار فایل

آخرین بوت استرپ کامپایل شده را دانلود کنید و در پروژه خود قرار دهید. برای مثال، ممکن است چیزی شبیه به این داشته باشید:

  برنامه / ├── طرح بندی / └── قالب / عمومی / ├── css / │ ├── بوت استرپ . دقیقه _ css
   ├── js / │ ├── bootstrap . دقیقه _ js
   └── img / ├── glyphicons - halflings . png
       └── glyphicons - halflings - white . png

از قالب استارتر استفاده کنید

برای شروع HTML پایه زیر را کپی کنید.

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

لایه روی کد سفارشی

در صورت لزوم روی CSS، JS و غیره سفارشی خود کار کنید تا بوت استرپ را با فایل‌های CSS و JS جداگانه خود بسازید.

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

گسترش بوت استرپ

ساخته شده با LESS