Bootstrap белән LESS куллану
Bootstrap'ның CSS төзү өчен кулланылган үзгәрүчәннәрдән, миксиннардан һәм күбрәк кулланылган LESS белән Bootstrap'ны көйләгез һәм киңәйтегез .
LESS белән төзелгән
Нигә аз?
Ботстрап LESS белән ясалган, динамик стиль таблицасы теле, безнең яхшы дустыбыз Алексис Селлиер тарафыннан ясалган . Бу системага нигезләнгән CSSны тизрәк, җиңелрәк һәм кызыклырак итә.
Нәрсә кертелгән?
CSS киңәйтү буларак, LESS үзгәрүчәннәрне, кабат кулланыла торган кодның фрагментлары өчен миксиннарны, гади математика өчен операцияләр, оя кору, хәтта төс функцияләрен үз эченә ала.
Variзгәрешләр
CSS-та төсләр һәм пиксель кыйммәтләре белән идарә итү бераз авырту китерергә мөмкин, гадәттә күчереп язу белән тулы. Бик аз булса да - төсләр яки пиксель кыйммәтләрен үзгәрүчән итеп билгеләгез һәм аларны бер тапкыр үзгәртегез.
Миксинс
Бу өч чик-радиус декларациясен сез регуляр CSSда ясарга тиеш? Хәзер алар миксиннар, теләсә кайда куллана алырлык код фрагментлары ярдәмендә бер сызыкка төштеләр.
Операцияләр
Операциядә математиканы эшләп, челтәрегезне әйдәп баручы һәм супер сыгылмалы итегез. CSS акылына юлны тапкырлагыз, бүлегез, өстәгез һәм алыгыз.
Bootstrap үзгәрүчәннәре аз үзгәрүләр, аларның кыйммәтләре, куллану күрсәтмәләре
Гиперштамалар
@linkColor |
# 08с | Килешү сылтама текст төсе | |
@linkColorHover |
darken(@linkColor, 15%) |
Килешү сылтама текстның төсе |
Челтәр системасы
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2.127659574% |
Типография
@baseFontSize |
13px |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
18px |
Соры төсләр
@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 |
Компонентлар
Кнопкалар
@primaryButtonBackground |
@linkColor |
Формалар
@placeholderText |
@grayLight |
Навбар
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
Шартлар һәм хәбәрләр
@warningText |
# c09853 | |
@warningBackground |
# f3edd2 | |
@errorText |
# b94a48 | |
@errorBackground |
# f2dede | |
@successText |
# 468847 | |
@successBackground |
# dff0d8 | |
@infoText |
# 3а87ад | |
@infoBackground |
# d9edf7 |
Ботстрап миксиннары
Миксиннар турында
Төп миксиннар
Төп миксин асылда CSS фрагменты өчен өлешчә яки өлешчә. Алар CSS сыйныфы кебек язылган һәм теләсә кайда шалтыратырга мөмкин.
- . элемент {
- . Clearfix ();
- }
Параметрик миксиннар
Параметрик миксин төп миксинга охшаган, ләкин ул шулай ук параметрларны (шулай итеп исем) өстәмә килешү кыйммәтләре белән кабул итә.
- . элемент {
- . чик - радиус ( 4px );
- }
Yourзегезнекен өстәгез
Bootstrap миксиннарының барысы да диярлек mixins.less, искиткеч файдалы .less файлында саклана, бу сезгә кораллар җыелмасында теләсә нинди.
Шулай итеп, алга барыгыз, булганнарын кулланыгыз яки үзегезнекен кирәк булганда өстәргә ирек бирегез.
Миксиннар кертелгән
Коммуналь хезмәтләр
| Миксин | Параметрлар | Куллану |
|---|---|---|
.clearfix() |
юк | Эчтәге йөзүләрне чистарту өчен теләсә нинди ата-анага өстәгез |
.tab-focus() |
юк | Вебкит фокус стилен һәм Firefox түгәрәк планын кулланыгыз |
.center-block() |
юк | Авто үзәк блок дәрәҗәсендәге элементны кулланаmargin: auto |
.ie7-inline-block() |
юк | display: inline-blockIE7 ярдәмен алу өчен регуляр рәвештә кулланыгыз |
.size() |
@height: 5px, @width: 5px |
Биеклекне һәм киңлекне тиз бер сызыкка куегыз |
.square() |
@size: 5px |
.size()Киңлекне һәм биеклекне шул ук кыйммәткә куяр өчен төзелә |
.opacity() |
@opacity: 100 |
Барлык саннарда караңгылык процентын куегыз (мәсәлән, "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 баганалары һәм х % киңлеге булган челтәр системасын булдырыгыз |
CSS3 үзлекләре
| Миксин | Параметрлар | Куллану |
|---|---|---|
.border-radius() |
@radius: 5px |
Элемент почмакларын түгәрәкләгез. Бер кыйммәт яки дүрт киңлек белән аерылган кыйммәт булырга мөмкин |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
Элементка тамчы күләгә өстәгез |
.transition() |
@transition |
CSS3 күчү эффектын өстәгез (мәсәлән, all .2s linear) |
.rotate() |
@degrees |
N градус элементын әйләндерегез |
.scale() |
@ratio |
Элементны оригиналь күләменнән n тапкыр арттырыгыз |
.translate() |
@x: 0, @y: 0 |
X һәм y самолетларында элементны күчерегез |
.background-clip() |
@clip |
Элемент фонын кисегез (файдалы border-radius) |
.background-size() |
@size |
CSS3 аша фон рәсемнәренең зурлыгын контрольдә тоту |
.box-sizing() |
@boxmodel |
Элемент өчен тартма моделен үзгәртегез (мәсәлән, border-boxтулы киңлек өчен input) |
.user-select() |
@select |
Биттәге текст курсорын сайлау |
.resizable() |
@direction: both |
Уңда һәм аста теләсә нинди элементны үзгәртегез |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
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 |
Градиент һәм бераз караңгы чикне билгеләү өчен төймәләр өчен кулланыла |
LESS белән Bootstrap төзү
Компиляцияләү өчен кораллар
Макфил белән төен
LESS командование компилярын урнаштырыгыз һәм uglify-js глобаль рәвештә npm белән түбәндәге боерыкны эшләгез:
$ npm урнаштыру -g азрак uglify-js
Урнаштырылганнан соң make, сезнең bootstrap каталогының тамырыннан эшләгез һәм сез барыгыз да әзер.
Өстәвенә, сездә сәгать урнаштырылган булса make watch, bootstrap lib-та файлны редакцияләгән саен bootstrap автоматик рәвештә яңадан торгызылырга мөмкин (бу кирәк түгел, уңайлык ысулы гына).
Команда сызыгы
Node аша LESS командование коралын урнаштырыгыз һәм түбәндәге боерыкны эшләгез:
$ lessc ./lib/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'та .