VÄHEM kasutamine koos Bootstrapiga

Kohandage ja laiendage Bootstrapi CSS-i eelprotsessori LESS abil, et kasutada ära muutujaid, segusid ja palju muud, mida Bootstrapi CSS-i koostamiseks kasutatakse.

Miks VÄHEM?

Bootstrap on tehtud meie hea sõbra Alexis Sellieri loodud dünaamilise stiilitabeli keelega LESS . See muudab süsteemipõhise CSS-i arendamise kiiremaks, lihtsamaks ja lõbusamaks.

Mis on kaasas?

CSS-i laiendusena sisaldab LESS muutujaid, korduvkasutatavate koodijuppide segusid, lihtsa matemaatika toiminguid, pesastamist ja isegi värvifunktsioone.

Lisateavet

Lisateabe saamiseks külastage ametlikku veebisaiti http://lesscss.org/ .

Muutujad

Värvide ja piksliväärtuste haldamine CSS-is võib olla veidi piin, tavaliselt täis kopeerimist ja kleepimist. Mitte aga VÄHEM – määrake muutujatena värvid või piksliväärtused ja muutke neid üks kord.

Segud

Need kolm piiriraadiuse deklaratsiooni, mida peate tavalises CSS-is tegema? Nüüd on need ühele reale tänu mixinidele, koodijuppidele, mida saate igal pool uuesti kasutada.

Operatsioonid

Muutke oma ruudustik, juhtimine ja ülipaindlikumaks, tehes matemaatikat käigu pealt tehtetega. Korrutage, jagage, lisage ja lahutage oma tee CSS-i mõistlikkuse saavutamiseks.

Hüperlingid

`@linkColor`	#08c	Lingi teksti vaikevärv
`@linkColorHover`	`darken(@linkColor, 15%)`	Vaikelingi teksti hõljutusvärv

Võrgusüsteem

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

Tüpograafia

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

Halltoonid värvid

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

Aktsentvärvid

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

Komponendid

Nupud

`@primaryButtonBackground`	`@linkColor`

Vormid

`@placeholderText`	`@grayLight`

Navibar

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

Vormi olekud ja hoiatused

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

Miksinide kohta

Põhilised segud

Põhimiksin on sisuliselt CSS-i lõigu kaasamine või osaline osa. Need on kirjutatud nagu CSS-i klass ja neid saab helistada kõikjal.

. element {
  . clearfix ();
}

Parameetrilised segud

Parameetriline miksin on täpselt nagu põhimiksjon, kuid see aktsepteerib ka parameetreid (seega ka nime) koos valikuliste vaikeväärtustega.

. element {
  . ääris - raadius ( 4px );
}

Lisage lihtsalt oma

Peaaegu kõik Bootstrapi miksinid on salvestatud faili mixins.less, mis on suurepärane utiliit .less-fail, mis võimaldab kasutada mixinit mis tahes tööriistakomplekti .less failis.

Seega kasutage olemasolevaid või lisage vajadusel oma.

Kaasas segud

Kommunaalteenused

Mixin	Parameetrid	Kasutamine
`.clearfix()`	mitte ühtegi	Lisage ükskõik millisele vanemale, et sees hõljuda
`.tab-focus()`	mitte ühtegi	Rakendage Webkiti fookusstiili ja ümardage Firefoxi kontuur
`.center-block()`	mitte ühtegi	Automaatne tsentreerimine ploki tasemel elementi kasutades`margin: auto`
`.ie7-inline-block()`	mitte ühtegi	`display: inline-block`Kasutage IE7 toe saamiseks lisaks tavapärasele
`.size()`	`@height: 5px, @width: 5px`	Määrake kõrgus ja laius kiiresti ühel real
`.square()`	`@size: 5px`	Toetub `.size()`laiuse ja kõrguse samale väärtusele määramiseks
`.opacity()`	`@opacity: 100`	Määrake täisarvudes läbipaistmatuse protsent (nt "50" või "75")

Vormid

Mixin	Parameetrid	Kasutamine
`.placeholder()`	`@color: @placeholderText`	Määrake `placeholder`sisendite teksti värv

Tüpograafia

Mixin	Parameetrid	Kasutamine
`#font > #family > .serif()`	mitte ühtegi	Kasutage elemendis serif-fondivirna
`#font > #family > .sans-serif()`	mitte ühtegi	Pange element kasutama sans-serif fondivirna
`#font > #family > .monospace()`	mitte ühtegi	Kasutage elemendis monospace'i fondivirna
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Määrake hõlpsalt fondi suurus, kaal ja juht
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Määrake fondipere serifile ning kontrollige suurust, kaalu ja esinumbrit
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Määrake fondiperekonnale sans-serif ning kontrollige suurust, kaalu ja esinumbrit
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Määrake fondipere monotühikuks ning kontrollige suurust, kaalu ja algust

Võrgusüsteem

Mixin	Parameetrid	Kasutamine
`.container-fixed()`	mitte ühtegi	Looge sisu hoidmiseks horisontaalselt keskele paigutatud konteiner
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Looge pikslite ruudustiku süsteem (konteiner, rida ja veerud) n veeru ja x piksli laiuse renniga
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Genereerige n veergu ja x % laiuse renniga precent grid süsteem

