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

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

Нигә аз?

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

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

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

Тулырак

Аз CSS

Күбрәк белү өчен рәсми сайтка керегез 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
@@dropdownDividerTop #e5e5e5
@@dropdownDividerBottom @white

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

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

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

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

Төп миксин асылда CSS фрагменты өчен өлешчә яки өлешчә. Алар CSS сыйныфы кебек язылган һәм теләсә кайда шалтыратырга мөмкин.

  1. . элемент {
  2. . Clearfix ();
  3. }

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

Параметрик миксин төп миксинга охшаган, ләкин ул шулай ук ​​параметрларны (шулай итеп исем) өстәмә килешү кыйммәтләре белән кабул итә.

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

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

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

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

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

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

Миксин Параметрлар Куллану
.clearfix() юк Эчтәге йөзүләрне чистарту өчен теләсә нинди ата-анага өстәгез
.tab-focus() юк Вебкит фокус стилен һәм Firefox түгәрәк планын кулланыгыз
.center-block() юк Авто үзәк блок дәрәҗәсендәге элементны кулланаmargin: auto
.ie7-inline-block() юк display: inline-blockIE7 ярдәмен алу өчен регуляр рәвештә кулланыгыз
.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 баганаларын кулланган теләсә нинди элементның эчтәлеген ясагыз
.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 Градиент һәм бераз караңгы чикне билгеләү өчен төймәләр өчен кулланыла
Искәрмә: Әгәр сез GitHub'ка үзгәртелгән CSS белән тарту соравын җибәрәсез икән, сез бу ысулларның теләсә кайсысы аша CSSны компиляцияләргә тиеш .

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

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

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

$ npm урнаштыру -g азрак jshint каникуллары uglify-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 файлның сакланганнан соң кодны җирле файлларга туплый.

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

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

Бәрелү

Crunch - Adobe Air'та төзелгән бик матур LESS редакторы һәм компиляциясе.

CodeKit

Рәсми булмаган Mac кушымтасы белән бер үк егет тарафыннан ясалган CodeKit - LESS, SASS, Stylus һәм CoffeeScript туплаган Mac кушымтасы.

Гади

LESS файлларын тарту һәм төшерү өчен Mac, Linux, һәм PC кушымтасы. Моннан тыш, чыганак коды GitHub'та .