بوت استرپ

استفاده از LESS با بوت استرپ

بوت استرپ را با LESS ، یک پیش پردازنده CSS، سفارشی و گسترش دهید تا از متغیرها، میکسین ها و موارد دیگر که برای ساختن CSS بوت استرپ استفاده می شود، استفاده کنید.

ساخته شده با LESS

چرا کمتر؟

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

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

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

بیشتر بدانید

CSS کمتر

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

متغیرها

مدیریت رنگ ها و مقادیر پیکسل در CSS می تواند کمی دردسرساز باشد، معمولاً پر از کپی و چسباندن. البته نه با LESS - رنگ ها یا مقادیر پیکسل را به عنوان متغیر اختصاص دهید و یک بار آنها را تغییر دهید.

مخلوط ها

آن سه اعلان شعاع مرزی که باید در CSS معمولی انجام دهید؟ اکنون با کمک میکس‌ها به یک خط رسیده‌اند، تکه‌هایی از کد که می‌توانید در هر جایی دوباره از آنها استفاده کنید.

عملیات

با انجام محاسبات در حین انجام عملیات، شبکه خود را پیشرو، و فوق العاده انعطاف پذیرتر کنید. ضرب، تقسیم، اضافه، و کم کردن راه خود را به CSS sanity.

متغیرهای بوت استرپ متغیرهای LESS، مقادیر آنها و دستورالعمل‌های استفاده

داربست و پیوند

@bodyBackground @white رنگ پس زمینه صفحه
@textColor @grayDark رنگ متن پیش‌فرض برای کل بدنه، عنوان‌ها و موارد دیگر
@linkColor #08c رنگ متن پیوند پیش‌فرض
@linkColorHover darken(@linkColor, 15%) رنگ شناور متن پیوند پیش‌فرض

سیستم شبکه ای

@gridColumns 12
@gridColumnWidth 60 پیکسل
@gridGutterWidth 20 پیکسل
@fluidGridColumnWidth 6.382978723٪
@fluidGridGutterWidth 2.127659574%

تایپوگرافی

@sansFontFamily "Helvetica Neue"، Helvetica، Arial، sans-serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Menlo، موناکو، "Courier New"، monospace
@baseFontSize 13 پیکسل باید پیکسل باشد
@baseFontFamily @sansFontFamily
@baseLineHeight 18 پیکسل باید پیکسل باشد
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

جداول

@tableBackground transparent
@tableBackgroundAccent #f9f9f9
@tableBackgroundHover #f5f5f5
@tableBorder ddd

رنگ های خاکستری

@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

اجزاء

دکمه ها

@btnBackground @white
@btnBackgroundHighlight darken(@white, 10%)
@btnBorder darken(@white, 20%)
@btnPrimaryBackground @linkColor
@btnPrimaryBackgroundHighlight spin(@btnPrimaryBackground, 15%)
@btnInfoBackground #5bc0de
@btnInfoBackgroundHighlight #2f96b4
@btnSuccessBackground #62c462
@btnSuccessBackgroundHighlight 51a351
@btnWarningBackground lighten(@orange, 15%)
@btnWarningBackgroundHighlight @orange
@btnDangerBackground #ee5f5b
@btnDangerBackgroundHighlight #bd362f
@btnInverseBackground @gray
@btnInverseBackgroundHighlight @grayDarker

تشکیل می دهد

@placeholderText @grayLight
@inputBackground @white
@inputBorder #ccc
@inputBorderRadius 3px
@inputDisabledBackground @grayLighter
@formActionsBackground #f5f5f5

حالت ها و هشدارها را تشکیل دهید

@warningText #c09853
@warningBackground #f3edd2
@errorText #b94a48
@errorBackground #f2dede
@successText #468847
@successBackground #dff0d8
@infoText #3a87ad
@infoBackground #d9edf7

نوار ناوبری

@navbarHeight 40 پیکسل
@navbarBackground @grayDarker
@navbarBackgroundHighlight @grayDark
@navbarText @grayLight
@navbarLinkColor @grayLight
@navbarLinkColorHover @white
@navbarLinkColorActive @navbarLinkColorHover
@navbarLinkBackgroundHover transparent
@navbarLinkBackgroundActive @navbarBackground
@navbarSearchBackground lighten(@navbarBackground, 25%)
@navbarSearchBackgroundFocus @white
@navbarSearchBorder darken(@navbarSearchBackground, 30%)
@navbarSearchPlaceholderColor #ccc
@navbarBrandColor @navbarLinkColor

