Користење LESS со Bootstrap

Приспособете го и проширете го Bootstrap со LESS , CSS препроцесор, за да ги искористите предностите на променливите, миксините и повеќе што се користат за изградба на CSS на Bootstrap.

Зошто ПОМАЛКУ?

Bootstrap е направен со LESS во неговото јадро, динамичен јазик за стилски лист создаден од нашиот добар пријател, Алексис Селиер . Го прави развојот на CSS базиран на системи побрзо, полесно и позабавно.

Што е вклучено?

Како продолжување на CSS, LESS вклучува променливи, миксини за фрагменти од код што може да се користат повеќекратно, операции за едноставна математика, вгнездување, па дури и функции за боја.

Научи повеќе

Посетете ја официјалната веб-страница на http://lesscss.org/ за да дознаете повеќе.

Променливи

Управувањето со боите и вредностите на пиксели во CSS може да биде малку мачно, обично полно со копирање и залепување. Сепак, не со ПОМАЛКУ - доделете бои или вредности на пиксели како променливи и променете ги еднаш.

Мешавини

Оние три декларации за граничен радиус што треба да ги направите во редовниот CSS? Сега тие се сведуваат на една линија со помош на миксини, фрагменти од код што можете повторно да ги користите насекаде.

Операции

Направете ја вашата мрежа, водечка и посуперфлексибилна со тоа што ќе ја направите математиката во лет со операциите. Умножете, делете, додавајте и одземете го вашиот пат до разумноста на CSS.

Скелиња и врски

`@bodyBackground`	`@white`	Боја на позадината на страницата
`@textColor`	`@grayDark`	Стандардна боја на текст за целото тело, наслови и повеќе
`@linkColor`	`#08c`	Стандардна боја на текстот на врската
`@linkColorHover`	`darken(@linkColor, 15%)`	Стандардна боја на лебдењето на текстот на врската

Мрежен систем

`@gridColumns`	12
`@gridColumnWidth`	60 пиксели
`@gridGutterWidth`	20 пиксели
`@fluidGridColumnWidth`	6,382978723%
`@fluidGridGutterWidth`	2,127659574%

Типографија

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Менло, Монако, „Courier New“, монопростор
`@baseFontSize`	13 пиксели	Мора да биде пиксели
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18 пиксели	Мора да биде пиксели
`@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`	#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`	# 3a87ad
`@infoBackground`	#d9edf7

Navbar

`@navbarHeight`	40 пиксели
`@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 и може да се повикаат насекаде.

. елемент {
  . појасни ();
}

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

Параметарски миксин е исто како основен микс, но исто така прифаќа параметри (оттука и името) со опционални стандардни вредности.

. елемент {
  . граница - радиус ( 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()`	ниеден	Направете елемент да користи стек на фонтови 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`	Поставете го семејството на фонтови на sans-serif и контролирајте ја големината, тежината и водечките
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Поставете го семејството на фонтови на monospace и контролирајте ја големината, тежината и водечките

Мрежен систем

Измешајте	Параметри	Употреба
`.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`	Поместете елемент на 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од коренот на директориумот за подигање и сè сте подготвени.

Дополнително, ако имате инсталирано Watchr , може да се кандидира make watchза автоматско обновување на bootstrap секој пат кога уредувате датотека во подигнувачката lib (ова не е потребно, само практичен метод).

Командна линија

Инсталирајте ја алатката за командната линија LESS преку Node и извршете ја следнава команда:

$ 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 променливи ПОМАЛКУ променливи, нивните вредности и упатства за користење

Скелиња и врски

Мрежен систем

Типографија

Табели

Сиви бои

Акцентни бои

Компоненти

Копчиња

Форми

Формирајте состојби и предупредувања

Navbar

Паѓања

Херојска единица

Комбинации на Bootstrap

За мешаниците

Основни мешавини

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

Лесно додадете свој

Вклучени мешавини

Комунални услуги

Форми

Типографија

Мрежен систем

Својства на CSS3

Позадини и градиенти

Составување Bootstrap со LESS

Алатки за составување

Јазол со фајл

Командна линија

Javascript

Неофицијална апликација за Mac

Повеќе апликации за Mac

Крцкање

CodeKit

Едноставно