Uzante LESS kun Bootstrap

Agordu kaj etendi Bootstrap per LESS , CSS-antaŭprocesoro, por utiligi la variablojn, miksaĵojn kaj pli uzatajn por konstrui CSS de Bootstrap.

Kial MALPLOPE?

Bootstrap estas farita kun LESS ĉe ĝia kerno, dinamika stilfoliolingvo kreita de nia bona amiko, Alexis Sellier . Ĝi igas disvolvi CSS-bazitan sistemon pli rapida, pli facila kaj pli amuza.

Kio estas inkluzivita?

Kiel etendaĵo de CSS, LESS inkluzivas variablojn, miksaĵojn por reuzeblaj fragmentoj de kodo, operaciojn por simpla matematiko, nestumado kaj eĉ kolorfunkcioj.

Lernu pli

Vizitu la oficialan retejon ĉe http://lesscss.org/ por lerni pli.

Variabloj

Administrado de koloroj kaj pikselaj valoroj en CSS povas esti iom doloro, kutime plena de kopio kaj algluo. Tamen ne kun MALPLOP — asignu kolorojn aŭ pikselojn kiel variablojn kaj ŝanĝu ilin unufoje.

Miksinoj

Tiujn tri limradiajn deklarojn, kiujn vi devas fari en regula malnova CSS? Nun ili estas malsupren al unu linio kun la helpo de miksinoj, fragmentoj de kodo vi povas reuzi ie ajn.

Operacioj

Faru vian kradon, gvidantan kaj pli flekseblan farante la matematikon sur la flugo per operacioj. Multipliku, dividu, aldonu kaj subtrahi vian vojon al CSS prudento.

Eŝafodo kaj ligiloj

`@bodyBackground`	`@white`	Paĝa fonkoloro
`@textColor`	`@grayDark`	Defaŭlta tekstkoloro por tuta korpo, titoloj kaj pli
`@linkColor`	`#08c`	Defaŭlta ligilo tekstokoloro
`@linkColorHover`	`darken(@linkColor, 15%)`	Defaŭlta ligteksto ŝveba koloro

Kradsistemo

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

Tipografio

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monako, "Courier New", monospaco
`@baseFontSize`	13px	Devas esti pikseloj
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px	Devas esti pikseloj
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Tabeloj

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

Grizskalaj koloroj

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

Akcentkoloroj

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

Komponentoj

Butonoj

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

Formoj

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

Formu ŝtatojn kaj atentigojn

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

Navbaro

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

Dropdowns

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

Hero-unuo

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

Pri miksinoj

Bazaj miksaĵoj

Baza miksaĵo estas esence inkluzivo aŭ parta por fragmento de CSS. Ili estas skribitaj same kiel CSS-klaso kaj povas esti nomitaj ie ajn.

. elemento {
  . clearfix ();
}

Parametrikaj miksaĵoj

Parametrika miksaĵo estas same kiel baza miksaĵo, sed ĝi ankaŭ akceptas parametrojn (tial la nomo) kun laŭvolaj defaŭltaj valoroj.

. elemento {
  . limo - radiuso ( 4px );
}

Facile aldonu vian propran

Preskaŭ ĉiuj miksaĵoj de Bootstrap estas konservitaj en mixins.less, mirinda utileco .less dosiero kiu ebligas al vi uzi miksaĵon en iu ajn el la .less dosieroj en la ilaro.

Do, daŭrigu kaj uzu la ekzistantajn aŭ bonvolu aldoni viajn proprajn laŭ via bezono.

Inkluditaj miksaĵoj

Utilaĵoj

Mixin	Parametroj	Uzado
`.clearfix()`	neniu	Aldonu al iu ajn gepatro por forigi flosaĵojn ene
`.tab-focus()`	neniu	Apliku la Webkit-fokusstilon kaj rondan Firefox-kontuzon
`.center-block()`	neniu	Aŭtomate centri blok-nivelan elementon uzante`margin: auto`
`.ie7-inline-block()`	neniu	Uzu krom regula `display: inline-block`por akiri IE7-subtenon
`.size()`	`@height @width`	Rapide starigu la altecon kaj larĝon sur unu linio
`.square()`	`@size`	Konstruas `.size()`por agordi la larĝon kaj altecon kiel saman valoron
`.opacity()`	`@opacity`	Agordu, en tutaj nombroj, la opakecprocenton (ekz., "50" aŭ "75")

Formoj

Mixin	Parametroj	Uzado
`.placeholder()`	`@color: @placeholderText`	Agordu la `placeholder`tekstokoloron por enigaĵoj

Tipografio

Mixin	Parametroj	Uzado
`#font > #family > .serif()`	neniu	Faru elementon uzi serif-tiparan stakon
`#font > #family > .sans-serif()`	neniu	Faru elementon uzi sans-serif-tiparan stakon
`#font > #family > .monospace()`	neniu	Faru elementon uzi unuspacan tiparon
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Facile agordu tipargrandecon, pezon kaj gvidadon
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Agordu tiparfamilion al serifo, kaj kontrolu grandecon, pezon kaj gvidadon
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Agordu tiparfamilion al sans-serif, kaj kontrolu grandecon, pezon kaj gvidadon
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Agordu tiparfamilion al monospaco, kaj kontrolu grandecon, pezon kaj gvidadon

Kradsistemo