کشویی

@dropdownBackground @white
@dropdownBorder rgba(0,0,0,.2)
@dropdownLinkColor @grayDark
@dropdownLinkColorHover @white
@dropdownLinkBackgroundHover @linkColor
@@dropdownDividerTop #e5e5e5
@@dropdownDividerBottom @white

واحد قهرمان

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

میکس های بوت استرپ

درباره mixins

میکسین های اساسی

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

  1. . عنصر {
  2.   . clearfix ();
  3. }

میکس های پارامتریک

یک میکس پارامتریک درست مانند یک میکس پایه است، اما پارامترها (از این رو نام) با مقادیر پیش فرض اختیاری را نیز می پذیرد.

  1. . عنصر {
  2.   . حاشیه - شعاع ( 4 پیکسل )؛
  3. }

خود را به راحتی اضافه کنید

تقریباً تمام میکس‌های Bootstrap در mixins.less ذخیره می‌شوند، یک فایل کاربردی فوق‌العاده .less که به شما امکان می‌دهد از یک mixin در هر یک از فایل‌های .less در جعبه ابزار استفاده کنید.

بنابراین، ادامه دهید و از موارد موجود استفاده کنید یا در صورت نیاز خود را اضافه کنید.

مخلوط های موجود

خدمات رفاهی

مخلوط کن مولفه های استفاده
.clearfix() هیچ یک اضافه کردن به هر پدر و مادر برای پاک کردن شناور در داخل
.tab-focus() هیچ یک سبک فوکوس Webkit را اعمال کنید و طرح کلی فایرفاکس را گرد کنید
.center-block() هیچ یک وسط خودکار یک عنصر در سطح بلوک با استفاده ازmargin: auto
.ie7-inline-block() هیچ یک display: inline-blockبرای دریافت پشتیبانی از IE7 علاوه بر معمول استفاده کنید
.size() @height @width به سرعت ارتفاع و عرض را روی یک خط تنظیم کنید
.square() @size .size()برای تنظیم عرض و ارتفاع به عنوان یک مقدار ایجاد می شود
.opacity() @opacity درصد شفافیت را در اعداد کامل تنظیم کنید (به عنوان مثال، "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 % ناودان پهن ایجاد کنید
#grid > .input() @gridColumnWidth, @gridGutterWidth سیستم شبکه پیکسلی را برای inputعناصر، محاسبه لایه ها و حاشیه ها ایجاد کنید
.makeColumn @columns: 1, @offset: 0 هر کدام divرا به یک ستون شبکه بدون .span*کلاس تبدیل کنید

ویژگی های CSS3

مخلوط کن مولفه های استفاده
.border-radius() @radius گوشه های یک عنصر را گرد کنید. می تواند یک مقدار واحد یا چهار مقدار جدا شده با فاصله باشد
.box-shadow() @shadow یک سایه به یک عنصر اضافه کنید
.transition() @transition افکت انتقال CSS3 را اضافه کنید (به عنوان مثال، all .2s linear)
.rotate() @degrees یک عنصر را n درجه بچرخانید
.scale() @ratio یک عنصر را به n برابر اندازه اصلی آن تغییر دهید
.translate() @x, @y یک عنصر را روی صفحات x و y حرکت دهید
.background-clip() @clip برش پس زمینه یک عنصر (مفید برای border-radius)
.background-size() @size اندازه تصاویر پس زمینه را از طریق CSS3 کنترل کنید
.box-sizing() @boxmodel مدل جعبه را برای یک عنصر تغییر دهید (مثلاً border-boxبرای یک عرض کامل input)
.user-select() @select کنترل انتخاب مکان نما از متن در یک صفحه
.backface-visibility() @visibility: visible هنگام استفاده از تبدیل های سه بعدی CSS از سوسو زدن محتوا جلوگیری کنید
.resizable() @direction: both هر عنصر را در سمت راست و پایین قابل تغییر اندازه کنید
.content-columns() @columnCount, @columnGap: @gridGutterWidth محتوای هر عنصر را از ستون های CSS3 استفاده کنید
.hyphens() @mode: auto خط فاصله CSS3 زمانی که می خواهید (شامل word-wrap: break-word)

پس زمینه ها و گرادیان ها

مخلوط کن مولفه های استفاده
#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

توجه: اگر با 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 است.