Bootstrap менен LESS колдонуу

Bootstrap'тин CSS түзүү үчүн колдонулган өзгөрмөлөрдүн, миксиндердин жана башкалардын артыкчылыктарын алуу үчүн LESS, CSS препроцессору менен Bootstrapти ыңгайлаштырыңыз жана кеңейтиңиз.

Эмне үчүн АЗ?

Bootstrap негизги LESS менен жасалган, биздин жакшы досубуз Алексис Селлиер тарабынан түзүлгөн динамикалык стилдер жадыбалынын тили . Бул системаларга негизделген CSS иштеп чыгууну тезирээк, оңой жана кызыктуураак кылат.

Эмне камтылган?

CSS кеңейтүүсү катары LESS өзгөрмөлөрдү, коддун көп жолу колдонулуучу фрагменттери үчүн миксиндерди, жөнөкөй математика үчүн операцияларды, уя салууларды жана ал тургай түс функцияларын камтыйт.

Көбүрөөк билүү

Көбүрөөк билүү үчүн http://lesscss.org/ расмий веб-сайтына кириңиз .

Өзгөрмөлөр

CSSте түстөрдү жана пикселдик маанилерди башкаруу бир аз кыйналышы мүмкүн, адатта көчүрүү жана чаптоо менен толгон. LESS менен эмес — түстөрдү же пикселдик маанилерди өзгөрмө катары дайындап, аларды бир жолу өзгөртүңүз.

Mixins

Ушул үч чек ара радиусу декларациясын сиз кадимки CSSде жасашыңыз керекпи? Эми алар аралашмалардын, коддун үзүндүлөрүнүн жардамы менен бир сапка түшүп калды, сиз каалаган жерде кайра колдоно аласыз.

Операциялар

Операциялар менен ылдам математиканы жасап, торуңузду, алдыңкы жана эң ийкемдүү кылыңыз. Көбөйтүңүз, бөлүңүз, кошуңуз жана азайтыңыз.

Жашылчалар жана шилтемелер

`@bodyBackground`	`@white`	Барактын фонунун түсү
`@textColor`	`@grayDark`	Бүткүл негизги тексттин демейки түсү, аталыштар жана башкалар
`@linkColor`	`#08c`	Демейки шилтеме текстинин түсү
`@linkColorHover`	`darken(@linkColor, 15%)`	Демейки шилтеме текстинин курсордун түсү

Тор системасы

`@gridColumns`	12
`@gridColumnWidth`	60px
`@gridGutterWidth`	20px
`@fluidGridColumnWidth`	6.382978723%
`@fluidGridGutterWidth`	2.127659574%

Типография

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Менло, Монако, "Courier New", monospace
`@baseFontSize`	13px	Пиксел болушу керек
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px	Пиксел болушу керек
`@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`	#ээ
`@white`	#fff

Акцент түстөр

`@blue`	#049cdb
`@green`	#46a546
`@red`	#9d261d
`@yellow`	#ffc40d
`@orange`	#f89406
`@pink`	#c3325f
`@purple`	#7a43b6

Компоненттер

Buttons

`@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

Navbar

`@navbarHeight`	40px
`@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`

Баатыр бирдиги

`@heroUnitBackground`	`@grayLighter`
`@heroUnitHeadingColor`	`inherit`
`@heroUnitLeadColor`	`inhereit`

Миксиндер жөнүндө

Негизги аралашмалар

Негизги миксин - бул CSS үзүндүсү үчүн толуктоо же жарым-жартылай. Алар CSS классы сыяктуу жазылган жана аларды каалаган жерден чакырса болот.

. элемент {
  . clearfix ();
}

Параметрдик аралашмалар

Параметрдик миксин негизги аралашма сыяктуу, бирок ал кошумча демейки маанилери менен параметрлерди (демек, аты) кабыл алат.

. элемент {
  . чек - радиус ( 4px );
}

Оңой өзүңүздүн кошуңуз

Дээрлик бардык Bootstrap аралашмалары mixins.less ичинде сакталат, бул сонун утилита .less файлы, ал сизге миксинди куралдар топтомундагы .less файлдарынын каалаганында колдонууга мүмкүндүк берет.

Ошентип, улантып, барларды колдонуңуз же өзүңүздүнүңүздүн каалаганыңызды кошуудан тартынбаңыз.

Миксиндер камтылган

Коммуналдык кызматтар

Mixin	Параметрлер	Колдонуу
`.clearfix()`	эч ким	Ичиндеги сүзмөлөрдү тазалоо үчүн каалаган ата-энеге кошуңуз
`.tab-focus()`	эч ким	Webkit фокус стилин жана тегерек Firefox контурун колдонуңуз
`.center-block()`	эч ким	Блок деңгээлиндеги элементти автоматтык түрдө борборлоштуруу`margin: auto`
`.ie7-inline-block()`	эч ким	`display: inline-block`IE7 колдоосун алуу үчүн кадимкидей эле колдонуңуз
`.size()`	`@height @width`	Бийиктигин жана туурасын бир сапка тез орнотуңуз
`.square()`	`@size`	Туурасы `.size()`менен бийиктигин бирдей мааниге коюу үчүн курулат
`.opacity()`	`@opacity`	Тунуктуулук пайызын бүтүн сандар менен коюңуз (мисалы, "50" же "75")

Формалар

Mixin	Параметрлер	Колдонуу
`.placeholder()`	`@color: @placeholderText`	`placeholder`Киргизүү үчүн тексттин түсүн коюңуз

Типография

Mixin	Параметрлер	Колдонуу
`#font > #family > .serif()`	эч ким	Элементти serif шрифт стекинен колдонуңуз
`#font > #family > .sans-serif()`	эч ким	Элементти sans-serif шрифт стекинен колдонуңуз
`#font > #family > .monospace()`	эч ким	Элементти мономейкиндик шрифт стекинен колдонуңуз
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Ариптин өлчөмүн, салмагын жана башын оңой эле коюңуз
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Ариптер үй-бүлөсүн serif кылып коюңуз жана өлчөмүн, салмагын жана башын көзөмөлдөңүз
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Ариптер үй-бүлөсүн sans-serif кылып коюп, өлчөмүн, салмагын жана алдыңкылыгын көзөмөлдөңүз
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Ариптер үй-бүлөсүн мономейкиндикке коюп, өлчөмүн, салмагын жана алдыңкылыгын көзөмөлдөңүз