CSS3 omadused

Mixin	Parameetrid	Kasutamine
`.border-radius()`	`@radius: 5px`	Ümardage elemendi nurgad. Võib olla üks väärtus või neli tühikuga eraldatud väärtust
`.box-shadow()`	`@shadow: 0 1px 3px rgba(0,0,0,.25)`	Lisage elemendile varju
`.transition()`	`@transition`	Lisage CSS3 üleminekuefekt (nt `all .2s linear`)
`.rotate()`	`@degrees`	Pöörake elementi n kraadi
`.scale()`	`@ratio`	Skaleerige element n - kordseks selle algsuurusest
`.translate()`	`@x: 0, @y: 0`	Liigutage elementi x- ja y-tasandil
`.background-clip()`	`@clip`	Elemendi tausta kärpimine (kasulik `border-radius`)
`.background-size()`	`@size`	Juhtige taustapiltide suurust CSS3 kaudu
`.box-sizing()`	`@boxmodel`	Muutke elemendi kasti mudelit (nt `border-box`täislaiuse jaoks `input`)
`.user-select()`	`@select`	Juhtige kursoriga teksti valikut lehel
`.resizable()`	`@direction: both`	Muutke mis tahes elemendi suurust paremal ja all
`.content-columns()`	`@columnCount, @columnGap: @gridColumnGutter`	Kasutage mis tahes elemendi sisus CSS3 veerge

Taustad ja gradiendid

Mixin	Parameetrid	Kasutamine
`#translucent > .background()`	`@color: @white, @alpha: 1`	Andke elemendile poolläbipaistev taustavärv
`#translucent > .border()`	`@color: @white, @alpha: 1`	Andke elemendile poolläbipaistev äärise värv
`#gradient > .vertical()`	`@startColor, @endColor`	Looge brauseriülene vertikaalne taustagradient
`#gradient > .horizontal()`	`@startColor, @endColor`	Looge brauseriülene horisontaalne taustagradient
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Looge brauseriülene suunaline taustagradient
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Looge brauseriülene kolmevärviline taustagradient
`#gradient > .radial()`	`@innerColor, @outerColor`	Looge brauseriülene radiaalne taustagradient
`#gradient > .striped()`	`@color, @angle`	Looge brauseriülene triibuline taustagradient
`#gradientBar()`	`@primaryColor, @secondaryColor`	Kasutatakse nuppude jaoks gradiendi ja veidi tumedama äärise määramiseks

Märkus. Kui saadate GitHubile tõmbetaotluse muudetud CSS-iga, peate CSS -i uuesti kompileerima, kasutades mõnda neist meetoditest.

Koostamise vahendid

Makefile'iga sõlm

Installige käsurea kompilaator LESS ja uglify-js globaalselt koos npm-iga, käivitades järgmise käsu:

$ npm install -g less uglify-js

Pärast installimist käivitage makelihtsalt alglaadimiskataloogi juurtest ja oletegi valmis.

Lisaks, kui teil on installitud watchr , võite käivitada make watchalglaadimisfaili automaatse ümberehitamise iga kord, kui redigeerite faili bootstrap lib-is (see pole vajalik, vaid mugavusmeetod).

Käsurida

Installige käsurea tööriist VÄHEM sõlme kaudu ja käivitage järgmine käsk:

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

Lisage kindlasti --compresssee käsk, kui proovite mõnda baiti salvestada!

Javascript

Laadige alla uusim Less.js ja lisage selle (ja Bootstrapi) tee <head>.

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

Failide .less uuesti kompileerimiseks lihtsalt salvestage need ja laadige oma leht uuesti. Less.js kompileerib need ja salvestab kohalikku salvestusruumi.

Mitteametlik Maci rakendus

Mitteametlik Maci rakendus jälgib .less failide katalooge ja kompileerib koodi kohalikeks failideks pärast vaadatud .less faili iga salvestamist.

Soovi korral saate rakenduses automaatse minimeerimise eelistusi ja seda, millisesse kataloogi kompileeritud failid jõuavad.

Ehitatud LESS-iga

Miks VÄHEM?

Mis on kaasas?

Lisateavet

Muutujad

Segud

Operatsioonid

Bootstrap muutujad VÄHEM muutujaid, nende väärtused ja kasutusjuhised

Hüperlingid

Võrgusüsteem

Tüpograafia

Halltoonid värvid

Aktsentvärvid

Komponendid

Nupud

Vormid

Navibar

Vormi olekud ja hoiatused

Bootstrap mixins

Miksinide kohta

Põhilised segud

Parameetrilised segud

Lisage lihtsalt oma

Kaasas segud

Kommunaalteenused

Vormid

Tüpograafia

Võrgusüsteem

CSS3 omadused

Taustad ja gradiendid

Bootstrapi koostamine LESSiga

Koostamise vahendid

Makefile'iga sõlm

Käsurida

Javascript

Mitteametlik Maci rakendus

Rohkem Maci rakendusi

Prõks

CodeKit

Lihtne