Bruger MINDRE med Bootstrap

Tilpas og udvid Bootstrap med LESS , en CSS-forprocessor, for at drage fordel af de variabler, mixins og mere, der bruges til at bygge Bootstraps CSS.

Hvorfor MINDRE?

Bootstrap er lavet med LESS i sin kerne, et dynamisk stylesheet-sprog skabt af vores gode ven, Alexis Sellier . Det gør udvikling af systembaseret CSS hurtigere, nemmere og sjovere.

Hvad er inkluderet?

Som en udvidelse af CSS inkluderer LESS variabler, mixins til genanvendelige kodestykker, operationer til simpel matematik, indlejring og endda farvefunktioner.

Lær mere

Besøg den officielle hjemmeside på http://lesscss.org/ for at lære mere.

Variabler

Håndtering af farver og pixelværdier i CSS kan være en smule besværligt, normalt fuld af copy og paste. Dog ikke med MINDRE – tildel farver eller pixelværdier som variable og skift dem én gang.

Mixins

De tre grænseradius-erklæringer, du skal lave i almindelig CSS? Nu er de nede på én linje ved hjælp af mixins, kodestykker, du kan genbruge hvor som helst.

Operationer

Gør dit gitter, førende og mere superfleksibelt ved at lave regnestykket på farten med operationer. Multiplicer, divider, addér og subtraher din vej til CSS-fornuft.

Hyperlinks

`@linkColor`	#08c	Standard linktekstfarve
`@linkColorHover`	`darken(@linkColor, 15%)`	Standard-linktekst-hoverfarve

Gittersystem

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

Typografi

`@baseFontSize`	13 px
`@baseFontFamily`	`"Helvetica Neue", Helvetica, Arial, sans-serif`
`@baseLineHeight`	18 px

Gråtone farver

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

Accentfarver

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

Komponenter

Knapper

`@primaryButtonBackground`	`@linkColor`

Formularer

`@placeholderText`	`@grayLight`

Navbar

`@navbarHeight`	40 px
`@navbarBackground`	`@grayDarker`
`@navbarBackgroundHighlight`	`@grayDark`
`@navbarText`	`@grayLight`
`@navbarLinkColor`	`@grayLight`
`@navbarLinkColorHover`	`@white`

Form tilstande og advarsler

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

Om mixins

Grundlæggende blandinger

Et grundlæggende mixin er i det væsentlige en inkludering eller en del af et uddrag af CSS. De er skrevet ligesom en CSS-klasse og kan kaldes overalt.

. element {
  . clearfix ();
}

Parametriske blandinger

Et parametrisk mixin er ligesom et grundlæggende mixin, men det accepterer også parametre (deraf navnet) med valgfri standardværdier.

. element {
  . border - radius ( 4px );
}

Tilføj nemt din egen

Næsten alle Bootstraps mixins er gemt i mixins.less, en vidunderlig .less-fil, der gør dig i stand til at bruge en mixin i enhver af .less-filerne i værktøjssættet.

Så gå videre og brug de eksisterende, eller du er velkommen til at tilføje dine egne efter behov.

Inkluderet mixins

Hjælpeprogrammer

Blanding	Parametre	Brug
`.clearfix()`	ingen	Tilføj til enhver forælder for at rydde flyder indeni
`.tab-focus()`	ingen	Anvend Webkit-fokusstilen og rund Firefox-kontur
`.center-block()`	ingen	Autocentrer et element på blokniveau ved hjælp af`margin: auto`
`.ie7-inline-block()`	ingen	Brug ud over almindelig `display: inline-block`for at få IE7-understøttelse
`.size()`	`@height: 5px, @width: 5px`	Indstil hurtigt højden og bredden på én linje
`.square()`	`@size: 5px`	Bygger videre på `.size()`at indstille bredden og højden til samme værdi
`.opacity()`	`@opacity: 100`	Indstil opacitetsprocenten i hele tal (f.eks. "50" eller "75")

Formularer

Blanding	Parametre	Brug
`.placeholder()`	`@color: @placeholderText`	Indstil `placeholder`tekstfarven for input

Typografi

Blanding	Parametre	Brug
`#font > #family > .serif()`	ingen	Få et element til at bruge en serif-skrifttypestak
`#font > #family > .sans-serif()`	ingen	Få et element til at bruge en sans-serif skrifttypestak
`#font > #family > .monospace()`	ingen	Få et element til at bruge en monospace-skrifttypestak
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Indstil nemt skriftstørrelse, vægt og indføring
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Indstil skrifttypefamilien til serif, og kontroller størrelse, vægt og linjeføring
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Indstil skrifttypefamilien til sans-serif, og kontroller størrelse, vægt og førende
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Indstil skrifttypefamilien til monospace, og kontroller størrelse, vægt og førende

Gittersystem