Mixin	Parametroj	Uzado
`.container-fixed()`	neniu	Kreu horizontale centritan ujon por teni vian enhavon
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Generu pikselan kradsistemon (ujo, vico kaj kolumnoj) kun n kolumnoj kaj x piksela larĝa defluilo
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Generu antaŭan kradsistemon kun n kolumnoj kaj x % larĝa defluilo
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Generu la pikselan kradsistemon por `input`elementoj, respondecante pri kompletigo kaj randoj
`.makeColumn`	`@columns: 1, @offset: 0`	Turnu iun ajn `div`en kradan kolumnon sen la `.span*`klasoj

CSS3 propraĵoj

Mixin	Parametroj	Uzado
`.border-radius()`	`@radius`	Rondigu la angulojn de elemento. Povas esti unuopa valoro aŭ kvar spac-separitaj valoroj
`.box-shadow()`	`@shadow`	Aldonu gutan ombron al elemento
`.transition()`	`@transition`	Aldonu CSS3-transiran efikon (ekz., `all .2s linear`)
`.rotate()`	`@degrees`	Turnu elementon n gradojn
`.scale()`	`@ratio`	Skali elementon al n- oble ĝia originala grandeco
`.translate()`	`@x, @y`	Movu elementon sur la x kaj y ebenoj
`.background-clip()`	`@clip`	Tondi la fonon de elemento (utila por `border-radius`)
`.background-size()`	`@size`	Kontrolu la grandecon de fonbildoj per CSS3
`.box-sizing()`	`@boxmodel`	Ŝanĝu la kestmodelon por elemento (ekz., `border-box`por plenlarĝa `input`)
`.user-select()`	`@select`	Kontrolu kursoran elekton de teksto sur paĝo
`.backface-visibility()`	`@visibility: visible`	Malhelpu flagradon de enhavo kiam vi uzas CSS 3D-transformojn
`.resizable()`	`@direction: both`	Faru ajnan elementon regrandigebla dekstre kaj malsupre
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Faru la enhavon de iu ajn elemento uzi CSS3-kolumnojn

Fonoj kaj gradientoj

Mixin	Parametroj	Uzado
`#translucent > .background()`	`@color: @white, @alpha: 1`	Donu al elemento diafanan fonkoloron
`#translucent > .border()`	`@color: @white, @alpha: 1`	Donu al elemento diafanan randkoloron
`#gradient > .vertical()`	`@startColor, @endColor`	Kreu kruc-retumilon vertikalan fonan gradienton
`#gradient > .horizontal()`	`@startColor, @endColor`	Kreu trans-retumilon horizontalan fonan gradienton
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Kreu trans-retumilon unudirektan fonan gradienton
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Kreu trans-retumilon trikoloran fonan gradienton
`#gradient > .radial()`	`@innerColor, @outerColor`	Kreu trans-retumilon radialan fonan gradienton
`#gradient > .striped()`	`@color, @angle`	Kreu trans-retumilon striitan fonan gradienton
`#gradientBar()`	`@primaryColor, @secondaryColor`	Uzita por butonoj por atribui gradienton kaj iomete pli malhelan randon

Noto: Se vi sendas tiri peton al GitHub kun modifita CSS, vi devas rekompili la CSS per iu el ĉi tiuj metodoj.

Iloj por kompili

Nodo kun makefile

Instalu la LESS komandlinian kompililon kaj uglify-js tutmonde kun npm rulante la sekvan komandon:

$ npm instali -g malpli malbela-js

Unufoje instalita nur rulu makede la radiko de via bootstrap dosierujo kaj vi estas tute preta.

Aldone, se vi havas watchr instalitan, vi povas kuri make watchpor ke bootstrap aŭtomate rekonstruu ĉiun fojon kiam vi redaktas dosieron en la bootstrap lib (ĉi tio ne estas bezonata, nur oportuna metodo).

Komandlinio

Instalu la LESS komandlinian ilon per Nodo kaj rulu la jenan komandon:

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

Nepre inkluzivu --compressen tiu komando se vi provas ŝpari kelkajn bajtojn!

Javaskripto

Elŝutu la plej novan Less.js kaj inkludu la vojon al ĝi (kaj Bootstrap) en la <head>.

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

Por rekompili la .malpli dosierojn, simple konservu ilin kaj reŝargu vian paĝon. Less.js kompilas ilin kaj konservas ilin en loka stokado.

Neoficiala Mac-apliko

La neoficiala Mac-aplikaĵo rigardas dosierujojn de .less dosieroj kaj kompilas la kodon al lokaj dosieroj post ĉiu konservado de rigardita .less dosiero.

Se vi ŝatas, vi povas ŝanĝi preferojn en la aplikaĵo por aŭtomata minigo kaj en kiu dosierujo la kompilitaj dosieroj finiĝas.

Konstruita kun MALPLOPO

Kial MALPLOPE?

Kio estas inkluzivita?

Lernu pli

Variabloj

Miksinoj

Operacioj

Bootstrap-variabloj MALPLOPAJ variabloj, iliaj valoroj kaj uzgvidlinioj

Eŝafodo kaj ligiloj

Kradsistemo

Tipografio

Tabeloj

Grizskalaj koloroj

Akcentkoloroj

Komponentoj

Butonoj

Formoj

Formu ŝtatojn kaj atentigojn

Navbaro

Dropdowns

Hero-unuo

Bootstrap miksaĵoj

Pri miksinoj

Bazaj miksaĵoj

Parametrikaj miksaĵoj

Facile aldonu vian propran

Inkluditaj miksaĵoj

Utilaĵoj

Formoj

Tipografio

Kradsistemo

CSS3 propraĵoj

Fonoj kaj gradientoj

Kompilante Bootstrap kun LESS

Iloj por kompili

Nodo kun makefile

Komandlinio

Javaskripto

Neoficiala Mac-apliko

Pli da Mac-aplikoj

Crunch

CodeKit

Simpla