Използване на LESS с Bootstrap
Персонализирайте и разширете Bootstrap с LESS , CSS препроцесор, за да се възползвате от променливите, миксините и други, използвани за изграждане на 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 |
#049cdb | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
Компоненти
Бутони
@primaryButtonBackground |
@linkColor |
Форми
@placeholderText |
@grayLight |
Навигационна лента
@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 |
Bootstrap mixins
Относно миксините
Основни миксини
Основният миксин е по същество включване или частично за фрагмент от 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() |
нито един | Направете елемент да използва набор от безсерифни шрифтове |
#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 |
Задайте фамилия шрифтове на monospace и контролирайте размера, теглото и водещия |
Мрежова система
| Миксин | Параметри | Използване |
|---|---|---|
.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 |
Преместете елемент в равнините x и y |
.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 |
Използва се за бутони за задаване на градиент и малко по-тъмна рамка |
Компилиране на Bootstrap с LESS
Инструменти за компилиране
Възел с makefile
Инсталирайте LESS компилатора на командния ред и uglify-js глобално с npm, като изпълните следната команда:
$ npm install -g less uglify-js
Веднъж инсталиран, просто стартирайте makeот корена на вашата директория за стартиране и сте готови.
Освен това, ако сте инсталирали watchr , можете да стартирате, make watchза да имате автоматично повторно изграждане на bootstrap всеки път, когато редактирате файл в библиотеката на bootstrap (това не е задължително, просто метод за удобство).
Командна линия
Инсталирайте инструмента за команден ред LESS чрез Node и изпълнете следната команда:
$ 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 е страхотно изглеждащ LESS редактор и компилатор, изграден на Adobe Air.
CodeKit
Създаден от същия човек като неофициалното приложение за Mac, CodeKit е приложение за Mac, което компилира LESS, SASS, Stylus и CoffeeScript.
Лесно
Приложение за Mac, Linux и PC за компилиране с плъзгане и пускане на LESS файлове. Освен това изходният код е на GitHub .