Bootstrap көмегімен LESS пайдалану
Bootstrap CSS құру үшін қолданылатын айнымалы мәндердің, миксиндердің және т.б. артықшылықтарын пайдалану үшін LESS , CSS препроцессоры арқылы Bootstrap қолданбасын теңшеңіз және кеңейтіңіз .
АЗырақ салынған
Неліктен АЗ?
Bootstrap негізі LESS көмегімен жасалған, бұл біздің жақсы досымыз Алексис Селлиер жасаған динамикалық стильдер тілі . Ол жүйеге негізделген CSS әзірлеуді жылдамырақ, оңайырақ және қызықты етеді.
Не кіреді?
CSS кеңейтімі ретінде LESS айнымалыларды, қайта пайдалануға болатын код үзінділеріне арналған миксиндерді, қарапайым математикаға арналған операцияларды, кірістіру және тіпті түс функцияларын қамтиды.
Айнымалылар
CSS-те түстер мен пиксель мәндерін басқару әдетте көшіру мен қоюға толы аздап ауыруы мүмкін. LESS параметрімен емес — айнымалылар ретінде түстерді немесе пиксель мәндерін тағайындаңыз және оларды бір рет өзгертіңіз.
Миксиндер
Бұл үш шекаралық радиус декларациясын әдеттегі CSS-де жасау керек пе? Енді олар кез келген жерде қайта пайдалануға болатын миксиндердің, код үзінділерінің көмегімен бір жолға төмендеді.
Операциялар
Операциялармен жылдам математиканы орындау арқылы торыңызды, жетекші және өте икемді етіңіз. CSS ақыл-ойына жету жолын көбейтіңіз, бөліңіз, қосыңыз және шегеріңіз.
Bootstrap айнымалылары LESS айнымалылар, олардың мәндері және пайдалану нұсқаулары
Гиперсілтемелер
@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 |
#c09853 | |
@warningBackground |
#f3edd2 | |
@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-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 |
Қаріптер тобын 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 % ені бар алдыңғы тор жүйесін жасаңыз |
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 |
Браузер арасындағы радиалды фондық градиент жасаңыз |
#gradient > .striped() |
@color, @angle |
Браузер арасындағы жолақты фон градиентін жасаңыз |
#gradientBar() |
@primaryColor, @secondaryColor |
Градиент және сәл күңгірт жиек тағайындау үшін түймелер үшін пайдаланылады |
LESS көмегімен Bootstrap құрастыру
Компиляцияға арналған құралдар
makefile бар түйін
Келесі пәрменді іске қосу арқылы LESS пәрмен жолы компиляторын және uglify-js жаһандық npm көмегімен орнатыңыз:
$ npm орнату -g кем uglify-js
Орнатқаннан кейін makeжүктеу каталогының түбірінен іске қосыңыз және бәрі дайын.
Бұған қоса, егер сізде watchr орнатылған make watchболса, bootstrap lib ішіндегі файлды өңдеген сайын жүктеуді автоматты түрде қайта құру үшін іске қосуға болады (бұл қажет емес, жай ғана ыңғайлы әдіс).
Пәрмен жолы
Түйін арқылы LESS пәрмен жолы құралын орнатыңыз және келесі пәрменді орындаңыз:
$ lessc ./lib/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 жүйесінде .