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

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

Эмне үчүн АЗ?

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

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

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

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

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

Өзгөрмөлөр

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

Миксиндер

Ушул үч чек ара радиусу декларациясын сиз кадимки 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`
`@@dropdownDividerTop`	`#e5e5e5`
`@@dropdownDividerBottom`	`@white`

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

`@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 мамычаларын колдонуңуз
`.hyphens()`	`@mode: auto`	Каалаганыңызда CSS3 дефис (камтыйт `word-wrap: break-word`)

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

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 буйрук сабын компиляторун, JSHint, Recess жана uglify-jsти npm менен глобалдуу түрдө төмөнкү буйрукту аткаруу менен орнотуңуз:

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

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

Кошумчалай кетсек , эгер сизде 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 файлын ар бир сактагандан кийин кодду жергиликтүү файлдарга түзөт.

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

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

Эмне үчүн АЗ?

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

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

Өзгөрмөлөр

Миксиндер

Операциялар

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

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

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

Типография

Таблицалар

Боз түстөр

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

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

Buttons

Формалар

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

Navbar

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

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

Bootstrap аралашмасы

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

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

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

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

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

Утилиталар

Формалар

Типография

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

CSS3 касиеттери

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

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

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

makefile менен түйүн

Command line

Javascript

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

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

Crunch

CodeKit

Жөнөкөй