Sèvi ak MWEN ak Bootstrap

Pèsonalize ak pwolonje Bootstrap ak LESS , yon preprosesè CSS, pou pran avantaj de varyab, mixin, ak plis ankò yo itilize pou konstwi CSS Bootstrap la.

Poukisa MWEN?

Bootstrap fèt ak LESS nan nwayo li yo, yon langaj stylesheet dinamik kreye pa bon zanmi nou an, Alexis Sellier . Li fè devlope CSS ki baze sou sistèm pi vit, pi fasil, ak plis plezi.

Ki sa ki enkli?

Kòm yon ekstansyon CSS, LESS gen ladan varyab, melanj pou fragments kòd ki kapab itilize ankò, operasyon pou matematik senp, nidifikasyon, e menm fonksyon koulè.

Aprann plis

Vizite sit entènèt ofisyèl la nan http://lesscss.org/ pou aprann plis.

Varyab

Jere koulè ak valè pixel nan CSS ka yon ti kras nan yon doulè, anjeneral plen ak kopi ak keratin. Pa ak MWEN menm si - bay koulè oswa valè pixel kòm varyab epi chanje yo yon fwa.

Mixins

Sa yo twa deklarasyon fwontyè-reyon ou bezwen fè nan CSS regilye? Koulye a, yo ap desann nan yon sèl liy ak èd nan mixins, fragman nan kòd ou ka itilize ankò nenpòt kote.

Operasyon yo

Fè kadriyaj ou, dirijan, ak plis fleksib nan fè matematik la sou vole ak operasyon. Miltipliye, divize, ajoute, ak soustraksyon fason ou nan saniti CSS.

Echafodaj ak lyen

`@bodyBackground`	`@white`	Koulè background paj la
`@textColor`	`@grayDark`	Koulè tèks par défaut pou tout kò, tit, ak plis ankò
`@linkColor`	`#08c`	Koulè tèks lyen defo
`@linkColorHover`	`darken(@linkColor, 15%)`	Default lyen tèks hover koulè

Sistèm griyaj

`@gridColumns`	12
`@gridColumnWidth`	60px
`@gridGutterWidth`	20px
`@fluidGridColumnWidth`	6.382978723%
`@fluidGridGutterWidth`	2.127659574%

Tipografi

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monako, "Courier New", monospace
`@baseFontSize`	13px	Dwe piksèl
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px	Dwe piksèl
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Tablo

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

Koulè gri

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

Koulè aksan

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

Eleman

Bouton

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

Fòm

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

Fòm eta ak alèt

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

Navbar

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

Inite ewo

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

Konsènan mixins

Mixin debaz yo

Yon mixin debaz se esansyèlman yon enkli oswa yon pati pou yon snippet nan CSS. Yo ekri menm jan ak yon klas CSS epi yo ka rele nenpòt kote.

. eleman {
  . clearfix ();
}

Mixin parametrik

Yon mixin parametrik se jis tankou yon mixin debaz, men li aksepte tou paramèt (kidonk non an) ak valè default opsyonèl.

. eleman {
  . fwontyè - reyon ( 4px );
}

Fasil ajoute pwòp ou a

Prèske tout mixin Bootstrap yo estoke nan mixins.less, yon bèl fichye itilite .less ki pèmèt ou itilize yon mixin nan nenpòt nan fichye .less ki nan bwat zouti a.

Se konsa, ale pi devan epi sèvi ak sa yo ki deja egziste oswa santi yo lib yo ajoute pwòp ou a jan ou bezwen.

Enkli mixins

Itilite yo

Mixin	Paramèt	Itilizasyon
`.clearfix()`	okenn	Ajoute nenpòt paran pou netwaye flote anndan an
`.tab-focus()`	okenn	Aplike fason konsantre Webkit la ak wonn deskripsyon Firefox
`.center-block()`	okenn	Auto sant yon eleman nan nivo blòk lè l sèvi avèk`margin: auto`
`.ie7-inline-block()`	okenn	Sèvi ak anplis regilye `display: inline-block`pou jwenn sipò IE7
`.size()`	`@height @width`	Byen vit mete wotè ak lajè sou yon liy
`.square()`	`@size`	Bati sou `.size()`yo mete lajè a ak wotè kòm menm valè
`.opacity()`	`@opacity`	Mete, nan nimewo antye, pousantaj opakite a (egzanp, "50" oswa "75")

Fòm

Mixin	Paramèt	Itilizasyon
`.placeholder()`	`@color: @placeholderText`	Mete `placeholder`koulè tèks la pou antre

Tipografi

Mixin	Paramèt	Itilizasyon
`#font > #family > .serif()`	okenn	Fè yon eleman sèvi ak yon pil serif font
`#font > #family > .sans-serif()`	okenn	Fè yon eleman sèvi ak yon pil sans-serif
`#font > #family > .monospace()`	okenn	Fè yon eleman sèvi ak yon pil monospace
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Fasil mete gwosè font, pwa, ak dirijan
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Mete fanmi font pou serif, epi kontwole gwosè, pwa, ak dirijan
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Mete fanmi font nan sans-serif, epi kontwole gwosè, pwa, ak dirijan
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Mete fanmi font nan monospace, epi kontwole gwosè, pwa, ak dirijan

Sistèm griyaj

