Bootstrap bilen LESS ulanmak

Bootstrap-yň CSS-ni gurmak üçin ulanylýan üýtgeýänlerden, garyndylardan we has köp peýdalanmak üçin Bootstrap-y CSS deslapky prosessor LESS bilen düzüň we giňeldiň.

Näme üçin az?

“Bootstrap” öz dostumyz Aleksis Sellier tarapyndan döredilen dinamiki stil sahypasy bolan LESS bilen ýasalýar . Ulgam esasly CSS-ni ösdürmegi has çalt, aňsat we has gyzykly edýär.

Näme girýär?

CSS-iň giňelmesi hökmünde LESS üýtgeýjileri, gaýtadan ulanylýan kod bölekleri üçin garyndylary, ýönekeý matematika amallary, höwürtge we hatda reňk funksiýalaryny öz içine alýar.

Köpräk oka

Has giňişleýin maglumat üçin http://lesscss.org/ resmi web sahypasyna giriň .

Üýtgeýjiler

CSS-de reňkleri we piksel bahalaryny dolandyrmak birneme agyry bolup biler, adatça göçürmek we goýmak bilen doly. LESS bilen däl-de, reňkleri ýa-da piksel bahalaryny üýtgeýjiler hökmünde belläň we bir gezek üýtgediň.

Mixins

Şol üç serhet radiusynyň deklarasiýasyny yzygiderli “CSS” -de etmeli? Indi olar islendik ýerde gaýtadan ulanyp boljak garyndylaryň, kod bölekleriniň kömegi bilen bir setire düşýärler.

Amallar

Amallar bilen uçuşda matematikany ýerine ýetirip, gözenegiňizi öňdebaryjy we has çeýe ediň. CSS saglygyna ýoluňyzy köpeldiň, bölüň, goşuň we aýyryň.

Skaf we baglanyşyklar

`@bodyBackground`	`@white`	Sahypanyň fon reňki
`@textColor`	`@grayDark`	Bütin beden, sözbaşylar we başgalar üçin tekstiň reňki
`@linkColor`	`#08c`	Bellenen baglanyşyk tekstiniň reňki
`@linkColorHover`	`darken(@linkColor, 15%)`	Bellenen baglanyşyk tekstiniň reňki

Grid ulgamy

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

Tipografiýa

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

Tablisa

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

Çal reňkli reňkler

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

Çalt reňkler

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

Komponentler

Düwmeler

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

Formalar

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

Döwletler we duýduryşlar

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

Açylýan ýerler

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

Gahryman bölümi

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

Garyndylar hakda

Esasy garyndylar

Esasy garyndy, esasan, CSS-iň bir bölegi üçin bir bölegi ýa-da bölekleýin. Olar edil CSS synpy ýaly ýazylandyr we islendik ýere jaň edip bolýar.

. element {
  . Clearfix ();
}

Parametrik garyndylar

Parametrik garyndy, edil esasy garyndy ýalydyr, ýöne goşmaça başlangyç bahalary bilen parametrleri (şonuň üçin ady) kabul edýär.

. element {
  . araçäk - radius ( 4px );
}

Özüňizi aňsatlyk bilen goşuň

“Bootstrap” -yň garyndylarynyň hemmesi diýen ýaly mixins.less-da saklanýar, gurallar toplumyndaky .less faýllaryň islendik birinde garyndyny ulanmaga mümkinçilik berýän ajaýyp peýdaly .less faýly.

Şeýlelik bilen, dowam ediň we bar bolanlaryny ulanyň ýa-da zerur bolanda özüňizi goşup bilersiňiz.

Goşulan garyndylar

Kärhanalar

