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

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

Неліктен АЗ?

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

Не кіреді?

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

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

Қосымша ақпарат алу үшін 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 сыныбы сияқты жазылған және оларды кез келген жерде шақыруға болады.

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

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

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

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

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

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

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

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

Утилиталар

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

Пішіндер

Миксин	Параметрлер	Қолданылуы
`.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 файлын әрбір сақтаудан кейін кодты жергілікті файлдарға құрастырады.

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

АЗырақ салынған

Неліктен АЗ?

Не кіреді?

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

Айнымалылар

Миксиндер

Операциялар

Bootstrap айнымалылары LESS айнымалылар, олардың мәндері және пайдалану нұсқаулары

Орналасу және сілтемелер

Тор жүйесі

Типография

Кестелер

Сұр реңктері

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

Құрамдас бөліктер

Түймелер

Пішіндер

Пішін күйлері мен ескертулер

Navbar

Ашылмалы тізімдер

Батыр бірлігі

Жүктеу миксиндері

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

Негізгі қоспалар

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

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

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

Утилиталар

Пішіндер

Типография

Тор жүйесі

CSS3 сипаттары

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

LESS көмегімен Bootstrap құрастыру

Компиляцияға арналған құралдар

makefile бар түйін

Пәрмен жолы

Javascript

Бейресми Mac қолданбасы

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

Қытырлақ

CodeKit

Қарапайым