Тор системасы

Mixin	Параметрлер	Колдонуу
`.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 касиеттери

Mixin	Параметрлер	Колдонуу
`.border-radius()`	`@radius`	Элементтин бурчтарын тегеретиңиз. Жалгыз маани же мейкиндик менен бөлүнгөн төрт маани болушу мүмкүн
`.box-shadow()`	`@shadow`	Элементке тамчы көлөкө кошуу
`.transition()`	`@transition`	CSS3 өтүү эффектин кошуу (мисалы, `all .2s linear`)
`.rotate()`	`@degrees`	Элементти n градуска буруңуз
`.scale()`	`@ratio`	Элементти баштапкы өлчөмүнөн n эсеге чейин масштабдаңыз
`.translate()`	`@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 3D трансформацияларын колдонууда мазмундун бүлбүлдөгөнүн болтурбоо
`.resizable()`	`@direction: both`	Оң жана ылдый жагында каалаган элементтин өлчөмүн өзгөртүүгө мүмкүндүк бериңиз
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Каалаган элементтин мазмунун CSS3 мамычаларын колдонуңуз

Фондор жана градиенттер

Mixin	Параметрлер	Колдонуу
`#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`	Градиентти жана бир аз караңгыраак чекти дайындоо үчүн баскычтар үчүн колдонулат

Эскертүү: ��герде сиз GitHub'ка өзгөртүү өтүнүчүн CSS менен жөнөтүп жатсаңыз, анда сиз CSSти ушул ыкмалардын бири аркылуу кайра компиляциялашыңыз керек .

Компиляция үчүн куралдар

makefile менен түйүн

LESS буйрук сабын компиляторун орнотуңуз жана uglify-js глобалдуу түрдө npm менен төмөнкү буйрукту иштетиңиз:

$ npm орнотуу -g азыраак uglify-js

Орнотулгандан кийин жөн гана makeжүктөө каталогуңуздун түпкүлүгүнөн иштетиңиз жана баары даяр.

Кошумчалай кетсек , эгер сизде watchr орнотулган болсо, сиз жүктөө libиндеги файлды түзөткөн make watchсайын жүктөөчү линияны автоматтык түрдө кайра куруу үчүн чуркай аласыз (бул талап кылынбайт, жөн гана ыңгайлуу ыкма).

Command line

Node аркылуу LESS буйрук сабы куралын орнотуп, төмөнкү буйрукту аткарыңыз:

$ lessc ./less/bootstrap.less > bootstrap.css

--compressКээ бир байттарды сактоого аракет кылып жатсаңыз, ошол буйрукка камтууну унутпаңыз !

Javascript

Акыркы Less.js жүктөп алып, ага жолду (жана Bootstrap) <head>.

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

.less файлдарын кайра компиляциялоо үчүн аларды сактап, баракчаңызды кайра жүктөңүз. Less.js аларды компиляциялап, жергиликтүү сактагычта сактайт.

Расмий эмес Mac колдонмосу

Бейрасмий Mac колдонмосу .less файлдарынын каталогдорун карап, көргөн .less файлын ар бир сактагандан кийин кодду жергиликтүү файлдарга түзөт.

Кааласаңыз, колдонмодогу артыкчылыктарды автоматтык түрдө кичирейтүү жана компиляцияланган файлдар кайсы каталогдо бүтөрүн которуштурууга болот.

АЗ менен курулган

Эмне үчүн АЗ?

Эмне камтылган?

Көбүрөөк билүү

Өзгөрмөлөр

Mixins

Операциялар

Bootstrap өзгөрмөлөрү LESS өзгөрмөлөр, алардын маанилери жана колдонуу көрсөтмөлөрү

Жашылчалар жана шилтемелер

Тор системасы

Типография

Таблицалар

Боз түстөр

Акцент түстөр

Компоненттер

Buttons

Формалар

Мамлекеттер жана эскертүүлөрдү түзүү

Navbar

Ашылма тизмелер

Баатыр бирдиги

Bootstrap аралашмасы

Миксиндер жөнүндө

Негизги аралашмалар

Параметрдик аралашмалар

Оңой өзүңүздүн кошуңуз

Миксиндер камтылган

Коммуналдык кызматтар

Формалар

Типография

Тор системасы

CSS3 касиеттери

Фондор жана градиенттер

LESS менен Bootstrap компиляциясы

Компиляция үчүн куралдар

makefile менен түйүн

Command line

Javascript

Расмий эмес Mac колдонмосу

Көбүрөөк Mac колдонмолору

Crunch

CodeKit

Жөнөкөй