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

Bootstrap را گسترش دهید تا از سبک‌ها و مؤلفه‌های گنجانده شده و همچنین متغیرها و ترکیب‌های LESS بهره ببرید.

سر بالا! این اسناد برای نسخه 2.3.2 است که دیگر به طور رسمی پشتیبانی نمی شود. آخرین نسخه بوت استرپ را بررسی کنید!
CSS کمتر

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

چرا کمتر؟

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

  • Bootstrap سریعتر ~6 برابر سریعتر با 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 = "/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/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

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

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

  1. <html>
  2. <سر>
  3. <title> الگوی بوت استرپ 101 </title>
  4. <!-- Bootstrap -->
  5. <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
  6. </head>
  7. <بدن>
  8. <h1> سلام، دنیا! </h1>
  9. <!-- Bootstrap -->
  10. <script src = "public/js/bootstrap.min.js" </script>
  11. </body>
  12. </html>

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

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

  1. <html>
  2. <سر>
  3. <title> الگوی بوت استرپ 101 </title>
  4. <!-- Bootstrap -->
  5. <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
  6. <!-- پروژه -->
  7. <link href = "public/css/application.css" rel = "stylesheet" >
  8. </head>
  9. <بدن>
  10. <h1> سلام، دنیا! </h1>
  11. <!-- Bootstrap -->
  12. <script src = "public/js/bootstrap.min.js" </script>
  13. <!-- پروژه -->
  14. <script src = "public/js/application.js" </script>
  15. </body>
  16. </html>