Bootstrap را گسترش دهید تا از سبکها و مؤلفههای گنجانده شده و همچنین متغیرها و ترکیبهای LESS بهره ببرید.
بوت استرپ با LESS در هسته خود ساخته شده است، یک زبان صفحه سبک پویا که توسط دوست خوب ما، Alexis Sellier ایجاد شده است. توسعه CSS مبتنی بر سیستم را سریعتر، آسانتر و سرگرمکنندهتر میکند.
یکی از سازندگان بوت استرپ یک پست وبلاگ سریع در این مورد نوشت که در اینجا خلاصه شده است:
به عنوان یک توسعه CSS، LESS شامل متغیرها، میکسین ها برای تکه های کد قابل استفاده مجدد، عملیات برای ریاضیات ساده، تو در تو و حتی توابع رنگی است.
برای کسب اطلاعات بیشتر به وب سایت رسمی در http://lesscss.org/ مراجعه کنید .
از آنجایی که CSS ما با Less نوشته شده است و از متغیرها و میکسین ها استفاده می کند، باید برای اجرای نهایی تولید کامپایل شود. در اینجا چگونه است.
برای کامپایل کردن از طریق خط فرمان ، دستورالعملهای پروژه 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 پایه زیر را کپی کنید.
- <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>