Mixin	Paramèt	Itilizasyon
`.container-fixed()`	okenn	Kreye yon veso ki santre orizontal pou kenbe kontni ou
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Jenere yon sistèm kadriyaj pixel (veso, ranje, ak kolòn) ak n kolòn ak x pixel lajè goutyè
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Jenere yon sistèm griy dènye ak n kolòn ak x % goutyè lajè
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Jenere sistèm nan kadriyaj pixel pou `input`eleman, kontablite pou padding ak fwontyè
`.makeColumn`	`@columns: 1, @offset: 0`	Vire nenpòt `div`nan yon kolòn kadriyaj san `.span*`klas yo

CSS3 pwopriyete

Mixin	Paramèt	Itilizasyon
`.border-radius()`	`@radius`	Awondi kwen yon eleman. Kapab gen yon valè sèl oswa kat valè ki separe ak espas
`.box-shadow()`	`@shadow`	Ajoute yon lonbraj gout nan yon eleman
`.transition()`	`@transition`	Ajoute efè tranzisyon CSS3 (egzanp, `all .2s linear`)
`.rotate()`	`@degrees`	Wotasyon yon eleman n degre
`.scale()`	`@ratio`	Echèl yon eleman a n fwa gwosè orijinal li
`.translate()`	`@x, @y`	Deplase yon eleman sou plan x ak y
`.background-clip()`	`@clip`	Koupe background nan yon eleman (itil pou `border-radius`)
`.background-size()`	`@size`	Kontwole gwosè imaj background atravè CSS3
`.box-sizing()`	`@boxmodel`	Chanje modèl bwat la pou yon eleman (egzanp, `border-box`pou yon lajè plen `input`)
`.user-select()`	`@select`	Kontwole seleksyon kurseur tèks sou yon paj
`.backface-visibility()`	`@visibility: visible`	Anpeche flickering nan kontni lè w ap itilize CSS 3D transfòmasyon
`.resizable()`	`@direction: both`	Fè nenpòt eleman redimensionnable sou bò dwat la ak anba
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Fè kontni nenpòt eleman itilize kolòn CSS3

Orijin ak gradyan

Mixin	Paramèt	Itilizasyon
`#translucent > .background()`	`@color: @white, @alpha: 1`	Bay yon eleman yon koulè background translusid
`#translucent > .border()`	`@color: @white, @alpha: 1`	Bay yon eleman yon koulè fwontyè translusid
`#gradient > .vertical()`	`@startColor, @endColor`	Kreye yon gradyan background vètikal kwa-navigatè
`#gradient > .horizontal()`	`@startColor, @endColor`	Kreye yon gradyan orizontal background kwa-navigatè
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Kreye yon gradyan background direksyon kwa-navigatè
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Kreye yon gradyan background kwa-navigatè twa koulè
`#gradient > .radial()`	`@innerColor, @outerColor`	Kreye yon gradyan background radial kwa-navigatè
`#gradient > .striped()`	`@color, @angle`	Kreye yon gradyan background trase kwa-navigatè
`#gradientBar()`	`@primaryColor, @secondaryColor`	Itilize pou bouton pou bay yon fwontyè gradyan ak yon ti kras pi fonse

Remak: Si w ap soumèt yon demann rale nan GitHub ak CSS modifye, ou dwe rekonpile CSS la atravè nenpòt nan metòd sa yo.

Zouti pou konpile

Ne ak makefile

Enstale konpilateur liy lòd LESS ak uglify-js globalman ak npm lè w ap kouri lòd sa a:

$ npm enstale -g mwens uglif-js

Yon fwa enstale jis kouri makesoti nan rasin lan nan anyè bootstrap ou a epi w ap tout mete.

Anplis de sa, si w gen watchr enstale, ou ka kouri make watchpou fè bootstrap rebati otomatikman chak fwa ou edite yon dosye nan lib bootstrap la (sa a pa obligatwa, jis yon metòd pratik).

Liy lòd

Enstale zouti nan liy lòd LESS atravè Node epi kouri lòd sa a:

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

Asire w ou mete --compressnan kòmandman sa a si w ap eseye pou sove kèk octets!

Javascript

Telechaje dènye Less.js la epi mete chemen pou li (ak Bootstrap) nan <head>.

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

Pou rekonpile dosye .less yo, jis sove yo epi rechaje paj ou a. Less.js konpile yo epi estoke yo nan depo lokal yo.

Aplikasyon Mac ki pa ofisyèl

Aplikasyon Mac ki pa ofisyèl la ap gade anyè dosye .less epi li konpile kòd la nan dosye lokal yo apre chak sove yon dosye .less gade.

Si ou renmen, ou ka aktive preferans nan aplikasyon an pou minifying otomatik ak nan ki anyè dosye konpile yo fini.

Bati ak MWEN

Poukisa MWEN?

Ki sa ki enkli?

Aprann plis

Varyab

Mixins

Operasyon yo

Varyab Bootstrap MWEN varyab, valè yo, ak direktiv itilizasyon yo

Echafodaj ak lyen

Sistèm griyaj

Tipografi

Tablo

Koulè gri

Koulè aksan

Eleman

Bouton

Fòm

Fòm eta ak alèt

Navbar

Dropdowns

Inite ewo

Bootstrap mixins

Konsènan mixins

Mixin debaz yo

Mixin parametrik

Fasil ajoute pwòp ou a

Enkli mixins

Itilite yo

Fòm

Tipografi

Sistèm griyaj

CSS3 pwopriyete

Orijin ak gradyan

Konpile Bootstrap ak MWEN

Zouti pou konpile

Ne ak makefile

Liy lòd

Javascript

Aplikasyon Mac ki pa ofisyèl

Plis aplikasyon pou Mac

Crunch

CodeKit

Senp