Używanie LESS z Bootstrapem

Dostosuj i rozszerz Bootstrap za pomocą preprocesora CSS LESS , aby wykorzystać zmienne, domieszki i inne elementy używane do tworzenia CSS Bootstrap.

Dlaczego MNIEJ?

Bootstrap jest zbudowany w oparciu o LESS, dynamiczny język arkuszy stylów stworzony przez naszego dobrego przyjaciela, Alexisa Selliera . Sprawia, że tworzenie CSS opartego na systemach jest szybsze, łatwiejsze i przyjemniejsze.

Co jest zawarte?

Jako rozszerzenie CSS, LESS zawiera zmienne, domieszki dla fragmentów kodu wielokrotnego użytku, operacje dla prostych funkcji matematycznych, zagnieżdżania, a nawet funkcji kolorów.

Ucz się więcej

Odwiedź oficjalną stronę internetową http://lesscss.org/ , aby dowiedzieć się więcej.

Zmienne

Zarządzanie kolorami i wartościami pikseli w CSS może być trochę uciążliwe, zwykle pełne kopiowania i wklejania. Jednak nie z LESS — przypisz kolory lub wartości pikseli jako zmienne i zmień je raz.

Mieszanki

Te trzy deklaracje granicznego promienia, które musisz zrobić w zwykłym CSS? Teraz sprowadzają się do jednej linii za pomocą domieszek, fragmentów kodu, których możesz użyć w dowolnym miejscu.

Operacje

Uczyń swoją siatkę, wiodącą i bardziej elastyczną, wykonując matematykę w locie z operacjami. Pomnóż, dziel, dodawaj i odejmuj swoją drogę do zdrowego stylu CSS.

Rusztowania i linki

`@bodyBackground`	`@white`	Kolor tła strony
`@textColor`	`@grayDark`	Domyślny kolor tekstu dla całej treści, nagłówków i nie tylko
`@linkColor`	`#08c`	Domyślny kolor tekstu linku
`@linkColorHover`	`darken(@linkColor, 15%)`	Domyślny kolor najechania na tekst linku

System siatki

`@gridColumns`	12
`@gridColumnWidth`	60px
`@gridGutterWidth`	20px
`@fluidGridColumnWidth`	6.382978723%
`@fluidGridGutterWidth`	2,127659574%

Typografia

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, bezszeryfowy
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monako, „Courier New”, monospace
`@baseFontSize`	13px	Musi być pikselami
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px	Musi być pikselami
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Stoły

`@tableBackground`	`transparent`
`@tableBackgroundAccent`	`#f9f9f9`
`@tableBackgroundHover`	`#f5f5f5`
`@tableBorder`	`ddd`

Kolory w skali szarości

`@black`	#000
`@grayDarker`	#222
`@grayDark`	#333
`@gray`	#555
`@grayLight`	#999
`@grayLighter`	#eee
`@white`	#ffff

Kolory akcentujące

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

składniki

guziki

`@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`

Formularze

`@placeholderText`	`@grayLight`
`@inputBackground`	`@white`
`@inputBorder`	`#ccc`
`@inputBorderRadius`	`3px`
`@inputDisabledBackground`	`@grayLighter`
`@formActionsBackground`	`#f5f5f5`

Stany formularzy i alerty

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

Pasek nawigacyjny

`@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`

Menu rozwijane

`@dropdownBackground`	`@white`
`@dropdownBorder`	`rgba(0,0,0,.2)`
`@dropdownLinkColor`	`@grayDark`
`@dropdownLinkColorHover`	`@white`
`@dropdownLinkBackgroundHover`	`@linkColor`
`@@dropdownDividerTop`	`#e5e5e5`
`@@dropdownDividerBottom`	`@white`

Jednostka bohatera

`@heroUnitBackground`	`@grayLighter`
`@heroUnitHeadingColor`	`inherit`
`@heroUnitLeadColor`	`inhereit`

O mixinach

Mieszanki podstawowe

Podstawowy mixin to w zasadzie dołączanie lub częściowe fragmenty kodu CSS. Są napisane jak klasa CSS i można je wywołać w dowolnym miejscu.

. element {
  . jasnefix ();
}

Mixiny parametryczne

Mixin parametryczny jest taki sam jak mixin podstawowy, ale akceptuje również parametry (stąd nazwa) z opcjonalnymi wartościami domyślnymi.

. element {
  . obramowanie - promień ( 4px );
}

Łatwo dodawaj własne

Prawie wszystkie domieszki Bootstrap są przechowywane w mixins.less, wspaniałym narzędziowym pliku .less, który umożliwia użycie domieszek w dowolnym pliku .less w zestawie narzędzi.

Więc śmiało korzystaj z istniejących lub dodaj własne, jeśli potrzebujesz.

Dołączone mixiny

Narzędzia