Mixin	Parametrler	Ulanylyşy
`.clearfix()`	hiç	Içindäki ýüzüşleri arassalamak üçin islendik ene-ata goşuň
`.tab-focus()`	hiç	Webkit fokus stilini we Firefox tegelek görnüşini ulanyň
`.center-block()`	hiç	Ulanylýan blok derejeli elementi awtomatik merkezleşdiriň`margin: auto`
`.ie7-inline-block()`	hiç	`display: inline-block`IE7 goldawyny almak üçin yzygiderli ulanyň
`.size()`	`@height @width`	Boýy we ini bir setirde çalt düzüň
`.square()`	`@size`	Inini `.size()`we beýikligini şol bir baha bilen kesgitlemek üçin gurulýar
`.opacity()`	`@opacity`	Umuman, açyklyk göterimini düzüň (mysal üçin, "50" ýa-da "75")

Formalar

Mixin	Parametrler	Ulanylyşy
`.placeholder()`	`@color: @placeholderText`	`placeholder`Girişler üçin tekst reňkini düzüň

Tipografiýa

Mixin	Parametrler	Ulanylyşy
`#font > #family > .serif()`	hiç	Bir elementi serif şrift stakasyny ulanyň
`#font > #family > .sans-serif()`	hiç	Sans-serif şrift toplumyny ulanyň
`#font > #family > .monospace()`	hiç	Bir elementi monospace şrift toplumyny ulanyň
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Şriftiň ululygyny, agramyny we öňdebaryjylygyny aňsatlyk bilen düzüň
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Şrift maşgalasyny serif edip düzüň, ululygyny, agramyny we öňdebaryjylygyny dolandyryň
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Şrift maşgalasyny sans-serif-e düzüň we ululygyny, agramyny we öňdebaryjylygyny dolandyryň
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Şrift maşgalasyny monospace düzüň we ululygyny, agramyny we öňdebaryjylygyny dolandyryň

Grid ulgamy

Mixin	Parametrler	Ulanylyşy
`.container-fixed()`	hiç	Mazmunyňyzy saklamak üçin keseligine merkezleşdirilen konteýner dörediň
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	N sütünleri we x piksel giňligi bilen piksel gözenek ulgamyny (konteýner, hatar we sütünler) dörediň
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	N sütünleri we x % giňligi bilen göterim set ulgamyny dörediň
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Elementler üçin piksel gözenek ulgamyny dörediň, `input`padding we serhetleri hasaba alyň
`.makeColumn`	`@columns: 1, @offset: 0`	Islendik birini `div`sapaksyz gözenegiň sütünine `.span*`öwüriň

CSS3 häsiýetleri

Mixin	Parametrler	Ulanylyşy
`.border-radius()`	`@radius`	Bir elementiň burçlaryny tegelekläň. Singleeke-täk baha ýa-da boşluk bilen bölünen dört baha bolup biler
`.box-shadow()`	`@shadow`	Bir elemente damja kölegesini goşuň
`.transition()`	`@transition`	CSS3 geçiş effektini goşuň (mysal üçin `all .2s linear`)
`.rotate()`	`@degrees`	Bir elementi n dereje öwrüň
`.scale()`	`@ratio`	Bir elementi asyl ululygyndan n esse ulaldyň
`.translate()`	`@x, @y`	Bir elementi x we y uçarlarynda süýşüriň
`.background-clip()`	`@clip`	Bir elementiň fonuny kesiň (peýdaly `border-radius`)
`.background-size()`	`@size`	CSS3 arkaly fon suratlarynyň ululygyna gözegçilik ediň
`.box-sizing()`	`@boxmodel`	Bir element üçin guty modelini üýtgediň (mysal `border-box`üçin, doly giňlik üçin `input`)
`.user-select()`	`@select`	Sahypadaky tekstiň kursor saýlamasyna gözegçilik
`.backface-visibility()`	`@visibility: visible`	CSS 3D üýtgeşmelerini ulananyňyzda mazmunyň çişmeginiň öňüni alyň
`.resizable()`	`@direction: both`	Islendik elementi sag we aşaky görnüşde üýtgedip bilersiňiz
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Islendik elementiň mazmunyny CSS3 sütünlerini ulanyň
`.hyphens()`	`@mode: auto`	Islän wagtyňyz CSS3 defisasiýa (öz içine alýar `word-wrap: break-word`)

Düşündirişler we gradiýentler

