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

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

Неліктен АЗ?

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

Не кіреді?

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

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

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

Айнымалылар

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

Миксиндер

Бұл үш шекаралық радиус декларациясын әдеттегі CSS-де жасау керек пе? Енді олар кез келген жерде қайта пайдалануға болатын миксиндердің, код үзінділерінің көмегімен бір жолға төмендеді.

Операциялар

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

Гиперсілтемелер

`@linkColor`	#08c	Әдепкі сілтеме мәтінінің түсі
`@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`	#еее
`@white`	#фф

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

`@blue`	#049кдб
`@green`	#46a546
`@red`	#9d261d
`@yellow`	#ffc40d
`@orange`	#f89406
`@pink`	#c3325f
`@purple`	#7a43b6

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

Түймелер

`@primaryButtonBackground`	`@linkColor`

Пішіндер

`@placeholderText`	`@grayLight`

Navbar

`@navbarHeight`	40px
`@navbarBackground`	`@grayDarker`
`@navbarBackgroundHighlight`	`@grayDark`
`@navbarText`	`@grayLight`
`@navbarLinkColor`	`@grayLight`
`@navbarLinkColorHover`	`@white`

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

`@warningText`	#f3edd2
`@warningBackground`	#c09853
`@errorText`	#b94a48
`@errorBackground`	#f2dede
`@successText`	#468847
`@successBackground`	#dff0d8
`@infoText`	#3a87ad
`@infoBackground`	#d9edf7

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

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

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

Тор жүйесі

Миксин	Параметрлер	Қолданылуы
`.container-fixed()`	жоқ	Мазмұнды сақтау үшін бекітілген ені (белгісі бар `@siteWidth`) контейнерді қамтамасыз етіңіз
`.columns()`	`@columns: 1`	Бағандардың кез келген санын қамтитын тор бағанасын құрастырыңыз (әдепкі бойынша 1 баған)
`.offset()`	`@columns: 1`	Кез келген баған санын қамтитын сол жақ жиегі бар тор бағанының орнын ауыстырыңыз
`.gridColumn()`	жоқ	Элементті тор бағаны сияқты қалқымалы етіп жасаңыз

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`	Элементті х және у жазықтықтарында жылжытыңыз
`.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`	Create a cross-browser radial background gradient
`.#gradient > .striped()`	`@color, @angle`	Create a cross-browser striped background gradient
`.#gradientBar()`	`@primaryColor, @secondaryColor`	Used for buttons to assign a gradient and slightly darker border

Note: If you're submitting a pull request to GitHub with modified CSS, you must recompile the CSS via any of these methods.

Tools for compiling

Node with makefile

Install the LESS command line compiler with npm by running the following command:

$ npm install less

Once installed just run make from the root of your bootstrap directory and you're all set.

Additionally, if you have watchr installed, you may run make watch to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).

Command line

Install the LESS command line tool via Node and run the following command:

$ lessc ./lib/bootstrap.less > bootstrap.css

Be sure to include --compress in that command if you're trying to save some bytes!

Javascript

Download the latest Less.js and include the path to it (and Bootstrap) in the <head>.

<link rel="stylesheet/less" href="/path/to/bootstrap.less">
<script src="/path/to/less.js"></script>

To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.

Unofficial Mac app

The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file.

If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.

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

Неліктен АЗ?

Не кіреді?

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

Айнымалылар

Миксиндер

Операциялар

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

Гиперсілтемелер

Тор жүйесі

Типография

Сұр реңктері

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

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

Түймелер

Пішіндер

Navbar

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

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

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

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

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

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

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

Утилиталар

Пішіндер

Типография

Тор жүйесі

CSS3 сипаттары

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

Compiling Bootstrap with LESS

Tools for compiling

Node with makefile

Command line

Javascript

Unofficial Mac app

More Mac apps

Crunch

CodeKit

Қарапайым