Ag baint úsáide as LESS le Bootstrap

Saincheap agus leathnaigh Bootstrap le LESS , réamhphróiseálaí CSS, chun leas a bhaint as na hathróga, na meascáin agus níos mó a úsáidtear chun CSS Bootstrap a thógáil.

Cén fáth NÍOS LÚ?

Déantar Bootstrap le LESS ina chroílár, teanga stílbhileog dhinimiciúil cruthaithe ag ár gcara maith, Alexis Sellier . Déanann sé CSS atá bunaithe ar chórais a fhorbairt níos tapúla, níos éasca agus níos spraoi.

Cad atá san áireamh?

Mar shíneadh ar CSS, folaíonn LESS athróga, meascáin le haghaidh gearrthóga cód ath-inúsáidte, oibríochtaí le haghaidh mata simplí, neadú, agus fiú feidhmeanna datha.

Foghlaim níos mó

Tabhair cuairt ar an láithreán gréasáin oifigiúil ag http://lesscss.org/ chun tuilleadh a fhoghlaim.

Athróga

Is féidir le dathanna agus luachanna picteilín a bhainistiú i CSS a bheith beagán de phian, de ghnáth lán cóipe agus greamaigh. Ach ní lú ná sin - sann dathanna nó luachanna picteilín mar athróga agus athraigh iad uair amháin.

Meascáin

Na trí dhearbhú ga teorann sin a chaithfidh tú a dhéanamh i CSS rialta? Anois tá siad síos go dtí líne amháin le cabhair ó mheascáin, gearrthóga de chód is féidir leat a athúsáid áit ar bith.

Oibríochtaí

Déan do ghreille, ceannródaíoch, agus níos mó solúbtha super ag déanamh an mata ar an eitilt le hoibríochtaí. Méadaigh, roinn, cuir leis agus dealaigh do bhealach chuig sanity CSS.

Scafall agus naisc

`@bodyBackground`	`@white`	Dath cúlra an leathanaigh
`@textColor`	`@grayDark`	Dath an téacs réamhshocraithe don chorp iomlán, ceannteidil agus go leor eile
`@linkColor`	`#08c`	Dath an téacs naisc réamhshocraithe
`@linkColorHover`	`darken(@linkColor, 15%)`	Dath hover téacs nasc réamhshocraithe

Córas greille

`@gridColumns`	12
`@gridColumnWidth`	60px
`@gridGutterWidth`	20px
`@fluidGridColumnWidth`	6.382978723%
`@fluidGridGutterWidth`	2. 127659574 %

Clóghrafaíocht

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monacó, "Courier Nua", monaspás
`@baseFontSize`	13px	Caithfidh picteilín a bheith ann
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px	Caithfidh picteilín a bheith ann
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Táblaí

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

Dathanna liathscála

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

Dathanna accent

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

Comhpháirteanna

Cnaipí

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

Foirmeacha

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

stáit fhoirm agus foláirimh

`@warningText`	#c09853
`@warningBackground`	#f3edd2
`@errorText`	#b94a48
`@errorBackground`	#f2dede
`@successText`	#468847
`@successBackground`	#df0d8
`@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`

Droim anuas

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

Aonad laoch

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

Maidir le meascáin

Meascáin bhunúsacha

Go bunúsach is éard atá i meascán bunúsach ná áireamh nó cuid do phíosa CSS. Tá siad scríofa díreach cosúil le rang CSS agus is féidir glaoch orthu áit ar bith.

. eilimint {
  . soiléirfix ();
}

Meascáin paraiméadracha

Tá mixin paraiméadrach díreach cosúil le mixin bunúsach, ach glacann sé freisin paraiméadair (mar sin an t-ainm) le luachanna réamhshocraithe roghnach.

. eilimint {
  . teorainn - ga ( 4px );
}

Cuir do chuid féin go héasca

Stóráiltear beagnach gach ceann de mheascáin Bootstrap i mixins.less, comhad fóntais iontach .less a chuireann ar do chumas mixin a úsáid in aon cheann de na comhaid .less san fhoireann uirlisí.

Mar sin, téigh ar aghaidh agus bain úsáid as na cinn atá ann cheana féin nó bíodh leisce ort do chuid féin a chur leis mar is gá duit.

