Folosind LESS cu Bootstrap

Personalizați și extindeți Bootstrap cu LESS , un preprocesor CSS, pentru a profita de variabilele, mixurile și altele folosite pentru a construi CSS-ul Bootstrap.

De ce mai puțin?

Bootstrap este creat cu LESS la bază, un limbaj dinamic pentru foi de stil creat de bunul nostru prieten, Alexis Sellier . Face dezvoltarea CSS bazate pe sisteme mai rapidă, mai ușoară și mai distractivă.

Ce este inclus?

Ca o extensie a CSS, LESS include variabile, mixuri pentru fragmente de cod reutilizabile, operații pentru matematică simplă, imbricare și chiar funcții de culoare.

Află mai multe

Vizitați site-ul oficial la http://lesscss.org/ pentru a afla mai multe.

Variabile

Gestionarea culorilor și a valorilor pixelilor în CSS poate fi puțin dificilă, de obicei plină de copiere și inserare. Totuși, nu cu LESS — atribuiți culori sau valori de pixeli ca variabile și schimbați-le o dată.

Mixine

Acele trei declarații de rază de frontieră pe care trebuie să le faci în vechiul CSS obișnuit? Acum sunt reduse la o singură linie cu ajutorul mixin-urilor, fragmente de cod pe care le puteți reutiliza oriunde.

Operațiuni

Faceți grila dvs., lider și mai super flexibilă, făcând calculul din mers cu operațiuni. Înmulțiți, împărțiți, adunați și scădeți drumul către sensul CSS.

Schele și legături

`@bodyBackground`	`@white`	Culoarea fundalului paginii
`@textColor`	`@grayDark`	Culoarea implicită a textului pentru întregul corp, titluri și multe altele
`@linkColor`	`#08c`	Culoarea implicită a textului linkului
`@linkColorHover`	`darken(@linkColor, 15%)`	Culoarea implicită a textului linkului

Sistem grilă

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

Tipografie

`@sansFontFamily`	„Helvetica Neue”, Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monaco, „Courier New”, monospace
`@baseFontSize`	13px	Trebuie să fie pixeli
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px	Trebuie să fie pixeli
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Mese

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

Culori în tonuri de gri

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

Culori de accent

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

Componente

Butoane

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

Forme

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

Formează stări și alerte

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

Bara de navigare

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

Mențiuni derulante

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

Unitatea de erou

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

Despre mixuri

Mixine de bază

Un mixin de bază este în esență o includere sau o parte parțială pentru un fragment de CSS. Sunt scrise la fel ca o clasă CSS și pot fi apelate oriunde.

. element {
  . clearfix ();
}

Mixine parametrice

Un mixin parametric este la fel ca un mixin de bază, dar acceptă și parametri (de unde și numele) cu valori implicite opționale.

. element {
  . chenar - raza ( 4px );
}

Adăugați cu ușurință propria dvs

Aproape toate mixurile Bootstrap sunt stocate în mixins.less, un minunat fișier utilitar .less care vă permite să utilizați un mixin în oricare dintre fișierele .less din setul de instrumente.

Deci, mergeți mai departe și folosiți-le pe cele existente sau nu ezitați să le adăugați pe ale dvs. după cum aveți nevoie.

Mixine incluse

Utilități

Mixin	Parametrii	Utilizare
`.clearfix()`	nici unul	Adăugați oricărui părinte pentru a șterge flotoarele din interior
`.tab-focus()`	nici unul	Aplicați stilul de focalizare Webkit și conturul Firefox rotund
`.center-block()`	nici unul	Centrare automată a unui element la nivel de bloc folosind`margin: auto`
`.ie7-inline-block()`	nici unul	Utilizați pe lângă cele obișnuite `display: inline-block`pentru a obține suport IE7
`.size()`	`@height @width`	Setați rapid înălțimea și lățimea pe o singură linie
`.square()`	`@size`	Se bazează pentru `.size()`a seta lățimea și înălțimea la aceeași valoare
`.opacity()`	`@opacity`	Setați, în numere întregi, procentul de opacitate (de exemplu, „50” sau „75”)

Forme

Mixin	Parametrii	Utilizare
`.placeholder()`	`@color: @placeholderText`	Setați `placeholder`culoarea textului pentru intrări

Tipografie

Mixin	Parametrii	Utilizare
`#font > #family > .serif()`	nici unul	Faceți ca un element să utilizeze o stivă de fonturi serif
`#font > #family > .sans-serif()`	nici unul	Faceți ca un element să utilizeze o stivă de fonturi sans-serif
`#font > #family > .monospace()`	nici unul	Faceți ca un element să utilizeze o stivă de fonturi monospațiu
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Setați cu ușurință dimensiunea fontului, greutatea și deschiderea
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Setați familia de fonturi la serif și controlați dimensiunea, greutatea și interfața
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Setați familia de fonturi la sans-serif și controlați dimensiunea, greutatea și interfața
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Setați familia de fonturi la monospațiu și controlați dimensiunea, greutatea și interfața

Sistem grilă

Mixin	Parametrii	Utilizare
`.container-fixed()`	nici unul	Creați un container centrat orizontal pentru a vă păstra conținutul
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Generați un sistem de grilă de pixeli (container, rând și coloane) cu n coloane și jgheab lat de x pixeli
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Generați un sistem de grilă procentuală cu n coloane și x % jgheab lat
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Generați sistemul de grilă de pixeli pentru `input`elemente, ținând cont de umplutură și chenare
`.makeColumn`	`@columns: 1, @offset: 0`	Transformați orice `div`într-o coloană grilă fără `.span*`clase

