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

MWEN CSS

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
@@dropdownDividerTop #e5e5e5
@@dropdownDividerBottom @white

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.

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

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.

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

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èkmargin: auto
.ie7-inline-block() okenn Sèvi ak anplis regilye display: inline-blockpou 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 placeholderkoulè 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 kadriyaj pousan ak n kolòn ak x % goutyè lajè
#grid > .input() @gridColumnWidth, @gridGutterWidth Jenere sistèm nan kadriyaj pixel pou inputeleman, kontablite pou padding ak fwontyè
.makeColumn @columns: 1, @offset: 0 Vire nenpòt divnan 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-boxpou 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
.hyphens() @mode: auto CSS3 sirèt lè ou vle li (gen ladan l word-wrap: break-word)

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, JSHint, Recess, ak uglify-js globalman ak npm lè w kouri lòd sa a:

$ npm enstale -g mwens jshint rekreyasyon uglify-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.

Plis aplikasyon pou Mac

Crunch

Crunch se yon gwo editè ak yon konpilateur ki gen MWEN kap bati sou Adobe Air.

CodeKit

CodeKit se yon aplikasyon Mac ki te kreye pa menm nèg ak aplikasyon ofisyèl Mac ki konpile LESS, SASS, Stylus, ak CoffeeScript.

Senp

Mac, Linux, ak PC aplikasyon pou trennen ak gout konpile nan MWEN dosye. Anplis, kòd sous la se sou GitHub .