Bootstrap көмегімен LESS пайдалану

Bootstrap CSS құру үшін қолданылатын айнымалы мәндердің, миксиндердің және т.б. артықшылықтарын пайдалану үшін LESS , CSS препроцессоры арқылы Bootstrap қолданбасын теңшеңіз және кеңейтіңіз .

Неліктен АЗ?

Bootstrap негізі LESS көмегімен жасалған, бұл біздің жақсы досымыз Алексис Селлиер жасаған динамикалық стильдер тілі . Ол жүйеге негізделген CSS әзірлеуді жылдамырақ, оңайырақ және қызықты етеді.

Не кіреді?

CSS кеңейтімі ретінде LESS айнымалыларды, қайта пайдалануға болатын код үзінділеріне арналған миксиндерді, қарапайым математикаға арналған операцияларды, кірістіру және тіпті түс функцияларын қамтиды.

Көбірек білу үшін

АЗ CSS

Қосымша ақпарат алу үшін http://lesscss.org/ ресми веб-сайтына кіріңіз .

Айнымалылар

CSS-те түстер мен пиксель мәндерін басқару әдетте көшіру мен қоюға толы аздап ауыруы мүмкін. LESS параметрімен емес — айнымалылар ретінде түстерді немесе пиксель мәндерін тағайындаңыз және оларды бір рет өзгертіңіз.

Миксиндер

Бұл үш шекаралық радиус декларациясын әдеттегі 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 Менло, Монако, «Courier New», монокеңістік
@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 #фф

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

@blue #049кдб
@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 #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 сыныбы сияқты жазылған және оларды кез келген жерде шақыруға болады.

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

Параметрлік қоспалар

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

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

Өзіңізді оңай қосыңыз

Bootstrap миксиндерінің барлығы дерлік mixins.less ішінде сақталады, тамаша утилита .less файлы, ол миксерді құралдар жинағындағы .less файлдарының кез келгенінде пайдалануға мүмкіндік береді.

Сондықтан, барын пайдаланыңыз немесе қажетінше өзіңізді қосыңыз.

Қосылған миксиндер

Утилиталар

Миксин Параметрлер Қолданылуы
.clearfix() жоқ Ішіндегі қалтқыларды тазалау үшін кез келген ата-анаға қосыңыз
.tab-focus() жоқ Webkit фокус стилін және 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 Қаріптер тобын serif етіп орнатыңыз және өлшемді, салмақты және алдыңғы қатарды басқарыңыз
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Қаріптер тобын sans-serif етіп орнатыңыз және өлшемді, салмақты және алдыңғы қатарды басқарыңыз
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Қаріптер тобын монокеңістікке орнатыңыз және өлшемді, салмақты және алдыңғы қатарды басқарыңыз

Тор жүйесі

Миксин Параметрлер Қолданылуы
.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 сипаттары

Миксин Параметрлер Қолданылуы
.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)

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

Миксин Параметрлер Қолданылуы
#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

Орнатқаннан кейін makeжүктеу каталогының түбірінен іске қосыңыз және бәрі дайын.

Бұған қоса, егер сізде watchr орнатылған make watchболса, bootstrap lib ішіндегі файлды өңдеген сайын жүктеуді автоматты түрде қайта құру үшін іске қосуға болады (бұл қажет емес, жай ғана ыңғайлы әдіс).

Пәрмен жолы

Түйін арқылы 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 файлын әрбір сақтаудан кейін кодты жергілікті файлдарға құрастырады.

Қаласаңыз, қолданбадағы теңшелімдерді автоматты түрде кішірейту және құрастырылған файлдар қай каталогта аяқталатынын ауыстыра аласыз.

Қосымша Mac қолданбалары

Қытырлақ

Crunch - Adobe Air жүйесінде жасалған тамаша көрінетін LESS редакторы және компиляторы.

CodeKit

Бейресми Mac қолданбасы сияқты бір адам жасаған CodeKit - LESS, SASS, Stylus және CoffeeScript құрастыратын Mac қолданбасы.

Қарапайым

LESS файлдарын апарып тастауға арналған Mac, Linux және ДК қолданбасы. Сонымен қатар, бастапқы код GitHub жүйесінде .