Mieszanie	Parametry	Stosowanie
`.clearfix()`	Żaden	Dodaj do dowolnego rodzica, aby wyczyścić pływaki w obrębie
`.tab-focus()`	Żaden	Zastosuj styl fokusu Webkit i okrągły zarys Firefoksa
`.center-block()`	Żaden	Automatycznie wyśrodkuj element blokowy za pomocą`margin: auto`
`.ie7-inline-block()`	Żaden	Użyj oprócz zwykłego `display: inline-block`, aby uzyskać wsparcie IE7
`.size()`	`@height @width`	Szybko ustaw wysokość i szerokość w jednej linii
`.square()`	`@size`	Buduje, `.size()`aby ustawić szerokość i wysokość jako tę samą wartość
`.opacity()`	`@opacity`	Ustaw w liczbach całkowitych procent krycia (np. „50” lub „75”)

Formularze

Mieszanie	Parametry	Stosowanie
`.placeholder()`	`@color: @placeholderText`	Ustaw `placeholder`kolor tekstu dla danych wejściowych

Typografia

Mieszanie	Parametry	Stosowanie
`#font > #family > .serif()`	Żaden	Spraw, aby element używał stosu czcionek szeryfowych
`#font > #family > .sans-serif()`	Żaden	Spraw, aby element używał stosu czcionek bezszeryfowych
`#font > #family > .monospace()`	Żaden	Spraw, aby element używał stosu czcionek o stałej szerokości
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Łatwo ustaw rozmiar czcionki, wagę i interlinię
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Ustaw rodzinę czcionek na szeryfową oraz kontroluj rozmiar, wagę i interlinię
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Ustaw rodzinę czcionek na bezszeryfową oraz kontroluj rozmiar, wagę i interlinię
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Ustaw rodzinę czcionek na monospace oraz kontroluj rozmiar, wagę i interlinię

System siatki

Mieszanie	Parametry	Stosowanie
`.container-fixed()`	Żaden	Utwórz wyśrodkowany poziomo pojemnik do przechowywania treści
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Wygeneruj system siatki pikseli (kontener, wiersz i kolumny) z n kolumnami i rynną o szerokości x pikseli
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Wygeneruj procentowy system siatki z n kolumnami i x % szerokości rynny
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Wygeneruj system siatki pikseli dla `input`elementów, uwzględniając dopełnienie i obramowania
`.makeColumn`	`@columns: 1, @offset: 0`	Zamień dowolne `div`w kolumnę z siatką bez `.span*`klas

Właściwości CSS3

Mieszanie	Parametry	Stosowanie
`.border-radius()`	`@radius`	Zaokrąglij rogi elementu. Może być pojedynczą wartością lub czterema wartościami oddzielonymi spacjami
`.box-shadow()`	`@shadow`	Dodaj cień do elementu
`.transition()`	`@transition`	Dodaj efekt przejścia CSS3 (np. `all .2s linear`)
`.rotate()`	`@degrees`	Obróć element o n stopni
`.scale()`	`@ratio`	Przeskaluj element do n -krotności jego oryginalnego rozmiaru
`.translate()`	`@x, @y`	Przenieś element na płaszczyzny x i y
`.background-clip()`	`@clip`	Przytnij tło elementu (przydatne dla `border-radius`)
`.background-size()`	`@size`	Kontroluj rozmiar obrazów tła za pomocą CSS3
`.box-sizing()`	`@boxmodel`	Change the box model for an element (e.g., `border-box` for a full-width `input`)
`.user-select()`	`@select`	Control cursor selection of text on a page
`.backface-visibility()`	`@visibility: visible`	Prevent flickering of content when using CSS 3D transforms
`.resizable()`	`@direction: both`	Make any element resizable on the right and bottom
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Make the content of any element use CSS3 columns
`.hyphens()`	`@mode: auto`	CSS3 hyphenation when you want it (includes `word-wrap: break-word`)

Backgrounds and gradients

Mixin	Parameters	Usage
`#translucent > .background()`	`@color: @white, @alpha: 1`	Give an element a translucent background color
`#translucent > .border()`	`@color: @white, @alpha: 1`	Give an element a translucent border color
`#gradient > .vertical()`	`@startColor, @endColor`	Create a cross-browser vertical background gradient
`#gradient > .horizontal()`	`@startColor, @endColor`	Create a cross-browser horizontal background gradient
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Create a cross-browser directional background gradient
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Create a cross-browser three-color background gradient
`#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, JSHint, Recess, and uglify-js globally with npm by running the following command:

$ npm install -g less jshint recess uglify-js

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 ./less/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.

Zbudowany z MNIEJ

Dlaczego MNIEJ?

Co jest zawarte?

Ucz się więcej

Zmienne

Mieszanki

Operacje

Zmienne bootstrapowe Zmienne LESS, ich wartości i wskazówki dotyczące użycia

Rusztowania i linki

System siatki

Typografia

Stoły

Kolory w skali szarości

Kolory akcentujące

składniki

guziki

Formularze

Stany formularzy i alerty

Pasek nawigacyjny

Menu rozwijane

Jednostka bohatera

Mieszanki Bootstrap

O mixinach

Mieszanki podstawowe

Mixiny parametryczne

Łatwo dodawaj własne

Dołączone mixiny

Narzędzia

Formularze

Typografia

System siatki

Właściwości CSS3

Backgrounds and gradients

Compiling Bootstrap with LESS

Tools for compiling

Node with makefile

Command line

Javascript

Unofficial Mac app

More Mac apps

Crunch

CodeKit

Simpless