Izmantojot LESS ar Bootstrap

Pielāgojiet un paplašiniet Bootstrap ar LESS — CSS priekšapstrādātāju, lai izmantotu mainīgos, mixins un citas priekšrocības, ko izmanto Bootstrap CSS izveidei.

Kāpēc MAZĀK?

Bootstrap pamatā ir LESS — dinamiska stila lapu valoda, ko izveidojis mūsu labs draugs Aleksis Seljē . Tas padara uz sistēmām balstītu CSS izstrādi ātrāku, vienkāršāku un jautrāku.

Kas ir iekļauts?

Kā CSS paplašinājums, LESS ietver mainīgos lielumus, miksus atkārtoti lietojamiem koda fragmentiem, operācijas vienkāršai matemātikai, ligzdošanu un pat krāsu funkcijas.

Uzzināt vairāk

Apmeklējiet oficiālo vietni http://lesscss.org/ , lai uzzinātu vairāk.

Mainīgie lielumi

Krāsu un pikseļu vērtību pārvaldība CSS var būt nedaudz sāpīga, parasti tas ir pilns ar kopēšanu un ielīmēšanu. Tomēr ne ar LESS — piešķiriet krāsas vai pikseļu vērtības kā mainīgos un mainiet tos vienreiz.

Maisījumi

Šīs trīs robežas rādiusa deklarācijas, kas jums jāiesniedz parastajā CSS? Tagad tie ir izveidoti līdz vienai rindai, izmantojot mixins — koda fragmentus, kurus varat atkārtoti izmantot jebkurā vietā.

Operācijas

Padariet savu režģi, vadošo un īpaši elastīgāku, veicot matemātiku lidojuma laikā ar darbībām. Reiziniet, daliet, pievienojiet un atņemiet savu ceļu uz CSS saprātu.

Sastatnes un saites

`@bodyBackground`	`@white`	Lapas fona krāsa
`@textColor`	`@grayDark`	Noklusējuma teksta krāsa visam pamattekstam, virsrakstiem un citam
`@linkColor`	`#08c`	Noklusējuma saites teksta krāsa
`@linkColorHover`	`darken(@linkColor, 15%)`	Noklusējuma saites teksta kursora virzīšanas krāsa

Režģa sistēma

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

Tipogrāfija

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monako, "Courier New", monospace
`@baseFontSize`	13 pikseļi	Jābūt pikseļiem
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18 pikseļi	Jābūt pikseļiem
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Tabulas

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

Pelēktoņu krāsas

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

Akcentu krāsas

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

Sastāvdaļas

Pogas

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

Veidlapas

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

Veidlapu stāvokļi un brīdinājumi

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

Navigbar

`@navbarHeight`	40 pikseļi
`@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`

Nolaižamās izvēlnes

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

Varoņu vienība

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

Par miksiņiem

Pamata maisījumi

Pamata sajaukšana būtībā ir CSS fragmenta iekļaušana vai daļēja daļa. Tie ir rakstīti tāpat kā CSS klase, un tos var izsaukt jebkurā vietā.

. elements {
  . clearfix ();
}

Parametriskie maisījumi

Parametru sajaukšana ir gluži kā pamata sajaukšana, taču tā pieņem arī parametrus (tātad arī nosaukumu) ar izvēles noklusējuma vērtībām.

. elements {
  . apmale - rādiuss ( 4px );
}

Viegli pievienojiet savu

Gandrīz visi Bootstrap mixins tiek glabāti mixins.less — brīnišķīgā utilīta .less failā, kas ļauj izmantot mixin jebkurā no rīkkopas .less failiem.

Tāpēc turpiniet un izmantojiet esošos vai pievienojiet savu, ja nepieciešams.

Iekļauti maisījumi

Komunālie pakalpojumi

