Extend · توییتر بوت‌استرپ

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

چرا LESS؟

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

بوت‌استرپ ۶ برابر سریع‌تر با LESS کامپایل می‌شود تا در مقایسه با Sass
LESS با جاوااسکریپت نوشته شده‌است و برای ما راحت‌تر است از Sass که با روبی نوشته شده‌است.
LESS بیشتر استفاده می‌شود و ما می‌خواهیم بوت‌استرپ را با استفاده از چیزی بنویسم که قابل دسترس‌تر برای همه باشد.

چه چیزی دارد؟

LESS به عنوان یک افزونه برای سی‌اس‌اس شامل متغیرها، mixins برای استفاده مجدد از کد، عملیات محاسباتی ساده، تودرتو و حتی تابع‌های دارای تابع‌های رنگ نیز هست.

بیشتر بدانید

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

از آن‌جایی که سی‌اس‌اس با استفاده LESS نوشته شده‌است و در آن متغیرها و mixins استفاده شده‌است، برای پیاده‌سازی نهایی باید کامپایل شود:

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

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

خط فرمان

دستورات readme پروژه در گیت‌هاب را برای کامپایل در خط فرمان، دنبال کنید.

جاوااسکریپت

آخرین نسخهٔ Less.js را دانلود کنیدو مسیر آن و بوت‌استرپ را در <head> قرار دهید.

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

برای کامپایل دوباره فایل‌های .less، فقط آن‌ها را ذخیره کنید و صفحه را دوباره بارگذاری کنید. Less.js آن‌ها را کامپایل می‌کند و در ذخیره‌ساز محلی آن‌ها را ذخیره می‌کند.

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

برنامهٔ غیررسمی مک فایل‌های .less را کامپایل می‌کند.

برنامه‌های دیگر

Crunch

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

CodeKit

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

Simpless

یک برنامه مک، گنو/لینوکس و ویندوز برای کامپایل فایل‌های LESS. به‌علاوه کد منبع آن نیز در گیت‌هاب وجود دارد.

به‌سرعت هر پروژهٔ وبی را با کپی کردن فایل‌های سی‌اس‌اس و جاوااسکریپت کامپایل‌شده و فشرده آغاز کنید. لایه‌ها را برای نگهداری و به‌روزرسانی از دیگر فایل‌ها جدا کنید.

ساختار فایل

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

   app/
       layouts/
       templates/
   public/
       css/
           bootstrap.min.css
       js/
           bootstrap.min.js
       img/
           glyphicons-halflings.png
           glyphicons-halflings-white.png

قالب آغازین را بسازید

کدهای اچ‌تی‌ام‌ال زیر را برای شروع کپی کنید.

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

کار بر روی کدهای سفارشی‌شده

سی‌اس‌اس و جاوااسکریپت خودتان را بسازید و بوت‌استرپ را براساس کدهای خود، شخصی‌سازی کنید.

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

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

ساخته‌شده با LESS