Bootstrap белән LESS куллану

Bootstrap'ның CSS төзү өчен кулланылган үзгәрүчәннәрдән, миксиннардан һәм күбрәк кулланылган LESS белән Bootstrap'ны көйләгез һәм киңәйтегез .

Нигә аз?

Ботстрап LESS белән ясалган, динамик стиль таблицасы теле, безнең яхшы дустыбыз Алексис Селлиер тарафыннан ясалган . Бу системага нигезләнгән CSSны тизрәк, җиңелрәк һәм кызыклырак итә.

Нәрсә кертелгән?

CSS-ның киңәйтелеше буларак, LESS үзгәрүчәннәрне, кабат кулланыла торган кодның фрагментлары өчен миксиннарны, гади математика, оя кору, хәтта төс функцияләрен үз эченә ала.

Тулырак

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

Variзгәрешләр

CSS-та төсләр һәм пиксель кыйммәтләре белән идарә итү бераз авырту китерергә мөмкин, гадәттә күчереп язу белән тулы. Бик аз булса да - төсләр яки пиксель кыйммәтләрен үзгәрүчән итеп билгеләгез һәм аларны бер тапкыр үзгәртегез.

Миксинс

Бу өч чик-радиус декларациясен сез регуляр CSSда ясарга тиеш? Хәзер алар миксиннар, теләсә кайда куллана алырлык код фрагментлары ярдәмендә бер сызыкка төштеләр.

Операцияләр

Операциядә математиканы эшләп, челтәрегезне әйдәп баручы һәм супер сыгылмалы итегез. 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`	Менло, Монако, "Курьер Яңа", моноспос
`@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`	#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`	# 3а87ад
`@infoBackground`	# d9edf7

Навбар

`@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 );
}

Yourзегезнекен өстәгез

Bootstrap миксиннарының барысы да диярлек mixins.less, искиткеч файдалы .less файлында саклана, бу сезгә кораллар җыелмасында.

Шулай итеп, алга барыгыз, булганнарын кулланыгыз яки үзегезнекен кирәк булганда өстәргә ирек бирегез.

Миксиннар кертелгән

Коммуналь хезмәтләр

Миксин	Параметрлар	Куллану
`.clearfix()`	юк	Эчтәге йөзүләрне чистарту өчен теләсә нинди ата-анага өстәгез
`.tab-focus()`	юк	Вебкит фокус стилен һәм Firefox түгәрәк планын кулланыгыз
`.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()`	юк	Элементны моноспос шрифт стакасын кулланыгыз
`#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`	Шрифтлар гаиләсен санс-серифка куегыз, зурлыкны, авырлыкны һәм әйдәп баручы әйберләрне контрольдә тотыгыз
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Шрифтлар гаиләсен моносмоска урнаштырыгыз, зурлык, авырлык һәм әйдәп баручы контроль

Челтәр системасы

Миксин	Параметрлар	Куллану
`.container-fixed()`	юк	Эчтәлекне тоту өчен горизонталь үзәк контейнер ясагыз
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	N баганалары һәм х пиксель киңлеге белән пиксель челтәр системасы (контейнер, рәт, баганалар) булдырыгыз
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	N баганалары һәм х % киңлеге булган челтәр системасын булдырыгыз
`#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 3D трансформацияләрен кулланганда эчтәлекнең ялтыравыклы булуын булдырмагыз
`.resizable()`	`@direction: both`	Уңда һәм аста теләсә нинди элементны үзгәртегез
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	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`	Градиент һәм бераз караңгы чикне билгеләү өчен төймәләр өчен кулланыла

Искәрмә: Әгәр сез GitHub'ка үзгәртелгән CSS белән тарту соравын җибәрәсез икән, сез бу ысулларның теләсә кайсысы аша CSSны компиляцияләргә тиеш .

Компиляцияләү өчен кораллар

Макфил белән төен

LESS командование компилярын урнаштырыгыз һәм uglify-js глобаль рәвештә npm белән түбәндәге боерыкны эшләгез:

$ npm урнаштыру -g азрак углиф-js

Урнаштырылганнан соң make, сезнең bootstrap каталогының тамырыннан эшләгез һәм сез барыгыз да әзер.

Өстәвенә, сездә сәгать урнаштырылган булса make watch, bootstrap lib-та файлны редакцияләгән саен bootstrap автоматик рәвештә яңадан торгызылырга мөмкин (бу кирәк түгел, уңайлык ысулы гына).

Команда сызыгы

Node аша LESS командование коралын урнаштырыгыз һәм түбәндәге боерыкны эшләгез:

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

Әгәр дә сез кайбер байтларны --compressсакларга тырышсагыз, бу боерыкка кертегез!

Javascript

Соңгы Less.js -ны йөкләгез һәм аңа юлны (һәм Bootstrap) кертегез <head>.

<сылтама rel = "стиль таблицасы / азрак" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" > </script>

.Лайсыз файлларны кабатлау өчен, аларны саклагыз һәм битегезне яңадан йөкләгез. Less.js аларны туплый һәм җирле саклагычта саклый.

Рәсми булмаган Mac кушымтасы

Рәсми булмаган Mac кушымтасы .less файлларның каталогларын карый һәм караган .less файлның сакланганнан соң кодны җирле файлларга туплый.

Әгәр теләсәгез, сез кушымтадагы өстенлекләрне автоматик минимальләштерү өчен һәм тупланган файлларның нинди каталог белән тәмамлануы турында алыштыра аласыз.

LESS белән төзелгән

Нигә аз?

Нәрсә кертелгән?

Тулырак

Variзгәрешләр

Миксинс

Операцияләр

Bootstrap үзгәрүчәннәре аз үзгәрүләр, аларның кыйммәтләре, куллану күрсәтмәләре

Скафолдинг һәм сылтамалар

Челтәр системасы

Типография

Таблицалар

Соры төсләр

Тиз төсләр

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

Кнопкалар

Формалар

Шартлар һәм хәбәрләр

Навбар

Тамчы

Герой берәмлеге

Ботстрап миксиннары

Миксиннар турында

Төп миксиннар

Параметрик миксиннар

Yourзегезнекен өстәгез

Миксиннар кертелгән

Коммуналь хезмәтләр

Формалар

Типография

Челтәр системасы

CSS3 үзлекләре

Фон һәм градиентлар

LESS белән Bootstrap төзү

Компиляцияләү өчен кораллар

Макфил белән төен

Команда сызыгы

Javascript

Рәсми булмаган Mac кушымтасы

Күбрәк Mac кушымталары

Бәрелү

CodeKit

Гади