Blanding	Parametre	Brug
`.container-fixed()`	ingen	Opret en vandret centreret beholder til at opbevare dit indhold
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Generer et pixelgittersystem (beholder, række og kolonner) med n kolonner og x pixel bred rende
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Generer et eksisterende gittersystem med n søjler og x % bred tagrende

CSS3 egenskaber

Blanding	Parametre	Brug
`.border-radius()`	`@radius: 5px`	Afrund hjørnerne af et element. Kan være en enkelt værdi eller fire mellemrumsadskilte værdier
`.box-shadow()`	`@shadow: 0 1px 3px rgba(0,0,0,.25)`	Tilføj en skygge til et element
`.transition()`	`@transition`	Tilføj CSS3-overgangseffekt (f.eks. `all .2s linear`)
`.rotate()`	`@degrees`	Roter et element n grader
`.scale()`	`@ratio`	Skaler et element til n gange dets oprindelige størrelse
`.translate()`	`@x: 0, @y: 0`	Flyt et element på x- og y-planerne
`.background-clip()`	`@clip`	Beskær baggrunden for et element (nyttigt til `border-radius`)
`.background-size()`	`@size`	Styr størrelsen af baggrundsbilleder via CSS3
`.box-sizing()`	`@boxmodel`	Skift boksmodellen for et element (f.eks. `border-box`for en fuld bredde `input`)
`.user-select()`	`@select`	Styr markørens valg af tekst på en side
`.resizable()`	`@direction: both`	Gør ethvert element tilpasbart til højre og nederst
`.content-columns()`	`@columnCount, @columnGap: @gridColumnGutter`	Få indholdet af ethvert element til at bruge CSS3-kolonner

Baggrunde og gradienter

Blanding	Parametre	Brug
`#translucent > .background()`	`@color: @white, @alpha: 1`	Giv et element en gennemskinnelig baggrundsfarve
`#translucent > .border()`	`@color: @white, @alpha: 1`	Giv et element en gennemskinnelig kantfarve
`#gradient > .vertical()`	`@startColor, @endColor`	Opret en lodret baggrundsgradient på tværs af browsere
`#gradient > .horizontal()`	`@startColor, @endColor`	Opret en horisontal baggrundsgradient på tværs af browser
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Opret en retningsbestemt baggrundsgradient på tværs af browsere
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Opret en trefarvet baggrundsgradient på tværs af browsere
`#gradient > .radial()`	`@innerColor, @outerColor`	Opret en radial baggrundsgradient på tværs af browsere
`#gradient > .striped()`	`@color, @angle`	Opret en stribet baggrundsgradient på tværs af browsere
`#gradientBar()`	`@primaryColor, @secondaryColor`	Bruges til knapper til at tildele en gradient og lidt mørkere kant

Bemærk: Hvis du sender en pull-anmodning til GitHub med modificeret CSS, skal du genkompilere CSS'en via en af disse metoder.

Værktøjer til kompilering

Node med makefile

Installer LESS kommandolinjekompileren og uglify-js globalt med npm ved at køre følgende kommando:

$ npm installer -g mindre uglify-js

Når det er installeret, skal du bare køre makefra roden af din bootstrap-mappe, og du er klar.

Derudover, hvis du har watchr installeret, kan du køre make watchfor at få bootstrap automatisk genopbygget hver gang du redigerer en fil i bootstrap lib (dette er ikke påkrævet, kun en bekvemmelighedsmetode).

Kommandolinje

Installer kommandolinjeværktøjet LESS via Node og kør følgende kommando:

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

Sørg for at inkludere --compressi den kommando, hvis du prøver at gemme nogle bytes!

Javascript

Download den seneste Less.js og inkluder stien til den (og Bootstrap) i <head>.

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

For at genkompilere .less-filerne skal du bare gemme dem og genindlæse din side. Less.js kompilerer dem og gemmer dem i lokalt lager.

Uofficiel Mac-app

Den uofficielle Mac-app overvåger mapper med .less-filer og kompilerer koden til lokale filer efter hver lagring af en overvåget .less-fil.

Hvis du vil, kan du skifte præferencer i appen for automatisk minificering, og hvilken mappe de kompilerede filer ender i.

Bygget med MINDRE

Hvorfor MINDRE?

Hvad er inkluderet?

Lær mere

Variabler

Mixins

Operationer

Bootstrap-variabler MINDRE variabler, deres værdier og retningslinjer for brug

Hyperlinks

Gittersystem

Typografi

Gråtone farver

Accentfarver

Komponenter

Knapper

Formularer

Navbar

Form tilstande og advarsler

Bootstrap mixins

Om mixins

Grundlæggende blandinger

Parametriske blandinger

Tilføj nemt din egen

Inkluderet mixins

Hjælpeprogrammer

Formularer

Typografi

Gittersystem

CSS3 egenskaber

Baggrunde og gradienter

Kompilere Bootstrap med MINDRE

Værktøjer til kompilering

Node med makefile

Kommandolinje

Javascript

Uofficiel Mac-app

Flere Mac-apps

Crunch

CodeKit

Simpelt