meascáin san áireamh

Fóntais

Meascán	Paraiméadair	Úsáid
`.clearfix()`	aon cheann	Cuir le tuismitheoir ar bith é chun snámháin a ghlanadh laistigh
`.tab-focus()`	aon cheann	Cuir stíl fhócas Webkit i bhfeidhm agus imlíne bhabhta Firefox
`.center-block()`	aon cheann	Uathlár eilimint bloc-leibhéal ag baint úsáide as`margin: auto`
`.ie7-inline-block()`	aon cheann	Bain úsáid as chomh maith le rialta `display: inline-block`chun tacaíocht IE7 a fháil
`.size()`	`@height @width`	Socraigh go tapa an airde agus an leithead ar líne amháin
`.square()`	`@size`	Tógann sé ar `.size()`an leithead agus an airde a shocrú mar an luach céanna
`.opacity()`	`@opacity`	Socraigh, i slánuimhreacha, an céatadán teimhneachta (m.sh., "50" nó "75")

Foirmeacha

Meascán	Paraiméadair	Úsáid
`.placeholder()`	`@color: @placeholderText`	Socraigh `placeholder`dath an téacs le haghaidh ionchuir

Clóghrafaíocht

Meascán	Paraiméadair	Úsáid
`#font > #family > .serif()`	aon cheann	Déan eilimint agus úsáid á baint as cruachta cló serif
`#font > #family > .sans-serif()`	aon cheann	Déan eilimint agus bain úsáid as cruach cló sans-serif
`#font > #family > .monospace()`	aon cheann	Déan eilimint agus úsáid á baint as cruachta cló monaspáis
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Socraigh go héasca clómhéid, meáchan, agus tosaigh
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Socraigh teaghlach cló go serif, agus rialaigh méid, meáchan agus tosaigh
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Socraigh teaghlach cló go sans-serif, agus rialaigh méid, meáchan agus tosaigh
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Socraigh teaghlach cló go monaspás, agus rialú méid, meáchan, agus tosaigh

Córas greille

Meascán	Paraiméadair	Úsáid
`.container-fixed()`	aon cheann	Cruthaigh coimeádán cothrománach lárnach chun d'inneachar a choinneáil
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Gin córas greille picteilín (coimeádán, ró, agus colúin) le n colún agus x gáitéir ar leithead picteilín
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Gin córas greille precent le n colún agus x % gáitéir ar leithead
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Gin an córas greille picteilín le haghaidh `input`eilimintí, cuntasaíocht do stuáil agus teorainneacha
`.makeColumn`	`@columns: 1, @offset: 0`	Tiontaigh aon cheann `div`isteach i gcolún greille gan na `.span*`ranganna

Airíonna CSS3

Meascán	Paraiméadair	Úsáid
`.border-radius()`	`@radius`	Timpeall coirnéil eilimint. Is féidir leis a bheith ina luach singil nó ina cheithre luach spásscartha
`.box-shadow()`	`@shadow`	Cuir scáth titim le eilimint
`.transition()`	`@transition`	Cuir éifeacht trasdula CSS3 leis (m.sh., `all .2s linear`)
`.rotate()`	`@degrees`	Rothlaigh eilimint n céim
`.scale()`	`@ratio`	Scála eilimint go n uair a méid bunaidh
`.translate()`	`@x, @y`	Bog dúil ar na plánaí x agus y
`.background-clip()`	`@clip`	Bearr cúlra dúil (úsáideach le haghaidh `border-radius`)
`.background-size()`	`@size`	Rialú ar mhéid na n-íomhánna cúlra trí CSS3
`.box-sizing()`	`@boxmodel`	Athraigh samhail an bhosca le haghaidh eiliminte (m.sh., `border-box`le haghaidh leithead iomlán `input`)
`.user-select()`	`@select`	Rialú ar an rogha cúrsóra téacs ar leathanach
`.backface-visibility()`	`@visibility: visible`	Cosc a chur ar scealpadh inneachair agus claochluithe CSS 3D á n-úsáid
`.resizable()`	`@direction: both`	Déan aon eilimint a athmhéadú ar dheis agus ar bun
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Bain úsáid as colúin CSS3 as ábhar aon eilimint

Cúlra agus grádáin