Sajauc	Parametri	Lietošana
`.clearfix()`	neviens	Pievienojiet jebkuram vecākam, lai notīrītu pludiņus
`.tab-focus()`	neviens	Izmantojiet Webkit fokusa stilu un noapaļo Firefox kontūru
`.center-block()`	neviens	Automātiski centrējiet bloka līmeņa elementu, izmantojot`margin: auto`
`.ie7-inline-block()`	neviens	Izmantojiet papildus parastajam `display: inline-block`, lai saņemtu IE7 atbalstu
`.size()`	`@height @width`	Ātri iestatiet augstumu un platumu vienā rindā
`.square()`	`@size`	Tiek veidots , `.size()`lai iestatītu platumu un augstumu kā vienu un to pašu vērtību
`.opacity()`	`@opacity`	Iestatiet necaurredzamības procentuālo vērtību veselos skaitļos (piemēram, "50" vai "75").

Veidlapas

Sajauc	Parametri	Lietošana
`.placeholder()`	`@color: @placeholderText`	Iestatiet `placeholder`ievades teksta krāsu

Tipogrāfija

Sajauc	Parametri	Lietošana
`#font > #family > .serif()`	neviens	Lieciet elementam izmantot serif fontu kopu
`#font > #family > .sans-serif()`	neviens	Lieciet elementam izmantot sans-serif fontu kopu
`#font > #family > .monospace()`	neviens	Lieciet elementam izmantot monospace fontu kopu
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Ērti iestatiet fonta lielumu, svaru un priekšējo daļu
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Iestatiet fontu saimi uz serif, kā arī kontrolējiet izmēru, svaru un ievadu
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Iestatiet fontu saimi uz sans-serif un kontrolējiet izmēru, svaru un ievadu
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Iestatiet fontu saimi uz monospace un kontrolējiet izmēru, svaru un sākumposmu

Režģa sistēma

Sajauc	Parametri	Lietošana
`.container-fixed()`	neviens	Izveidojiet horizontāli centrētu konteineru satura glabāšanai
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Izveidojiet pikseļu režģa sistēmu (konteineru, rindu un kolonnas) ar n kolonnām un x pikseļu platu noteku
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Izveidojiet režģa sistēmu ar n kolonnām un x % platu noteku
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Ģenerējiet elementu pikseļu režģa sistēmu `input`, ņemot vērā polsterējumu un apmales
`.makeColumn`	`@columns: 1, @offset: 0`	Pārvērtiet jebkuru `div`par režģa kolonnu bez `.span*`klasēm

CSS3 rekvizīti

Sajauc	Parametri	Lietošana
`.border-radius()`	`@radius`	Noapaļo elementa stūrus. Var būt viena vērtība vai četras ar atstarpi atdalītas vērtības
`.box-shadow()`	`@shadow`	Pievienojiet elementam krītošu ēnu
`.transition()`	`@transition`	Pievienojiet CSS3 pārejas efektu (piem., `all .2s linear`)
`.rotate()`	`@degrees`	Pagriezt elementu par n grādiem
`.scale()`	`@ratio`	Mērogojiet elementu līdz n reizēm lielākam par tā sākotnējo izmēru
`.translate()`	`@x, @y`	Pārvietojiet elementu x un y plaknēs
`.background-clip()`	`@clip`	Elementa fona apgriešana (noderīga `border-radius`)
`.background-size()`	`@size`	Kontrolējiet fona attēlu lielumu, izmantojot CSS3
`.box-sizing()`	`@boxmodel`	Mainiet elementa lodziņa modeli (piemēram, `border-box`pilna platuma `input`)
`.user-select()`	`@select`	Kontrolējiet kursora teksta atlasi lapā
`.backface-visibility()`	`@visibility: visible`	Novērsiet satura mirgošanu, izmantojot CSS 3D transformācijas
`.resizable()`	`@direction: both`	Padariet jebkura elementa izmēru maināmu labajā un apakšējā daļā
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Lieciet jebkura elementa saturam izmantot CSS3 kolonnas

Foni un gradienti