Proprietăți CSS3

Mixin	Parametrii	Utilizare
`.border-radius()`	`@radius`	Rotunjiți colțurile unui element. Poate fi o singură valoare sau patru valori separate prin spațiu
`.box-shadow()`	`@shadow`	Adăugați o umbră la un element
`.transition()`	`@transition`	Adăugați efect de tranziție CSS3 (de exemplu, `all .2s linear`)
`.rotate()`	`@degrees`	Rotiți un element cu n grade
`.scale()`	`@ratio`	Scalați un element la de n ori dimensiunea inițială
`.translate()`	`@x, @y`	Mutați un element în planurile x și y
`.background-clip()`	`@clip`	Decupați fundalul unui element (util pentru `border-radius`)
`.background-size()`	`@size`	Controlați dimensiunea imaginilor de fundal prin CSS3
`.box-sizing()`	`@boxmodel`	Modificați modelul casetei pentru un element (de exemplu, `border-box`pentru o lățime completă `input`)
`.user-select()`	`@select`	Controlați selectarea textului cu cursorul pe o pagină
`.backface-visibility()`	`@visibility: visible`	Preveniți pâlpâirea conținutului atunci când utilizați transformări CSS 3D
`.resizable()`	`@direction: both`	Faceți orice element redimensionabil în dreapta și în jos
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Faceți ca conținutul oricărui element să utilizeze coloane CSS3
`.hyphens()`	`@mode: auto`	Secțiunea silabe CSS3 când doriți (include `word-wrap: break-word`)

Fundaluri și degrade

Mixin	Parametrii	Utilizare
`#translucent > .background()`	`@color: @white, @alpha: 1`	Dați unui element o culoare de fundal translucidă
`#translucent > .border()`	`@color: @white, @alpha: 1`	Dați unui element o culoare translucidă a marginii
`#gradient > .vertical()`	`@startColor, @endColor`	Creați un gradient de fundal vertical pe mai multe browsere
`#gradient > .horizontal()`	`@startColor, @endColor`	Creați un gradient de fundal orizontal între browsere
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Creați un gradient de fundal direcțional între browsere
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Creați un gradient de fundal în trei culori pentru browsere încrucișate
`#gradient > .radial()`	`@innerColor, @outerColor`	Creați un gradient radial de fundal pe mai multe browsere
`#gradient > .striped()`	`@color, @angle`	Creați un gradient de fundal cu dungi pe mai multe browsere
`#gradientBar()`	`@primaryColor, @secondaryColor`	Folosit pentru butoane pentru a atribui un gradient și o margine puțin mai întunecată

Notă: dacă trimiteți o cerere de extragere către GitHub cu CSS modificat, trebuie să recompilați CSS-ul prin oricare dintre aceste metode.

Instrumente pentru compilare

Nod cu makefile

Instalați compilatorul de linie de comandă LESS, JSHint, Recess și uglify-js la nivel global cu npm, rulând următoarea comandă:

$ npm install -g mai puțin jshint recess uglify-js

Odată instalat, doar rulațimake de la rădăcina directorului dvs. de bootstrap și sunteți gata.

În plus, dacă aveți watchr instalat, puteți rula make watchpentru ca bootstrap să fie reconstruit automat de fiecare dată când editați un fișier în lib-ul bootstrap (acest lucru nu este necesar, doar o metodă convenabilă).

Linie de comanda

Instalați instrumentul de linie de comandă LESS prin Node și rulați următoarea comandă:

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

Asigurați-vă că includeți --compressîn acea comandă dacă încercați să salvați câțiva octeți!

Javascript

Descărcați cel mai recent Less.js și includeți calea către acesta (și Bootstrap) în fișierul <head>.

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

Pentru a recompila fișierele .less, salvați-le și reîncărcați pagina. Less.js le compilează și le stochează în stocarea locală.

Aplicație neoficială pentru Mac

Aplicația neoficială pentru Mac urmărește directoarele fișierelor .less și compilează codul în fișiere locale după fiecare salvare a unui fișier .less urmărit.

Dacă doriți, puteți comuta preferințele în aplicație pentru minimizarea automată și în ce director ajung fișierele compilate.

Construit cu LESS

De ce mai puțin?

Ce este inclus?

Află mai multe

Variabile

Mixine

Operațiuni

Variabile bootstrap Variabile LESS, valorile acestora și ghiduri de utilizare

Schele și legături

Sistem grilă

Tipografie

Mese

Culori în tonuri de gri

Culori de accent

Componente

Butoane

Forme

Formează stări și alerte

Bara de navigare

Mențiuni derulante

Unitatea de erou

Mixuri bootstrap

Despre mixuri

Mixine de bază

Mixine parametrice

Adăugați cu ușurință propria dvs

Mixine incluse

Utilități

Forme

Tipografie

Sistem grilă

Proprietăți CSS3

Fundaluri și degrade

Compilarea Bootstrap cu LESS

Instrumente pentru compilare

Nod cu makefile

Linie de comanda

Javascript

Aplicație neoficială pentru Mac

Mai multe aplicații Mac

Crunch

CodeKit

Simplu