استفاده از LESS با بوت استرپ
بوت استرپ را با LESS ، یک پیش پردازنده CSS، سفارشی و گسترش دهید تا از متغیرها، میکسین ها و موارد دیگر که برای ساختن CSS بوت استرپ استفاده می شود، استفاده کنید.
ساخته شده با LESS
چرا کمتر؟
بوت استرپ با LESS در هسته خود ساخته شده است، یک زبان صفحه سبک پویا که توسط دوست خوب ما، Alexis Sellier ایجاد شده است. توسعه CSS مبتنی بر سیستم را سریع‌تر، آسان‌تر و سرگرم‌کننده‌تر می‌کند.
شامل چه چیزی است؟
به عنوان یک توسعه CSS، LESS شامل متغیرها، میکسین ها برای تکه های کد قابل استفاده مجدد، عملیات برای ریاضیات ساده، تو در تو و حتی توابع رنگی است.
متغیرها
مدیریت رنگ ها و مقادیر پیکسل در CSS می تواند کمی دردسرساز باشد، معمولاً پر از کپی و چسباندن. البته نه با LESS - رنگ ها یا مقادیر پیکسل را به عنوان متغیر اختصاص دهید و یک بار آنها را تغییر دهید.
مخلوط ها
آن سه اعلان شعاع مرزی که باید در CSS معمولی انجام دهید؟ اکنون با کمک میکس‌ها به یک خط رسیده‌اند، تکه‌هایی از کد که می‌توانید در هر جایی دوباره از آنها استفاده کنید.
عملیات
با انجام محاسبات در حین انجام عملیات، شبکه خود را پیشرو، و فوق العاده انعطاف پذیرتر کنید. ضرب، تقسیم، اضافه، و کم کردن راه خود را به CSS sanity.
متغیرهای بوت استرپ متغیرهای LESS، مقادیر آنها و دستورالعمل‌های استفاده
هایپرلینک ها
@linkColor |
#08c | رنگ متن پیوند پیش‌فرض | |
@linkColorHover |
darken(@linkColor, 15%) |
رنگ شناور متن پیوند پیش‌فرض |
سیستم شبکه ای
@gridColumns |
12 |
@gridColumnWidth |
60 پیکسل |
@gridGutterWidth |
20 پیکسل |
@fluidGridColumnWidth |
6.382978723٪ |
@fluidGridGutterWidth |
2.127659574% |
تایپوگرافی
@baseFontSize |
13 پیکسل |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
18 پیکسل |
رنگ های خاکستری
@black |
#000 | |
@grayDarker |
#222 | |
@grayDark |
#333 | |
@gray |
#555 | |
@grayLight |
#999 | |
@grayLighter |
#eee | |
@white |
#fff |
رنگ های تاکیدی
@blue |
#049cdb | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
اجزاء
دکمه ها
@primaryButtonBackground |
@linkColor |
تشکیل می دهد
@placeholderText |
@grayLight |
نوار ناوبری
@navbarHeight |
40 پیکسل | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
حالت ها و هشدارها را تشکیل دهید
@warningText |
#c09853 | |
@warningBackground |
#f3edd2 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
میکس های بوت استرپ
درباره mixins
میکسین های اساسی
یک میکسین پایه اساسا یک شامل یا جزئی برای یک قطعه از CSS است. آنها درست مانند یک کلاس CSS نوشته شده اند و می توان آنها را در هر جایی فراخوانی کرد.
- . عنصر {
- . clearfix ();
- }
میکس های پارامتریک
یک میکس پارامتریک درست مانند یک میکس پایه است، اما پارامترها (از این رو نام) با مقادیر پیش فرض اختیاری را نیز می پذیرد.
- . عنصر {
- . حاشیه - شعاع ( 4 پیکسل )؛
- }
خود را به راحتی اضافه کنید
تقریباً تمام میکس‌های Bootstrap در mixins.less ذخیره می‌شوند، یک فایل کاربردی فوق‌العاده .less که به شما امکان می‌دهد از یک mixin در هر یک از فایل‌های .less در جعبه ابزار استفاده کنید.
بنابراین، ادامه دهید و از موارد موجود استفاده کنید یا در صورت نیاز خود را اضافه کنید.
مخلوط های موجود
خدمات رفاهی
| مخلوط کن | مولفه های | استفاده |
|---|---|---|
.clearfix() |
هیچ یک | اضافه کردن به هر پدر و مادر برای پاک کردن شناور در داخل |
.tab-focus() |
هیچ یک | سبک فوکوس Webkit را اعمال کنید و طرح کلی فایرفاکس را گرد کنید |
.center-block() |
هیچ یک | وسط خودکار یک عنصر در سطح بلوک با استفاده ازmargin: auto |
.ie7-inline-block() |
هیچ یک | display: inline-blockبرای دریافت پشتیبانی از IE7 علاوه بر معمول استفاده کنید |
.size() |
@height: 5px, @width: 5px |
به سرعت ارتفاع و عرض را روی یک خط تنظیم کنید |
.square() |
@size: 5px |
.size()برای تنظیم عرض و ارتفاع به عنوان یک مقدار ایجاد می شود |
.opacity() |
@opacity: 100 |
درصد شفافیت را در اعداد کامل تنظیم کنید (به عنوان مثال، "50" یا "75") |
تشکیل می دهد
| مخلوط کن | مولفه های | استفاده |
|---|---|---|
.placeholder() |
@color: @placeholderText |
placeholderرنگ متن را برای ورودی ها تنظیم کنید |
تایپوگرافی
| مخلوط کن | مولفه های | استفاده |
|---|---|---|
#font > #family > .serif() |
هیچ یک | یک عنصر را با استفاده از پشته قلم سریف بسازید |
#font > #family > .sans-serif() |
هیچ یک | ایجاد یک عنصر با استفاده از پشته قلم sans-serif |
#font > #family > .monospace() |
هیچ یک | یک عنصر را از پشته فونت monospace استفاده کنید |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
اندازه فونت، وزن و پیشرو را به راحتی تنظیم کنید |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
خانواده فونت ها را روی سریف تنظیم کنید و اندازه، وزن و پیشرو را کنترل کنید |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
خانواده فونت را روی sans-serif تنظیم کنید و اندازه، وزن و پیشرو را کنترل کنید |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
خانواده فونت را روی monospace تنظیم کنید و اندازه، وزن و صفحه اصلی را کنترل کنید |
سیستم شبکه ای
| مخلوط کن | مولفه های | استفاده |
|---|---|---|
.container-fixed() |
هیچ یک | یک ظرف در مرکز افقی برای نگهداری محتوای خود ایجاد کنید |
#grid > .core() |
@gridColumnWidth, @gridGutterWidth |
ایجاد یک سیستم شبکه پیکسلی (کانتینر، ردیف و ستون) با n ستون و x پیکسل ناودان گسترده |
#grid > .fluid() |
@fluidGridColumnWidth, @fluidGridGutterWidth |
یک سیستم شبکه پیشین با n ستون و x % ناودان پهن ایجاد کنید |
ویژگی های CSS3
| مخلوط کن | مولفه های | استفاده |
|---|---|---|
.border-radius() |
@radius: 5px |
گوشه های یک عنصر را گرد کنید. می تواند یک مقدار واحد یا چهار مقدار جدا شده با فاصله باشد |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
یک سایه به یک عنصر اضافه کنید |
.transition() |
@transition |
افکت انتقال CSS3 را اضافه کنید (به عنوان مثال، all .2s linear) |
.rotate() |
@degrees |
یک عنصر را n درجه بچرخانید |
.scale() |
@ratio |
یک عنصر را به n برابر اندازه اصلی آن تغییر دهید |
.translate() |
@x: 0, @y: 0 |
یک عنصر را روی صفحات x و y حرکت دهید |
.background-clip() |
@clip |
برش پس زمینه یک عنصر (مفید برای border-radius) |
.background-size() |
@size |
اندازه تصاویر پس زمینه را از طریق CSS3 کنترل کنید |
.box-sizing() |
@boxmodel |
مدل جعبه را برای یک عنصر تغییر دهید (مثلاً border-boxبرای یک عرض کامل input) |
.user-select() |
@select |
کنترل انتخاب مکان نما از متن در یک صفحه |
.resizable() |
@direction: both |
هر عنصر را در سمت راست و پایین قابل تغییر اندازه کنید |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
محتوای هر عنصر را از ستون های CSS3 استفاده کنید |
پس زمینه ها و گرادیان ها
| مخلوط کن | مولفه های | استفاده |
|---|---|---|
#translucent > .background() |
@color: @white, @alpha: 1 |
به یک عنصر رنگ پس‌زمینه شفاف بدهید |
#translucent > .border() |
@color: @white, @alpha: 1 |
به یک عنصر رنگ حاشیه نیمه شفاف بدهید |
#gradient > .vertical() |
@startColor, @endColor |
یک گرادیان پس زمینه عمودی بین مرورگر ایجاد کنید |
#gradient > .horizontal() |
@startColor, @endColor |
یک گرادیان پس زمینه افقی بین مرورگر ایجاد کنید |
#gradient > .directional() |
@startColor, @endColor, @deg |
یک گرادیان پس زمینه جهت دار بین مرورگر ایجاد کنید |
#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
یک گرادیان پس زمینه سه رنگ متقابل مرورگر ایجاد کنید |
#gradient > .radial() |
@innerColor, @outerColor |
یک گرادیان پس زمینه شعاعی بین مرورگر ایجاد کنید |
#gradient > .striped() |
@color, @angle |
یک گرادیان پس زمینه راه راه متقابل مرورگر ایجاد کنید |
#gradientBar() |
@primaryColor, @secondaryColor |
برای دکمه‌هایی استفاده می‌شود تا یک مرز شیب و کمی تیره‌تر تعیین کنند |
کامپایل بوت استرپ با LESS
ابزارهای کامپایل
گره با میکفایل
با اجرای دستور زیر، کامپایلر خط فرمان LESS و uglify-js را به صورت سراسری با npm نصب کنید:
$ npm install -g less uglify-js
پس از نصب فقط makeاز ریشه دایرکتوری بوت استرپ خود را اجرا کنید و همه چیز آماده است.
علاوه بر این، اگر واچر را نصب کرده‌اید، ممکن است make watchهر بار که فایلی را در فهرست راه‌انداز ویرایش می‌کنید، بوت استرپ را به‌طور خودکار بازسازی کنید (این مورد نیاز نیست، فقط یک روش راحت است).
خط فرمان
ابزار خط فرمان LESS را از طریق Node نصب کنید و دستور زیر را اجرا کنید:
$ lessc ./lib/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 است.