Sajauc	Parametri	Lietošana
`#translucent > .background()`	`@color: @white, @alpha: 1`	Piešķiriet elementam caurspīdīgu fona krāsu
`#translucent > .border()`	`@color: @white, @alpha: 1`	Piešķiriet elementam caurspīdīgu apmales krāsu
`#gradient > .vertical()`	`@startColor, @endColor`	Izveidojiet vertikālu fona gradientu starp pārlūkprogrammām
`#gradient > .horizontal()`	`@startColor, @endColor`	Izveidojiet horizontālu fona gradientu starp pārlūkprogrammām
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Izveidojiet starppārlūkprogrammu virziena fona gradientu
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Izveidojiet vairāku pārlūkprogrammu trīskrāsu fona gradientu
`#gradient > .radial()`	`@innerColor, @outerColor`	Izveidojiet starppārlūkprogrammu radiālo fona gradientu
`#gradient > .striped()`	`@color, @angle`	Izveidojiet starppārlūkprogrammu svītrainu fona gradientu
`#gradientBar()`	`@primaryColor, @secondaryColor`	Izmanto pogām, lai piešķirtu gradientu un nedaudz tumšāku apmali

Piezīme. Ja iesniedzat izvilkšanas pieprasījumu GitHub ar modificētu CSS, jums ir jāpārkompilē CSS, izmantojot kādu no šīm metodēm.

Rīki kompilēšanai

Mezgls ar makefile

Instalējiet LESS komandrindas kompilatoru un uglify-js globāli ar npm, izpildot šo komandu:

$ npm instalēt -g mazāk uglify-js

Pēc instalēšanas vienkārši palaidiet makeno sāknēšanas direktorija saknes, un viss ir gatavs.

Turklāt, ja jums ir instalēta programma Watchr , varat palaist make watch, lai bootstrap tiktu automātiski pārbūvēts ikreiz, kad rediģējat failu bootstrap lib (tas nav nepieciešams, tas ir tikai ērtību metode).

Komandrinda

Instalējiet komandrindas rīku LESS, izmantojot Node, un palaidiet šādu komandu:

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

Noteikti iekļaujiet --compressšo komandu, ja mēģināt saglabāt dažus baitus!

Javascript

Lejupielādējiet jaunāko Less.js un iekļaujiet ceļu uz to (un Bootstrap) mapē <head>.

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

Lai atkārtoti kompilētu .less failus, vienkārši saglabājiet tos un atkārtoti ielādējiet savu lapu. Less.js tos apkopo un saglabā vietējā krātuvē.

Neoficiāla Mac lietotne

Neoficiālā Mac lietotne skatās .less failu direktorijus un apkopo kodu vietējos failos pēc katras skatītā .less faila saglabāšanas.

Ja vēlaties, lietotnē varat pārslēgt preferences, lai automātiski samazinātu un kurā direktorijā nonāk apkopotie faili.

Būvēts ar LESS

Kāpēc MAZĀK?

Kas ir iekļauts?

Uzzināt vairāk

Mainīgie lielumi

Maisījumi

Operācijas

Bootstrap mainīgie MAZĀK mainīgie, to vērtības un lietošanas vadlīnijas

Sastatnes un saites

Režģa sistēma

Tipogrāfija

Tabulas

Pelēktoņu krāsas

Akcentu krāsas

Sastāvdaļas

Pogas

Veidlapas

Veidlapu stāvokļi un brīdinājumi

Navigbar

Nolaižamās izvēlnes

Varoņu vienība

Bootstrap mixins

Par miksiņiem

Pamata maisījumi

Parametriskie maisījumi

Viegli pievienojiet savu

Iekļauti maisījumi

Komunālie pakalpojumi

Veidlapas

Tipogrāfija

Režģa sistēma

CSS3 rekvizīti

Foni un gradienti

Bootstrap kompilēšana ar LESS

Rīki kompilēšanai

Mezgls ar makefile

Komandrinda

Javascript

Neoficiāla Mac lietotne

Vairāk Mac lietotņu

Crunch

CodeKit

Vienkāršs