Meascán	Paraiméadair	Úsáid
`#translucent > .background()`	`@color: @white, @alpha: 1`	Tabhair dath cúlra tréshoilseach d’eilimint
`#translucent > .border()`	`@color: @white, @alpha: 1`	Tabhair dath teorann tréshoilseach d’eilimint
`#gradient > .vertical()`	`@startColor, @endColor`	Cruthaigh grádán cúlra ingearach trasbhrabhsálaí
`#gradient > .horizontal()`	`@startColor, @endColor`	Cruthaigh grádán cúlra cothrománach tras-bhrabhsálaí
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Cruthaigh grádán cúlra treo trasbhrabhsálaí
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Cruthaigh grádán cúlra trí dhath tras-bhrabhsálaí
`#gradient > .radial()`	`@innerColor, @outerColor`	Cruthaigh grádán cúlra gathacha tras-bhrabhsálaí
`#gradient > .striped()`	`@color, @angle`	Cruthaigh grádán cúlra stríocach trasbhrabhsálaí
`#gradientBar()`	`@primaryColor, @secondaryColor`	Úsáidtear é le haghaidh cnaipí chun grádán agus teorainn beagán níos dorcha a shannadh

Nóta: Má tá iarratas tarraingthe á chur isteach agat chuig GitHub le CSS modhnaithe, ní mór duit an CSS a ath-thiomsú trí aon cheann de na modhanna seo.

Uirlisí le haghaidh tiomsú

Nód le makefile

Suiteáil an tiomsaitheoir líne ordaithe LESS agus uglify-js domhanda le npm tríd an ordú seo a leanas a rith:

$npm suiteáil -g níos lú uglify-js

Nuair a bheidh tú suiteáilte, rith makeó fhréamh do eolaire bootstrap agus tá tú réidh.

Ina theannta sin, má tá faireoir suiteáilte agat, is féidir go n-athróidh tú make watchbootstrap go huathoibríoch gach uair a chuireann tú comhad in eagar sa lib bootstrap (níl sé seo ag teastáil, níl de dhíth ach modh áise).

Líne ordaithe

Suiteáil an uirlis líne ordaithe LESS trí Nód agus rith an t-ordú seo a leanas:

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

Bí cinnte a chur --compresssan ordú sin má tá tú ag iarraidh roinnt beart a shábháil!

Javascript

Íoslódáil na Less.js is déanaí agus cuir an cosán chuige (agus Bootstrap) san áireamh sa <head>.

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

Chun na comhaid .less a ath-thiomsú, níl le déanamh ach iad a shábháil agus do leathanach a athlódáil. Déanann Less.js iad a thiomsú agus a stóráil i stóráil áitiúil.

Aip neamhoifigiúil Mac

Féachann an aip neamhoifigiúil Mac ar eolairí de chomhaid .less agus tiomsaíonn sé an cód chuig comhaid áitiúla tar éis gach sábháil ar chomhad .less faire.

Más mian leat, is féidir leat sainroghanna a scoránaigh san aip le haghaidh mionú uathoibríoch agus cén t-eolaire a chríochnaíonn na comhaid tiomsaithe.

Tógtha le LÚIDE

Cén fáth NÍOS LÚ?

Cad atá san áireamh?

Foghlaim níos mó

Athróga

Meascáin

Oibríochtaí

Athróga Bootstrap NÍOS LÚ athróg, a luachanna, agus treoirlínte úsáide

Scafall agus naisc

Córas greille

Clóghrafaíocht

Táblaí

Dathanna liathscála

Dathanna accent

Comhpháirteanna

Cnaipí

Foirmeacha

stáit fhoirm agus foláirimh

Navbar

Droim anuas

Aonad laoch

Meascáin bootstrap

Maidir le meascáin

Meascáin bhunúsacha

Meascáin paraiméadracha

Cuir do chuid féin go héasca

meascáin san áireamh

Fóntais

Foirmeacha

Clóghrafaíocht

Córas greille

Airíonna CSS3

Cúlra agus grádáin

Bootstrap a thiomsú le NÍOS LÚ

Uirlisí le haghaidh tiomsú

Nód le makefile

Líne ordaithe

Javascript

Aip neamhoifigiúil Mac

Tuilleadh apps Mac

Géarchor

CodeKit

Simplí