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

VÄHEM CSS-i

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.

Tellingud ja lingid

@bodyBackground @white Lehe taustavärv
@textColor @grayDark Teksti vaikevärv kogu keha, pealkirjade ja muu jaoks
@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

@sansFontFamily "Helvetica Neue", Helvetica, Arial, sans-serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Menlo, Monaco, "Courier New", monospace
@baseFontSize 13 pikslit Peavad olema pikslid
@baseFontFamily @sansFontFamily
@baseLineHeight 18 pikslit Peavad olema pikslid
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

Tabelid

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

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

@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

Vormid

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

Vormi olekud ja hoiatused

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

Navibar

@navbarHeight 40 pikslit
@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

Rippmenüüd

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

Kangelase üksus

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

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.

  1. . element {
  2. . clearfix ();
  3. }

Parameetrilised segud

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

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

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 kasutadesmargin: auto
.ie7-inline-block() mitte ühtegi display: inline-blockKasutage IE7 toe saamiseks lisaks tavapärasele
.size() @height @width Määrake kõrgus ja laius kiiresti ühel real
.square() @size Toetub .size()laiuse ja kõrguse samale väärtusele määramiseks
.opacity() @opacity Määrake täisarvudes läbipaistmatuse protsent (nt "50" või "75")

Vormid

Mixin Parameetrid Kasutamine
.placeholder() @color: @placeholderText Määrake placeholdersisendite 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 Loo n veeru ja x % laiuse renniga protsendiline ruudustik
#grid > .input() @gridColumnWidth, @gridGutterWidth inputLooge elementide pikslivõrgustiku süsteem , võttes arvesse polsterdust ja ääriseid
.makeColumn @columns: 1, @offset: 0 Muutke mis tahes divruudustiku veeruks ilma .span*klassideta

CSS3 omadused

Mixin Parameetrid Kasutamine
.border-radius() @radius Ümardage elemendi nurgad. Võib olla üks väärtus või neli tühikuga eraldatud väärtust
.box-shadow() @shadow 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, @y 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-boxtäislaiuse jaoks input)
.user-select() @select Juhtige kursoriga teksti valikut lehel
.backface-visibility() @visibility: visible Vältige sisu virvendust CSS-i 3D-teisenduste kasutamisel
.resizable() @direction: both Muutke mis tahes elemendi suurust paremal ja all
.content-columns() @columnCount, @columnGap: @gridGutterWidth Kasutage mis tahes elemendi sisus CSS3 veerge
.hyphens() @mode: auto CSS3 sidekriipsutus, kui soovite (sisaldab word-wrap: break-word)

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, JSHint, Recess ja uglify-js globaalselt npm-iga, käivitades järgmise käsu:

$ npm install -g vähem jshint süvend 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 ./less/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.

Rohkem Maci rakendusi

Prõks

Crunch on suurepärase välimusega LESS-redaktor ja kompilaator, mis on üles ehitatud Adobe Airile.

CodeKit

CodeKit on Maci mitteametliku rakendusega sama mehe loodud rakendus, mis kompileerib LESS, SASS, Stylus ja CoffeeScript.

Lihtne

Mac-, Linuxi- ja PC-rakendus VÄHEM failide pukseerimiseks. Lisaks on lähtekood GitHubis .