Mixin	Parametrler	Ulanylyşy
`#translucent > .background()`	`@color: @white, @alpha: 1`	Bir elemente aç-açan reňk beriň
`#translucent > .border()`	`@color: @white, @alpha: 1`	Bir elemente aç-açan araçäk reňk beriň
`#gradient > .vertical()`	`@startColor, @endColor`	Kesgitli brauzeriň dik fon gradiýentini dörediň
`#gradient > .horizontal()`	`@startColor, @endColor`	Kesgitli brauzer keseligine fon gradientini dörediň
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Kesgitli brauzeriň ugrukdyryjy fon gradiýentini dörediň
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Üç reňkli fon gradientini kesip geçiň
`#gradient > .radial()`	`@innerColor, @outerColor`	Kesgitli brauzer radial fon gradientini dörediň
`#gradient > .striped()`	`@color, @angle`	Kesgitli brauzer zolakly fon gradientini dörediň
`#gradientBar()`	`@primaryColor, @secondaryColor`	Gradient we birneme garaňky araçäk bellemek üçin düwmeler üçin ulanylýar

Bellik: Üýtgedilen CSS bilen GitHub-a çekmek haýyşyny iberýän bolsaňyz , CSS-ni şu usullaryň haýsydyr biriniň üsti bilen täzeden düzmeli .

Toplamak üçin gurallar

Makfile bilen düwün

Aşakdaky buýrugy işledip, npm bilen LESS buýruk setiri düzüjisini, JSHint, Recess we uglify-js guruň.

$ npm gurnamak -g az jshint dynç alyşy uglify-js

Gurlandan soň, bootstrap katalogyňyzyň kökünden işlediň makewe hemmäňiz taýyn.

Mundan başga-da, sagat gurnan bolsaňyz, make watchher gezek bootstrap lib-de bir faýl redaktirläniňizde bootstrap awtomatiki usulda täzeden gurlup bilner (bu hökman däl, diňe amatly usul).

Buýruk setiri

Node arkaly LESS buýruk setir guralyny guruň we aşakdaky buýrugy işlediň:

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

--compressKäbir baýtlary tygşytlamaga synanyşýan bolsaňyz, şol buýruga goşuň !

Javascript

Iň soňky Less.js-i göçürip alyň we oňa barýan ýoly (we Bootstrap) goşuň <head>.

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

.Faýlsyz faýllary täzeden düzmek üçin olary ýatda saklaň we sahypaňyzy täzeden ýükläň. Less.js olary düzýär we ýerli ammarda saklaýar.

Resmi däl Mac programmasy

Resmi däl Mac programmasy .less faýllaryň kataloglaryna tomaşa edýär we synlanan .less faýly ýatda saklandan soň kody ýerli faýllara düzýär.

Isleseňiz, awtomatiki kiçeltmek üçin programmada ileri tutmalary üýtgedip bilersiňiz we düzülen faýllaryň haýsy bukjasy gutarýar.

LESS bilen gurlan

Näme üçin az?

Näme girýär?

Köpräk oka

Üýtgeýjiler

Mixins

Amallar

Bootstrap üýtgeýjileri LESS üýtgeýjiler, olaryň bahalary we ulanyş görkezmeleri

Skaf we baglanyşyklar

Grid ulgamy

Tipografiýa

Tablisa

Çal reňkli reňkler

Çalt reňkler

Komponentler

Düwmeler

Formalar

Döwletler we duýduryşlar

Navbar

Açylýan ýerler

Gahryman bölümi

Bootstrap garyndylary

Garyndylar hakda

Esasy garyndylar

Parametrik garyndylar

Özüňizi aňsatlyk bilen goşuň

Goşulan garyndylar

Kärhanalar

Formalar

Tipografiýa

Grid ulgamy

CSS3 häsiýetleri

Düşündirişler we gradiýentler

Bootstrap-y LESS bilen düzmek

Toplamak üçin gurallar

Makfile bilen düwün

Buýruk setiri

Javascript

Resmi däl Mac programmasy

Has köp Mac programmalary

Gyryş

CodeKit

Pleönekeý